As it turned out, making the layout work on a variety of devices was just a matter of adding a few CSS media queries to the finished product. The key to making it easy was that the layout was already liquid, so optimizing it for small screens meant collapsing a few margins to maximize space and tweaking the sidebar layout in the cases where the screen is too narrow to show two columns.
max-width property seems almost forgotten in the web designer’s toolbox since it wasn’t supported by Internet Explorer 6. With that restriction lifted, it’s the perfect compliment to a liquid layout letting the content re-flow naturally at a variety of widths but not expanding to the point of absurdity where extreme line lengths make reading a chore. It’s a great compromise between liquid and fixed layouts.
A wide view. The max-width property keeps the width of the content at a reasonable size for nice reading.
A narrow view. No need for any media queries here, the browser automatically reflows the content in our liquid layout.
Even narrower. The margins and padding around the content collapse to maximize space, the layout changes to a single column—this is the basis of the mobile phone layout.
The view on an iPad. Simple tweaks to reduce scrolling and zooming.
The view on an iPhone. Because the layout works in very narrow browsers, we only had to adjust the fonts in the top navigation to make it look great on iPhone.
Optimizing for mobile browsers wasn’t an upfront requirement for this app — or even all that necessary — but we learned a lot by taking a couple of hours to try something new. For us, small projects like Iterations are a great place to experiment with new techniques that might be impractical (or far more difficult) to implement in production sites that require us to consider legacy code and fringe compatibility cases. Plus, it would just take a lot more time to bring techniques like this to a bigger app. By using these techniques on Iterations, we got to learn more about the process and feasibility of bringing them into our other apps.
Related: Responsive enhancement [adactio]