• 
• 
• 

 1 of 3

Gallery

Learning to adapt to the mobile web

Posted on 23 Apr 2012 at 11:39

Smart web designers need to respond to the mobile web with responsive design, not cut-down pages. Tom Arah explores what's involved

Marcotte’s book shows that there are three main ingredients to such a responsive web design. The first is a fully adaptive dynamic grid and, interestingly, Marcotte starts from a typical Photoshop-created desktop layout that’s been recreated as a fixed, CSS-based grid using pixel sizes.

The trick is to convert fixed pixel dimensions into proportional percentages using the “target/context = result” rule. For example, a 380-pixel column within a 960-wide page container would convert to 380/960, so set “width: 0.3958333333333333%” (without rounding it up). Having sized all the obvious block elements, do the same to margins and padding, and when finished you’ll have a grid that seamlessly adapts to any size of screen – it’s the end of horizontal scroll bars and zoom hell.

With your fully flexible layout sorted, the next ingredient is making the content adaptive, too, and for text this involves a CSS reset, and then setting all font sizes in ems rather than points or pixels. Handling graphics and other embedded media through pixel-independent CSS becomes more complicated: the first obstacle is that, by default, images will display at their native pixel size, and so large images spill out of their containers and look terrible.

With your fully flexible layout sorted, the next ingredient is making the content adaptive

One option is to use “overflow: hidden”, which effectively crops the image to its container, but far more useful is to scale the image to its container using “width: 100%”. However, this can become pixellated if thumbnails and icons are scaled beyond their original pixel dimensions, so most useful of all is the setting “max-width: 100%”, which scales down oversized images to match the width of their container, but doesn’t scale them up beyond their native pixel size.

Intelligent design

We now have a single, universal design based on an adaptive grid and content. However, we still have one major problem, because there’s no such thing as a single universal best layout.

Depending on the shape and size of the final page, a good designer would make entirely different choices on how many images to include, at what size and where, whether to crop them, what fonts, how many columns, you name it. Sadly, one design can’t be made to fit all. It looks like another impasse – but again, that isn’t the case: we just need a mechanism to encompass such individual design decisions within an adaptive page.

This is where the third ingredient of a responsive design comes in. Media queries are a mechanism new to CSS3 that let you inspect the properties of the rendering device and browser, and apply conditional rules. You can query for minimum and maximum widths, as well as for orientation, aspect ratio and density, and you can chain several queries, as in:

@media screen and (min-width: 600px) and

(max-width: 900px) { ... }

Put this all together and you can create hand-tailored break points in your fluid design at which the layout and typography undergo a radical change, such as dropping from a two-column to a one-column grid, hiding certain pictures, swapping navigation bars, changing fonts and so on.

Media queries enable you to build truly intelligent adaptive designs, whose layout and content change radically to best fit the hosting screen.

Is responsive, self-optimising web design really this simple? Sadly not, and Marcotte doesn’t pretend that it is. Most of his book is involved in trying to sort out the numerous problems that crop up, with varying degrees of success.