Responsive

For those of you reading in a feed reader or on the desktop, open up the site on your iPhones. Or at least resize your browser window.

Last night I rolled out an update to the site’s design which is responsive. For those of you who haven’t heard, Responsive Design is the future of designing websites. It used to be that to have a mobile site, you’d redirect users to a mobile specific version. The problem with this method is that you’d end up with a m.*.com or a *.com/mobile URL that if other users clicked on, would direct them to the wrong version if on the desktop.

But not anymore. Ethan Marcotte wrote a fantastic book, Responsive Web Design that’s about as easy of an explanation, and a quick read as you can do (as are most of the A Book Apart books).

After a quick read, I realized the concepts of responsive design are very easy to grasp. It’s a matter of thinking in ratios and percentages rather than fixed pixels, easy to convert if you’re using a grid. I had already used Travis Isaacs’ fantastic Keynote Wireframe Toolkit1 to mockup the site, so I did a quick iPhone design, added some media queries to my stylesheet, and boom! responsive design complete.

Now the site should be future-proofed for any device size, and you get a great mobile reading experience.

Please let me know about any bugs you encounter.

  1. Seriously, this tool has made visual design completely accessible to a non-designer like me. []
December 14, 2011