TL;DR — The Newsweek redesign finally pushed me over the edge to redesign my site after four years.
I’d been itching to redesign my site for the better part of a year now. I’d been managing to give my head a shake and ignore it in favour of other priorities. But I weakened recently when I saw the redesign of the Newsweek web site.
I think the whole Newsweek site is absolutely brilliant. The folks at Huge did an incredible job. It’s a near perfect balance of smooth interactivity and great reading experience.
I was especially smitten with the article pages. If I were to guess, I’d say they put a lot of thought into designing this page. I love the way the text is slightly left offset and embedded images are right aligned but stick out from the paragraph. It achieves a wonderful left-right balance to the page. It also makes space for more words to the left of the image, whereas typically with right-aligned images, you end up with a just a few words jammed to the left of the image. It’s a subtle difference, but the visual benefits are huge (damn, sorry for the pun).
As you scroll down an article page, you usually come to a photo that takes the full width of screen. A nice touch, but if I were to nit pick, I don’t like that they clipped it in a fixed-height viewport that moves as you scroll. I’ve become increasingly irritated by animations or events attached to scrolling and although this definitely isn’t the worst example, I am still not a fan. If you resize your browser down to 1024px, you’ll see that this behaviour goes away.
Anyways, in my redesign of this site, I borrowed the ideas of offsetting the text slightly to the left and making images right-aligned and stick out from the paragraph. I didn’t implement the full-width images, though I may do something similar in the future.
The last time I redesigned this site was way back in 2009 (prior to that, I had redesigned annually). I’d made a few minor adjustments over the years, but didn’t feel the need to completely redesign until the last year or so. Since then, a few things have been irritating me.
I realized that my fluid layout was annoying to read on screens wider than 1024px, which according to Google Analytics most of my visitors are running.
On mobile the site was an awful experience. A few of the images didn’t line up correctly and things appeared a bit broken. And every time you loaded a new page, you had to zoom and even then it wasn’t easy to read.
This new design should work great on screens of all sizes. I’ve tested it on a couple of phones, an iPad, desktop, and even a TV. I did optimize for HiDPI (a.k.a. retina) as well, but some older posts will have images that are a bit fuzzy.
I’ve also been planning to step up my blogging and picked up a few tips to engage readers, like making it clear who the author is on the article page. It’s not enough to just put a name. You need to answer the question, “Who is this guy and why does he deserve my attention?” A short bio and ideally a headshot is often what you see. Since this is a personal site, I’ve put this right in the header, much like Joel and Marco do on their sites.
I’ve also learned that I should start collecting email subscribers and notify them when a new article is posted. I know some people still prefer to subscribe via RSS, but many do not, and the option to subscribe via email is long overdue.
In an effort to make the site a bit more professional, I’ve removed some of the noise (books, music, and travel journal) from the home page.
On the technical side, the markup was done before I started using HTML5, so was plagued by a severe case of divitis. That’s all been cleaned up. I’m also now using SASS (with Compass) instead of plain ‘ol CSS and minifying the CSS and JS.
I’m hoping this new design will inspire me to write more often.