UX design for responsive websites

Firstly, let’s define what is meant by a ‘responsive’ website. With so many definitions out there, none of which are necessarily right, or wrong, it does get confusing. To keep it simple let’s define ‘responsive’ as being a single website that displays content differently, dependant on the device that is being used to view it.

As UX designers we don’t really care too much how this is done technically, as long the experience to the user is the best possible. So what is the best way to provide a great user experience for a responsive website?

Don’t remove functionality

One of the biggest annoyances for a user is when functionality disappears from a site when viewed on a mobile. Don’t remove functionality but just design it smarter. Tips for this might be converting multiple columns to a selectable dropdown that changes the data displayed, moving the primary navigation so it accessed via a MENU button, provide options to minimise/maximise functional areas etc. 

Start from the bottom up

The first layout designed should be the one that will be used by the device with the smallest resolution. Once you have designed content and functionality to this resolution it should be a simple process to convert to the wider layouts required for tablet, desktop and widescreen. Not sure what resolution to design for? Most common ones are below but if you have a site already review your analytics to make sure you are catering for your users:

• Mobile - 320 x 480 (minimum width)
• Tablet - 760 x 1000
• Desktop - 1000 x 600
• Widescreen - 1660 x 750 (maximum width)

 

Design for touch

All layouts need to be designed for touch. When designing for touch need to remember what is selectable with a finger or thumb is considerably different to what is clickable with a mouse. This means that anything that needs to be selected has to have a larger area than if you were just designing for a desktop. As a general rule the minimum height and width should be 40x40 pixels or 30x30 if there is at least 10 pixel padding around the area. Any text links should be at least 13 pixels high preferably with padding of either white space or text.

Other key things to remember in the UX design are:

• There is no such thing as hover, all functionality needs to be ‘tap’ activated
• Drag and drop is difficult on a touch device so should be avoided
• Modal windows are hard to implement to show in the centre of a touch screen so all ‘popups’ should be designed as ‘popouts’ or ‘popdowns’ which are locked to a fixed area of the page.