Responsive Web Design

It used to be that website design was mainly a static affair, which involved designing for the screen-size or monitor size that was most appropriate. Over time monitors became bigger and resolutions increased so designers were able to tailor their concepts to the growing screens available. However with the advent of internet-enabled TVs and the rise of the Smart Phone and the Tablet computer, the playing field has become a little more confused.

Keep it simple, keep it separate…
For a while the solution was one of creating a separate ‘mobile-site’ – which makes sense right? People on the move had more limited bandwidth than when using their high-speed home broadband so the mobile site made sure images were optimised for the smaller screen, therefore speeding up load times. The problem with this approach is there is no single ‘Mobile-size’ (consider the number of manufacturers and differing specifications for Tablets and Mobiles). It also worth noting that actually mobile users aren’t necessarily on the move, they could be browsing the web at home while watching the TV. Throw in the fact that newer smart phones have much higher resolutions and things have become very messy – do we now need 30, 40 or 50 different versions of a website?

No, just become ‘Device-agnostic’
The key is to not think of devices, but think of screen-widths, to become ‘Device Agnostic’. In this way, you future-proof the design because you aren’t specifying anything based purely on what’s currently available. Thinking in this way requires more forethought, longer planning, a different way of thinking (for both designer and client) and a more flexible way of proofing visuals. Inevitably this could lead to greater up-front costs, but long term it could actually SAVE money as it is adaptive. New device on the market? No problem the RWD website will adapt as required!

So should everything be responsive?
In a word, yes. Responsive Web Design (RWD) is the new standard and makes complete sense as it ensures that the user gets the best version of your website for their device (and screen size). The same content is delivered to everyone but at each of several predetermined ‘breakpoints’ the layout changes to better suit the screen width providing a better user experience – which is what we all want when we surf the web, right?

For more information on this have a look at the article by Ethan Marcotte that started it all. And to see how it works simply reduce the size of your browser window and you will see the site’s design adapt.

Share this article: Share on LinkedInTweet about this on TwitterShare on FacebookShare on Google+


Pixooma