I redesigned my site for the future!

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:

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.

  1. bruno-c

    November 8, 2011 at 5:10 pm

    Looks good Ian! I didn’t know you had quit your job! It is challenging to put together a decent looking site for a non-designer but there’s a few pretty good resources out there. I recently started a re-design of the js-montreal.org web site and i’m using Twitter Bootstrap – it’s been pretty useful to far to get a solid basic template going.

    Congratulations on leaving your job. Lets talk about it soon.

  2. Ian Stevens

    November 8, 2011 at 5:33 pm

    Thanks Bruno! Nice work on the js-montreal.org site too. The toughest part for me is putting together an attractive site that doesn’t look like it was designed by the visually impaired. Layout, colours, padding, interactions, those are tough for me because I don’t exercise my design skills all the time.

    Yeah, I quit my job. I wasn’t too happy where I was and needed to pull the trigger.

  3. Ian Stevens

    November 16, 2011 at 10:38 pm

    Cheers Lori. I don’t do front-end work on the regular, so I make a point on keeping up with trends. Zeldman.com is likely my primary source of what’s new in client-side design.