Matt RaibleMatt Raible is a Web Architecture Consultant specializing in open source frameworks.

10+ YEARS


Over 10 years ago, I wrote my first blog post. Since then, I've authored books, had kids, traveled the world, found Trish and blogged about it all.

New Look and Feel, Designed by Gillen's Army

As part of my 10-year blogiversary, I was hoping to refresh this site with a new look and feel. A few months ago, I contacted my friend Mark Waggoner to see about getting his design help. We promptly worked out a logo/business card/website deal and Gillen's Army went to work.

I picked a logo from numerous choices in late June, finalized a business card for printing in July and received the HTML and CSS for the site on August 2nd. I started converting it to a Roller theme last week and did a whole bunch of other modifications in the process.

  • Upgraded to Roller 5.0.1.
  • Upgraded wro4j to the latest version (1.4.8.1) to workaround using a → (\2192) in CSS.
  • Changed to use jQuery and Lightbox2 for pictures.
  • Upgraded to the latest version (3.0.83) of SyntaxHighlighter. You might notice there is no longer a toolbar in this version. However, you can still double-click on code and easily copy/paste it.

In addition to these upgrades, I made a few enhancements. I converted to HTML5 (by switching the doctype), added Modernizr and a feature that detects if the sun is up in your location. If you allow your browser to send me your lat and long, I'll give you a dark theme when the sun is down and a light theme when it's daylight. I used Preston's Hunt's JavaScript Class for Sunrise and Sunset Calculations to determine isDaylight. You can also change the theme to light or dark using the small rectangles above the search box on the right. This sets a cookie and overrides the HTML5 Geo check. You can see the implementation of this logic in site.js.

The stylesheet switching doesn't happen as fast as I'd hoped (there's a flash even if using cookies), so I'll likely be converting some theme-setting logic to the server-side. The HTML5 version of the FaceBook Like Button requires you to specify the "data-colorscheme" in markup so this further supports moving to the server.

I have other minor adjustments I'd like to make, but more importantly - I wanted to get it out to you all. Tell me what you like and don't like. Among other things, the form inputs for comments and contact forms have backgrounds that might not be great for those color-impaired. Also, you can see how the iframe on the contact page has a white background instead of one based on the theme.

Here's some stats comparing my old andreas08 theme to the new darklight:

Metric andreas08 darklight
Size and Speed 167 requests, 3.6MB, 9.89s 148 requests, 3.2MB, 7.34s
YSlow 76 87
PageSpeed 91 96

Sweet! It looks like this site is faster than ever. Cheers to Mark and Gillen's Army for the new design. I dig it!

Posted in Roller at Aug 14 2012, 10:58:11 PM MDT 6 Comments
Comments:

This looks great Matt! Your blog has tons of top-notch info spanning a decade, but the look-and-feel has been stuck in the past all the while, especially the old logo. Now it's all in place -- the logo is my favorite part. Very nice.

Posted by Pete on August 15, 2012 at 05:39 PM MDT #

Pete - you're right! It definitely needed a design update. Now, what's up with the 404 on your site (http://www.lamborne.net)? ;)

Posted by Matt Raible on August 16, 2012 at 09:01 AM MDT #

Ha, yeah my first line of security is no root context :)

Posted by Pete on August 16, 2012 at 02:29 PM MDT #

I'm not sure about most people, but I find bright white text on a black background very hard to stare at for long. When I look away I get an lingering after image So white theme is it for me. Grey is easier on the eyes IMHO. Apart from that - looks great.

Posted by Carl on August 16, 2012 at 08:44 PM MDT #

@Carl - I agree with you. I didn't like the black theme at first, but it's starting to grow on me.

Posted by Matt Raible on August 16, 2012 at 09:29 PM MDT #

Au contraire, I love the dark look. Also, love the new look for Roller.

Posted by Dave on November 27, 2012 at 09:08 PM MST #

Post a Comment:
  • HTML Syntax: Allowed