Responsive Web Design: Behind the Buzzwords

02 Nov 2016

What is responsive web design? Why do search engines favour responsive websites? What does mobile optimisation do? What’s the difference between a responsive website and a mobile website? These are just some of the questions we are asked when we propose website owners get a responsive website. Here’s our explanation…

History of the mobile device

Remember when mobile phones were for phoning people? Stop reminiscing and pay attention! These days mobile phones are used for pretty much anything, from tracking your fitness levels to paying for beer or coffee. One of the main things mobile phones began to do was browse the web like a PC. This ability is one of the core reasons for the adoption and success of what we call the smartphone.

Smartphones allowed us to browse the web on our phone. One of the immediate problems with this was the screen size, the screen on a PC is nice and large, and websites, until then, had been built with this in mind.

To remedy this, companies started making mobile versions of their websites. Even today if you open a web browser on your mobile phone and visit facebook.com you will be redirected to m.facebook.com which is technically a completely different site. This was the beginning: one version for a big screen, one version for a small screen. But it wasn’t enough…

Let’s take a look at what the top of this page would look like with no mobile optimisation…

optimised vs non-optimised website

As you can see, the non-optimised version is… well, terrible. To read it you would have to scroll horizontally to read each line of text, buttons would be too big or too small, hover functions wouldn’t work (try hovering on a touch-screen!) plus, you would have to track down the menu when you wanted to visit a different page.

Compare this to our lovely, optimised version. In this version the website looks as though it was made for a phone. The text is smaller and doesn’t use too much space. The logo and menu remain at the top of the screen so you can easily navigate from anywhere. This is what we call mobile optimisation. So how does it know?

The Conversation

The responsive website differs from a static website in that it has a kind of conversation with the device before deciding how to display the content.

That conversation goes a bit like this:

Device: Can you show me this web page please?

Website: Sure thing, how big are you?

Device: Not very big, I’m an iPhone5.

Website: Okay, no problem, let me just adjust my styling so you can see it correctly… here you go.

Non-responsive websites don’t do this, and so display the same way irrespective of screen size, a responsive website will respond to things that the device tells it, and that is what we designers mean when we talk about ‘responsive web design’.

Try it yourself

So, now let’s see it in action. Here’s a way you can test it on this web page:

On a mobile device

Simply rotate your device between portrait and landscape (with screen rotation on). You should see the site content adjust to fit the new width as the screen rotates.

On a PC

This one is even cooler. Simply resize your browser window by dragging it out of fullscreen mode, then drag either the left or right side of the window to grow/shrink it. This is especially fun because you can slowly watch each part move and shift to make the best use of the space available. I like to call this ‘elastic design’ because it stretches.

Search engines

Ever hear that Search engines like Google will give your website a better score if it is responsive? It’s true¹.

It may seem harsh for Google to suddenly penalise websites which don’t pay to get mobile optimisation. But if you think about it from Google’s point of view, it makes perfect sense. Most people browsing the web today are using a mobile device and not a PC (this has been the case since about 2014²).  Google is really just favouring the websites that are more likely to display correctly for more users.

In 2008, having a fully responsive website meant you were ahead of the curve. By 2014 it was really considered a benchmark for a quality website. Now in 2016 it’s considered pretty poor practice if a site hasn’t been mobile optimised.

Conclusion

Here we have learnt the meaning behind these two frequently used phrases in design, so to recap:

Responsive design – is when the website responds to information from the device it is being viewed on, and adjusts its behaviour accordingly.

Mobile optimised – when the content of a website is shown differently so that it looks optimal on mobile devices of various sizes.

In today’s online world of mobile devices, with large phones, small tablets, phablets, notebooks and 4k screens there really is no way around it. If you want a website that you can be confident will look good, it has to look good on every screen size.

 

See if your website is mobile friendly by using Google’s tool here.

¹ An article by Forbes magazine on responsive web design: http://www.forbes.com/sites/thesba/2015/03/26/now-is-the-time-for-responsive-design (from March 2015)

² Image from Morgan Stanley Research:

pc vs mobile web browsing stats

If you’d like to share something about your experience with responsive design, or maybe you’ve heard some other buzzwords you’d like us to try to explain, leave a comment below or get in touch directly.

About Dan

I'm head of design & development at SCL. I oversee project development from start to finish for websites and other design/development projects.

Leave a Reply

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