As more of my browsing shifts to the iPhone, I find myself increasingly dissatisfied with sites that don’t optimize their layouts for mobile screens. Of course, Mobile Safari can display even complex web pages “just fine” — but pinching and panning to navigate them isn’t always fun.

The answer is a trendy new school of thought in web design, called “responsive design.” But it’s not just trendy; it solves a real problem. Designers coding responsively create sites that reflow to fit the size of the screen. Text and images shrink or grow; sidebars become sections below the fold; items laid out horizontally shift to a vertical flow.

At least at the most basic level, responsive design is not terribly hard to do. Working from a template posted on Onextrapixel, I was able to convert my landing page to a responsive design with roughly two afternoons and an evening of work.

I’m not done — linked pages still need to be updated with the new design; there are some CSS3 issues with Firefox that I mean to fix. But I like how it’s coming along.


October 10, 2011