It’s a new year, and as ending dates with a ‘12’ rather than an ‘11’ begins to feel less foreign, let’s take a look at one buzzword from 2011 that I see taking off in the year ahead.
And no, it is not the overly hyped (and largely misused) buzzword “HTML5”. I’m talking about “responsive design”.
In 2012 and beyond I think we will see responsive design becoming the norm rather than a novelty. Last year saw a huge jump in site hits from non-desktop devices, surprisingly so for some clients. We are starting to see Apple lose its stranglehold on the tablet and smartphone industry, as cheaper (and oft times better) alternatives abound and become more popular. E.g. It’s estimated Windows Mango will jump to 20% market share by 2015!
This means an increasing amount of devices are now driving web traffic, resulting in your site being viewed in a variety of different screen sizes. Numbered are the days of developing a static sized site to 1024px and perhaps including a mobile redirect to a site tailored for iOS mobiles. The solution resides in responsive design and adaptive layouts.
For those not in the know, responsive design refers to the principle that design and development should respond to a user’s behaviour and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.
Essentially this allows for one site to be served across multiple screen sizes without tainting the user experience. This requires a little more planning in the initial design and speccing stage, not merely from thinking about flexible grids and image scaling, but also from a content point of view. As screen resolution gets smaller, the screen real-estate and content served become more important. Although this is generally considered ‘adaptive layout’, it goes hand-in-hand with responsive design.
Let’s take a real life example. A multi-columned layout with a large feature image and fluid menu with hover states on the desktop, would actually display as single column layout with no feature image and a touch based / select menu in a mobile browser. Seeing a site with good responsive design is almost magical as the content shifts and scales to the window dimensions before your very eyes.
With sales of smartphones and tablets set to surpass that of PC’s in the next 18 months, it is becoming increasingly important to think about the user experience from a range of devices. Responsive design done properly provides an elegant solution for this and somewhat future-proofs your web/app content for the ever evolving digital environment.



































