Technique Review: Responsive Design

You might have come across the phrase 'responsive web design' recently, as with a lot of things, it's a buzzword (or phrase) which gets a lot of people excited, but what does it mean and why is it important? Well, it has a great deal to do with these things below:

Mobile Devices: iPad, iPhone, HTC

That's right - mobile devices strike again! It's getting harder and harder to avoid catering to mobile devices, to put things in perspective - mobile browsing is increasing so rapidly analysts are predicting that during 2013 mobile internet users will surpass desktop users! It's highly unlikely that anyone can ignore this statistic.

So how are you going to cater to mobile users? Well there are two solutions, either build a whole site tailored specifically to their needs, which can be very costly both in setup and maintenance (as you're going to be doubling up all the updates) or follow a responsive design pattern; i.e. have web pages alter themselves based upon the resolution of the browser.

Mobile phones typically have smaller screens than desktop computers, and even the retina display in the iPhone 4 with it's massive 640x960px resolution causes problems with standard website viewing because the pixel density is so high. Using a particular CSS technique called 'media queries' we can target browsers based on these factors:

/* Target mobile devices with a high pixel density (just the iPhone 4) */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  body { background: red }

/* Target mobile devices with screens between 768 and 1024px wide (iPads basically) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body { background: green }

The above might look rather technical, but I'm sure you can grasp that for iPhone's it'll change the background colour of the website to red and for iPads it'll turn green. But the background isn't all we can change - pretty much any element on the page can be resized or coloured differently, fonts can be changed and much more - this allows the user interface to work much more fluidly - users will be able to read text more easily, press buttons without worrying about accidently clicking the wrong one etc.

Also, by making these changes in the CSS files, it means you don't need to have two copies of your website - so there is no need to worry about keeping two sites in sync or whether there will be duplicate content issues with search engines etc.

If you'd like to optimise your website for mobile devices, feel free to drop us a line. For more technical information on responsive web design, visit A List Apart.