web | mobile apps | software | consulting

What is responsive web design and why do you need it?

"Responsive design" seems to be one of the new buzz phrases in the world of web development. What is it? Why should you care?

In 2014, the number of global mobile devices exceeded the number of desktop computers. People regularly use their mobiles and tablet devices to go online and use websites. Last year, more time was spent on the internet using mobile devices.

Image source: http://www.smartinsights.com/?attachment_id=53811

The problem

The problem with mobile devices is that they have small screens. This means you can't fit as much information on them as you can on a desktop or laptop computer screen. Your site needs a new layout - one that will look good and work well on a mobile device.

That's fine, but mobile devices aren't all the same size. When you've squeezed your site's content down and made it fit on your phone, you take a look at your friend's phone and it looks awful. Why? Because your friend has a phone with a screen that's 2 inches bigger than yours! Have you looked at your site on an iPad, or a 7 inch Android tablet?

It's just not possible to design and test your site for every single device separately - there are around 10,000 different Android devices by hundreds of manufacturers. You can't just create a small layout either, because then it won't work on desktop computers. You even need to think about the problems with larger screens too - newer PCs and iMacs have screens up to 27 inches. Maybe you'd like your site to take advantage of Apple's "retina" screens on the iPhone, iPad, Macbook and iMac devices?

We haven't even mentioned orientation yet - user's might visit your site on a tablet while holding it in portrait, then change the orientation to landscape, expecting the layout to change immediately!

The solution

The only way to create a website that will work with all these devices, regardless of the screen size and orientation, is to make the layout change depending on the size of the device's screen. This can be achieved through clever use of CSS and in some cases, Javascript, to conditionally load, display or move around elements of the site depending on how wide the screen is, and how high the resolution is.

Responsive design is just a term applied to the process of changing the layout of the site so it will work no matter what device you're using, and no matter which way you're holding it!

Responsive vs Adaptive

A common characteristic of a responsive template is that it will expand and contract with the browser's viewport, so if you resize the browser, as you drag, you'll see the elements of the layout move with the browser, responding to the resize event immediately. An alternative approach is to use "adaptive design", where the site will adapt to the screen size based on a number of common "bands" of dimensions. For example, when the size of the browser's viewport drops below a certain number of pixels, parts of the site will move around to make it appear correctly for the size of screen.

Image source: http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly/1

If you're using a desktop or laptop computer, you can resize your browser right now to see this site's adaptive elements get resized or moved.

Most of the techniques required to make an existing site responsive or adaptive to the size of the viewport will require CSS and Javascript work. Usually, very few changes need to be made to the actual markup. Because of this, converting existing sites to be responsive to device sizes is normally a quick and affordable process. Contact us to find out more, and to get a quote.

Monitor your motoring with the GloveBox app.

Now available to download for iPhone, iPad and Android.

Visit the GloveBox website to find out more.

We're proud to be a Microsoft Partner.

That means we take pride in offering reliable solutions built on years of experience from the world's biggest software specialist.

Microsoft Partner

Stay connected to your local council.

We've made an app for local authorities in the UK. See latest news and events, send reports and more.

Visit the MyLocalGov website to download the app and find out more.