Responsive web design and the user experience

Responsive web design and the user experience

Chances are you’ve already heard about it but haven’t yet had it explained to you, so what is responsive web design? Well simply put, it’s a web design approach that allows your website to change its appearance depending on the screen size it’s being viewed on. Responsive web design (or RWD as it’s otherwise known) is probably the best approach to the problem that is differing screen sizes. With the multitude of media devices available now ranging from smartphones to desktops, a responsively designed website can save a lot of time. RWD uses so-called breakout points, these determine the layout of the website. Breakpoints are commonly based around the size of the browser. The same HTML is used with all devices; it’s the CSS (which determines the layout of the webpage itself) that’s used to change the appearance of the page. This means instead of creating a separate website and codebase for each individual screen, a single codebase can support all.

How does RWD work?

When it comes to responsive web design, the page elements will reshuffle as the viewpoint grows or shrinks so a three-column design on a desktop may change to a two-column design on a tablet or even a single column on a smartphone. Responsive design relies on something called proportion based grids, these help it to rearrange its contents and design elements. The beauty about RWD is that not only does it provide equal access to information regardless of the device being used but it can also be used to hide certain items on smaller screens such as background images. It’s worth remembering however that the decision to hide certain content for different devices should be based solely on your users and their wants.

What are the advantages?

Responsive web design has a number of advantages over developing separate websites such as the need for only one codebase. This can make development of your website much faster compared to having to develop three or four different websites. It also makes maintenance a lot easier too as only one codebase and one set of contents needs to be updated rather than a number of them. RWD is also considered relatively future proof in that it supports new breakpoints whenever they may be needed. This means if a brand new five of twenty inch device suddenly becomes hot property and takes off, the codebase will still support it.

It's important to get it right!

Due to its very nature whereby elements are shuffled around on a page for different screen sizes, design and development must work hand in hand. Responsive design can sometimes turn into somewhat of a puzzle i.e. finding the right elements that will work on both larger pages and fit skinnier longer ones too. Simply ensuring elements fit on the page however just isn’t enough, as they must also work for all screen resolutions and sizes too. It must also be remembered that this shuffling of elements will alter the view of the website from one device to the next therefore the user experience must be considered. To get this right many teams use responsive-design frameworks that help create the designs. These can be great in moving development along but careful consideration into how it will work with your content and your website should be considered rather than simply how it works in general. It’s hugely difficult designing a website that’s usable on a desktop, let alone a multitude of different arrangements across a variety of screen sizes. The same design element that works amazingly on a desktop might not be so great on a smartphone or vice versa.

Decide what content is important and should have priority on a smart phone

A key aspect of responsive design is prioritising content. On a desktop a lot more content and information is instantly visible without the need to scroll or search, the same cannot be said for a smartphone. If users don’t instantly see what they want on a desktop it doesn’t take much to glance around the page. On a smartphone however, users may find themselves scrolling for what feels like forever. This is where smart content prioritising comes into play, allowing users to find what they need easily.

Don't forget about performance, test it!

As with every single different web design tactic, there are always going to be downsides or areas that may need to be checked every now and then. With RWD, performance can be one of those areas. As we stated before, the same code is sent to every single device regardless of the code that applies. Each device will receive the entire code and simply take from it what it needs. This means a four-inch smartphone will receive the same code as a twenty seven inch desktop and because of this, it can sometimes bog down the performance especially when it’s relying on a spottier, slower data connection. This is why it’s so important to test the user experience of your website outside on your smartphone, away from your desktop and superfast broadband connection. Venture out between tall buildings, in conference rooms and basements. Go to remote areas or known trouble spots and see how your website performs.

Get in touch with an expert and let us future proof your new or existing website

The main aim of responsive design is to give everyone the same access to information whether they’re on a smartphone or desktop but it must be remembered that responsive design is merely a tool, not a cure-all. Whilst it has many perks when designing a website across devices, it may not necessarily work for you. It’s important to focus on content, design and performance to truly support users across all devices. Responsive design is most certainly not an easy option, which is why it’s best left in the hands of professionals such as us. If you’d like more information on responsive wed design and how it might work for you then just click here.