For years my personal site has been an embarrassment. I avoided writing new posts so I wouldn’t have to link to them, its design was that bad. Having quit my job last month, I spent some time working on a design I could be proud of. Last Friday I silently launched that design.

This new design puts content created outside my blog (tweets, links, etc.) on an equal footing with blog entries. I have been cross-posting tweets and bookmarks to my site for a couple of years in an effort to self-host all my content. Trouble was, five tweets would push recent links or posts off the front page. I wanted a front page which could include recent content from all streams.

My hope is the new design is a little more future-proof. I’ve been following the responsive enhancement trend for some months now. In September, the Boston Globe made waves with its responsive redesign. I felt it was time I had an attractive site which presented well, regardless of the size or pixel density of the screen.

Some highlights of the new design:

• Nothing but ems. All sizes are relative. No pixel sizing, with the exception of borders. Pixel densities are changing, and there’s no guarantee of a minimum browser width.
• No bitmapped graphics. All icons are either characters or vector graphics.
• Most measurements are based on the Fibonacci sequence. I’m not a designer, and this nicely limits my choices for padding and font sizes.
• HTML5 elements where appropriate.
• To that end, I’m using the HTML5 reset CSS to force a baseline for styling.
• For old versions of IE, I use html5shim to add support for HTML5 elements.
• Some sniffing of browser capabilities. Modernizr seemed too heavy-weight, so I wrote something specific to my needs.
• CSS3 Media Query support for older browsers with Scott Jehl’s Respond.js. (Respond.js does not yet support ems for media queries. Any browser without native media query support defaults to the largest layout. As most mobile browsers are Webkit-based or barely support CSS, this minimally affects those on small devices.)

This was not an easy task for me, given that web front end design is not my speciality. There were a couple of clunky starts. I finally made some progress when I decided to focus on the content without styling. Next, I tackled simple styling of individual posts on mobile devices, then index and archive pages. Once those were done, I added more advanced CSS features and adjusted the style for larger displays. This helped me focus my efforts without getting bogged down in detail.

There are still a few rough edges and usability concerns. (I still find the styling for posts on external links to be confusing, for example.) Some of my design choices, like my use of Unicode characters, don’t translate well to older browsers. Still, it’s a good first start. I’ve learnt a lot about how to design for responsive enhancement and smaller displays.

Future enhancements should include spicing up the design with some SVG or HTML5 Canvas graphics, leveraging JavaScript to hide and reveal comments and adding nav links to skip content on smaller screens.