Responsive Web Design – Making the Mobile Internet a joy to use

As a technologist I am often asked about making web sites work on mobiles, and typically the question has been do we have a layer in the server that redesigns for the mobile ? or do we design from the ground up with mobile in mind, taking the hit on usability.

Neither of these have been ideal.

the first, using a layer to take content and re-work it based on the device type making the request, is a good place to start, however this kind of translation almost always involved a huge amount of work and normally it becomes fragile. the goal of the automatic transform is typically lost to the god of pixel perfection.

the second, designing for mobile from the ground up means you ran the risk of having a substandard user experience on both PCs and mobiles. And why have i written that in the past tense well because “the times they are a changing”, and the increasing abilities of Javascript and CSS mean that we can, on the client make decisions on layout, and content, meaning that the web site contents and layout are decided at the time the site is being displayed.

Here is a very clear and useful article on 5 Responsive web design patterns. Here the browser is making the decision as to which layout to use, both for the initial display, and then responding to resizing events. This is important because so often web sites become built to a fixed ideal of perfect, and this allows for the ideal to re-flow according to the real estate available. In the Article there is no mention of using AJAX or similar to fetch different content (eg a re-written para that uses less words, or a picture that is cropped and coloured for a smaller size) however this will become the norm so that the affect of the restrictions is minimised.

In case your interested here are the 5 patterns in discussion

Starting Small (which is the standard used for comparison)

1. Mondrian (3 boxes, one large two small)
2. Basic Gallery (many small boxes
3. Featured Items (with headlines and columnar content)
4. Column Flip (rotates columns to rows as width decreases)
5. Feature Shuffle (as 4 but with alternating flows to break-up the page)