"Rules" for Designing a Responsive Website

TAGS RESPONSIVE, MOBILE, TECHNICAL

Having a responsive website is becoming more important than ever before, and we’d like to recommend a few things to consider when planning, creating or updating your website.

We wrote an article about responsive websites a short while ago: What is Responsive Web Design, and do you need it? Here we’d like to share a few rules we regularly consider.

The number of visitors accessing the web from mobile devices has reached tipping point for a few online providers such as the BBC and The Guardian meaning a greater share of traffic is coming from mobile devices. The same article reports that more people visit online retail sites via mobile/tablet (52%) than desktop (48%) on the weekend.

Having a responsive website is becoming more important than ever before, and we’d like to recommend a few things to consider when planning, creating or updating your website.

First up, what is Responsive?

A responsive website is flexible and almost fluid in design. It allows the displayed information to flow in a set order to better suit different screen sizes. But, there’s so much more to it than just adapting to screen size.

Content First

I think I touched on my last responsive piece about why responsive web design isn’t the be all and end all of mobile optimisation. So your website works seamlessly on a mobile screen, but is it still as instinctive and easy to navigate as your desktop view? Your content should come first on desktop, but even more so on a small screen, where you have less of your viewers attention and less time to move them through your pages before they try elsewhere.

Big images or sliders can be avoided rather than hidden which will speed up loading time.

~40% users will opt for another site if not mobile friendly

Avoid typing where possible

People can be lazy, make a shortcut and they’ll take it! If you can, limit the amount of work they need to do to make a purchase, or create an account.

The following points will make things quicker and easier.

• Use social media sign-ins to register and log-in if possible.
• Copy billing and shipping addresses from one form to the other, it’s better to give the user the option to override it than frustrate them having to put it all in twice.
• Allow addresses to be saved to site ‘address books’.
• PayPal or account based payments make a one or two click process much easier than having to dig out a card and enter payment details into each field correctly.
• Use Geo-location where possible, perhaps looking for local news, a local branch, or directions.

Predictability

We should all be working towards mobile icon consistency, continuing to follow the trends will help our users and make their journey through your site. A triangle is often used for play buttons, an X for close for example. Icons for settings and favourites are less obvious, and love it or hate it; the Hamburger menu icon.

Intrusive sounds/videos

We suggest that videos and similar media should not autoplay, consider wireless or cellular connections. Users on a mobile also have greater potential to be overheard in inappropriate locations.

We really hate pop-ups at the best of times. When screen space is limited, the issue of interrupted browsing is confounded. Don’t put a pop-up in the way of the content you’d like to show, especially if it’s awkward to close.

Nearly all of our websites are responsive these days, our content management systems deal with displaying your content across all devices, and our new generation of content management systems are responsive themselves to allow you full control of your website wherever you are. Any questions? Get in touch, we’d love to hear from you.