Responsive Web Design: Doing It Properly

Responsive web design refers to a website that adapts it’s content to fit the device that it is used on. The concept is nothing new at this point – you’d be hard pressed to find a new website these days that hasn’t been designed in a responsive manner.

Despite being a mainstream practice, we still come across responsive websites on a daily basis that offer a poor quality or downright frustrating experience on mobile. As responsive website developers we feel more disappointed than most when this happens, as it’s often minor niggles that wouldn’t take a long time to fix if you just spent some time reviewing and testing on mobile devices.

In this post we’ll point out several areas that are commonly missed and can be addressed in order to massively improve the effectiveness of most responsive websites.

Unwanted Text Wrapping

When you’re designing a responsive web design layout, text often has to flow freely and wrap itself onto new lines to fit the available space. If you’re not careful with this, long words can overflow off screen or break across multiple lines when you don’t want them to.

This problem usually occurs with email addresses (as they are typically longer than your average word), or headings/titles (as they are usually set in a larger font).

Responsive Web Design - Text Wrapping
Of course this wouldn’t have been a problem if we’d based ourselves in Luton. Or Stoke.

Choosing Breakpoints

One popular way to design a responsive website is to set breakpoints based around common device screen sizes, and adapt your design to change to fit these definitions. For example, you set up a layout for iPhone, iPad, and 13″ Macbook. Job done.

The problem with this approach is that there are no standard screen sizes, and new devices are being released all of the time. As soon as Apple release the iPad Mini, or someone views your website on a Samsung smartphone, there’s a chance they are seeing bugs “in between” the sizes you have defined.

A more robust solution may be to create your breakpoints around your content. For example, you may wish to keep your full header navigation on screen until the menu items no longer fit on one line, at which point it collapses into a button which opens the full menu.

Hover States

Almost all websites use hover states on desktop to reveal additional context (eg, that some text is clickable), or to show further information (eg, reveal an article preview when you hover over a grid of blog posts).

When designing a responsive website, you should be mindful that visitors may be using a touchscreen device, which removes their ability to hover over elements of your website.

Removing the ability to hover over a link that changes colour doesn’t impact the usability of a website to a great extent – but content that only becomes visible when an item is hovered will be inaccessible to many users and should be avoided where possible.

Responsive Web Design - Hover States
I mean there are ways to make this work. But they’re all a bit annoying and unnecessary.

Capturing Scroll

We’ve all been there – you’re swiping down through a page on your touch screen device when all of a sudden the scrolling stops and you’re stuck looking at a map. You try to scroll past but the map location moves instead and you’re now stuck!

This happens because the map, or some other content, has been placed inside a scrollable container which is taking priority away from the page and capturing your actions as you attempt to scroll past it.

Fixed Content and Popups

There are many valid reasons to fix content within the viewport of a website, such as keeping your main navigation and/or calls to action on screen for easy access. However on smaller devices such as mobile phones, screen real estate is a premium and you should be mindful of this whenever you fix anything permanently on screen.

Responsive Web Design - Fixed Content
“Make the logo bigger” they said (not really).

For example, when fixing a header navigation to the top of the screen you reduce the visitors available screen space, meaning that they can see less content at once as they browse through your website. This is rarely a problem on desktop, but on mobile a fixed header may take up between 10-20% of the available screen space. If you plan to do this, you should ensure that the size of the header is as small as possible so that it doesn’t eat up too much screen space unnecessarily.

Stacking Everything

An easy way to fit a desktop website into a mobile or tablet screen is to stack horizontal content vertically. This is often a valid approach when creating a responsive website design, but can be overused, resulting in extremely long scrolling pages. Instead, it may be better to collapse multiple elements into a swipeable/slidable format – which is well suited to these touch orientated devices.

You should also aim to prioritise your content wherever possible – it is often effective to show less content when you have less available screen space, so that your primary message shines through.

Image formats and sizing

This last bonus point is more related to performance than usability or design, but this is a very important point when you’re designing a website that may be being viewed by users who are relying on a mobile network signal for their internet access, or are being charged by the megabyte for the data that they download.

A commonly used method of displaying images on responsive websites is to shrink them down in size to fit the space they are taking up on screen. If you’re simply shrinking a large image down to fit into a smaller space, you may be serving images to visitors that are far larger in file size than they require – which will have an impact on site speed, performance and mobile data usage.

If you are going to display a list of thumbnails in an image gallery, don’t just shrink down the full size image – actually create some thumbnails that are much smaller in file size, and only load the full size image when someone clicks to view it!

Also, all modern browsers support specifying multiple versions of the same image to be loaded depending on the screen size/device being used. This means that you can decide to only ever serve images to users that are correctly sized for the screen they are viewing them on.

Conversely, more and more devices nowadays feature hi-dpi (retina) displays. Regularly sized images may appear pixelated or low quality when being viewed on these high resolution screens, so where possible you should use svg (vector) or oversized images on these devices to prevent this from occurring.

The issues described above are just a few of the things we keep in mind whenever we’re building a responsive web site. Of course, we test our websites on a variety of devices throughout their development, but more importantly our experience means we avoid a lot of the main issues which negatively affect responsive websites.

If you’re interested in a free, no-obligation web design audit including actionable steps you can take to improve the performance of your website on mobile devices, please get in touch.

Join our mailing list

Sign up to receive free web design and branding tips direct to your mailbox. No spam, ever.

Let's Work Together

We are passionate about helping businesses like yours get more from their web presence.

If you need a new website, help with improving traffic and conversions or fresh ideas on how to improve your brand and it’s market position, send us a quick enquiry with this form and we’ll get back to you as soon as possible.

If you’d prefer a chat, please call us on 0191 228 6967.