Responsive Web Design

Responsive Web Design

Iain

A new buzzword in Design & Development is born

So what is responsive web design?

Responsive web design is, put simply, a website which can be viewed at any resolution. The CSS is developed in such a way that the page elements can adapt to different devices. CSS3 introduced Media Queries, which allow you to serve different CSS Style Sheets depending on device resolution, without the use of of Javascript. Using this method this makes your developed site far more flexible when designing for multiple devices. CSS Media Queries, Fluid grids, & image sizing adapt the content of the website to any device.

Throwing your budget a lifeline

With the ever growing number of devices on the market today, having a ‘one size fits all’ website makes perfect sense. Desktop computers, laptops, tablets and smart phones, all have wide varieties of resolutions. This presents a huge challenge when designing & developing websites to cater for everyone.

Most projects simply do not have a sufficient budget to develop multiple versions of a website. This is where planning and building a responsive solution is really beneficial. You do not have to create a mobile version of your website for different devices, just develop one site than can adapt itself to different resolutions.

Responsive, or Mobile?

Some projects may not require a responsive approach, and clearly need a separate mobile website to be developed. Facebook, for example, has a mobile web application, which is vastly different to its bigger brother. The content is the same, but the design, layout & user experience have been designed specifically for mobile devices.

It is in the hands of the designer to decide the correct solution, responsive web design is never going to be suitable for all projects. Having said that, best practice in design would have had most designers considering these potential problems already. Liquid layouts (thankfully we don’t see too many these days) had been using percentages to calculate the width of columns to cater for different browser resolutions since the birth of CSS. Responsive web design is the next step for universal accessibility.

Tell me more…

I have only lightly brushed on the principles of responsive web design, if you would like to know more about it, take a look at this article by Ethan Marcotte, over at A List Apart.

Ethan has published a book on the subject, for which he also coined the phrase, appropriately titled ‘Responsive Web Design’, which you can order from A Book Apart.

Leave a Reply

Your email address will not be published. Required fields are marked *