Responsive Web Design: Doing It Properly

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.

  • Can you make the logo smaller?

    Can you make the logo smaller?

    It’s the cliched scourge of graphic designers the world over: a perfect design is presented to a client, who immediately asks for their logo to be made bigger. Well, those days are gone my friends. Let me tell you why you should be saying to your clients – you need the logo to be smaller….

  • How to make more money from your website

    How to make more money from your website

    If you’re running a business and you have a website, then your website exists to help you make more money. You might think that this statement doesn’t apply to you unless you’re selling goods or services online, but you couldn’t be more wrong.

  • Is WordPress the right choice for your website?

    Is WordPress the right choice for your website?

    Everybody has heard of WordPress. What started out as a platform for blogging has grown into one of the most popular content management systems (CMS) in the world – powering over 30% of the internet. It may not be the most exciting choice of software, but its combination of user-friendliness, reliability and flexibility is unmatched…

  • Our Web Hosting Service Explained

    Our Web Hosting Service Explained

    As with many web design agencies, part of our service is the hosting of our clients’ websites. We seek out and partner with the best, most reliable hosting providers we can find and then use their services to host your website. We then manage all aspects of your hosting package so that you never need…