Responsive web design is not just for mobiles

Written by Tom Greenwood - May 24, 2012

Responsive web design (see introduction here) is becoming increasingly popular as a way of ensuring that websites are easy to view on mobile devices, and not just on desktop computers.

It’s fantastic because it allows the website to fit itself onto small screens used by netbooks, tablets and smart phones, but responsive web design is not all about being small.

Fill my screen!

Although smartphones are an increasingly popular way of accessing websites, it is equally if not more likely that your website visitors will be using a desktop or a laptop with a large, high resolution screen.

The majority of websites (including this one) are designed to fit nicely onto a “typical” monitor with a width of 1024 pixels, but if your screen is bigger then you’re going to see lots of space on the left and right of the website.  Sometimes a nice background design is all you need to combat this but sometimes it feels like you’ve paid a stack of money for this big screen, but you don’t see the benefits.

This is where responsive design can be applied, not to shrink the website, but to scale it up and fill large monitors.

Case Study: Futerra Communications

Last year we developed a new website for Futerra Communcations with exactly this in mind.  Everyone who works at Futerra and a large proportion of the people in their industry work on big, shiny iMac computers with 21 or 27inch high resolution screens.  They wanted to make an impact by filling the screen with highly visual content using a cargo box design.

The responsive site developed allows the boxes to stack up in a grid that fits to the width of the users screen, whether it be 3, 4, 5, 6 or more columns.

Not only was this website unusual by using responsive techniques for large screens instead of small screens, but it is actually intended to NOT be viewed on small screens, since the browsing experience using a desktop with a mouse is so different from a smart phone with a touch screen.  For this reason, the website also has a dedicated mobile interface that is displayed to visitors using mobile phones.