Quick Contact Icon
Back To Top Icon
Show Filters
Sign up for regular updates:
RSS Feed

Add our RSS feed to stay up to date with the latest Splitpixel news and content.

Add Our RSS Feed
Blog Search
Click To Search

What is responsive web design, and why does it matter?

Called RWD for short, web design that can adapt to where it's being viewed has become essential for UX and search.

Responsive web design in action
Blue Pixel Top Left
Rob E
Posted by Rob E
20 February 2018
    

Yet another digital buzzword? Yeah, kind of. But it's one that's endured, and very quickly become an industry standard – so responsive web design (RWD) is well worth understanding. Why? Well, if your website isn't responsive, you're going to run into problems with usability and search visibility.

 

Responsive web design explained

So, what does it mean? A responsive web design is one that changes shape to fit the way it's being viewed. The size of your monitor, the type of browser, and the device you're using (desktop or mobile, Mac or PC, iPhone or Android) will all mean that a website can fit more or less information on one screen, and a responsive website adapts (responds, if you will) to make the best of the available space.

It's easier just to see it. Our analytics data tells us that there's a very good chance that you're looking at this on a desktop, so make sure your browser window isn't maximised, click in the bottom right corner, and drag it around a bit.

20180213_155041
Spoiler alert: if you're on mobile, or aren't all that fussed about dragging things around, this is what it looks like.

You'll notice that, once you scale it down to a certain point, the layout will change. The sidebar will disappear to let the content fill the window, rather than just squashing everything up. If you want to see the category filter, you can click on the button that now appears on the top.

In the footer, the elements will stack on top of each other, rather than just scaling down to the point where the text is just unreadable. At the top, the menu turns into a hamburger icon that you can click to expand.

If you open the site on mobile, you'll see that it loads this scaled-down version automatically. Scroll back up to the header image of this blog to see the two sort-of side-by-side if you can't be bothered with that.

 

Hasn't this always just happened?

Nope! RWD has been in use in a rudimentary form since about 2002 – but it didn't really start to pick up speed until around 2012. It was Mashable, usually pretty on the ball with online trends, that declared 2013 "the Year of Responsive Web Design".

By 2015, Google had brought in an update to its algorithm (known in the industry as Mobilegeddon, because we're a creative and funny bunch) that prioritises websites that display well on smartphones in searches made on smartphones, making responsive web design essential if you want to be seen by mobile users.

Before that, websites would do two things when you changed the size of your window. They'd either shrink, getting smaller and smaller to the point of being illegible, or they'd just refuse to budge, meaning you'd have to scroll back and forth horizontally to see everything.

When it came to mobile, websites would just have two versions – the desktop version, and a mobile version (denoted by an m at the start of the url, i.e. m.splitpixel.co.uk).

Responsive web designs use the same version and the same development build regardless of device or browser size. They always look just right for the way you want to view them.

 

The elements of responsive web design

A responsive web design needs to consider more than a standard, static web design, because the designer needs to think about how things will look in a variety of different formats.

Fonts need to be readable in smaller sizes, and copy needs to be broken up in a way that doesn't cause a wall of text when the number of words per line is reduced. Text on any graphics needs to be readable when scaled down.

Columns that are seen side-by-side at full size, but can be stacked one above the other on a smaller display, are a common responsive design feature. Multiple menu formats usually need to be designed, with a consideration made for people tapping, rather than clicking.

CR Interiors Responsive Web Design
A responsive mock-up of the website we made for our clients, CR Interiors - but it works too! Go have a look for yourself...

Break points

Every page layout will likely have a few different ones – the pixel width at which text starts to shrink may be different to when columns start to stack, or when the sidebar disappears, or when the horizontal menu changes for a hamburger icon.

Try it on a few different pages across our site and you'll notice different ones break down at different points, and in different ways – but it's not random. It's all been considered to make sure information is displayed as effectively as possible.

 

How responsive design helps users

Stick with that point about displaying information effectively, because that's pretty much all you need to know about why RWD is important for your users.

It makes sure they can view your website clearly wherever or however they're looking at it. It makes sure they can always read everything, and it makes sure that your pages always look nice. In short, it means they're having the best-possible experience on your website.

And users who have a better experience will stick around for longer, will click on more things, and will be far more likely to get in touch with you.

UX and UI Text CTA

 

How responsive design improves search performance

We already mentioned Google's algorithm change – the one that started using RWD as a factor in the way it ranks search results on mobile devices. This is the most direct way that RWD impacts your search performance – if you don't have a design that works on mobile, then Google will be less likely to show your website to mobile users.

It could soon have a knock-on effect on your rankings in desktop searches, too. Google is slowly rolling out mobile-first indexing, meaning it considers your mobile version the main version of your site, with the desktop as an alternate – basically the opposite of how it worked previously.

If Google doesn't find a mobile-optimised version of your site, it will move on to the desktop version, so it's not the end of the world – but it's not clear how a lack of a mobile option will impact rankings yet. The best approach – the one that is least likely to damage search performance – is to have a design that works for both, as separate versions present their own issues…

Avoiding separate mobile versions

If you're still using a separate mobile version (the m-dot URL mentioned above), then Google views the two versions of the same page as two different URLs, which are likely to be full of duplicate content.

Duplicated content is a big no-no for Google, and it'll penalise sites that have too much copy that can be found elsewhere. So, removing that mobile version is an SEO quick win.

"So what?", you might be thinking. "No one views my website on a mobile anyway." Well, the chances of that are pretty slim, given that mobile made up more than 50% of all web traffic worldwide in 2017. But even if your mobile visitors are in the minority, there are other ways that RWD can improve your search performance.

Indirect SEO factors

It all goes back to the user experience factors we were talking about earlier. If a website works fine and looks right from the second you land on it, even in a smaller browser window, then you're less likely to just hit the back button straight away, and actually head off to some other internal pages.

Straight away, you're increasing the time spent on your site, and the number of pages viewed per session, which Google definitely considers. You're also reducing your bounce rate, which Google has never officially said they consider – but it does seem to correlate with page rankings.

It's all quite holistic, really. A responsive design will have a knock-on effect on a whole lot of different factors that all come back to search in one way or another.

 

Find out more

If you want to find out a bit more about responsive web design and mobile then you might want to take a look at the work we've done for Edge Student Living, a student accommodation provider that needed a website that suited their customer base – that is, young people, likely to be using smaller laptops, tablets and mobiles than desktops. It's one of our favourite examples of mobile-first design that we've done!

You can also find out more about the importance of user experience and interface design more generally in our ebook, How to create a user experience that generates leads. Click the banner below to download it for free, and don't hesitate to get in touch with us if you have any questions!

UX and UI Image CTA

    

Say Hello

If you want to know more about what we do, or would like to discuss a project, please email us or fill in the form below to drop us a message.