Responsive web design

Before embarking on a responsive web design it should be established that responsive web design is the correct solution to implement. responsive web design allows the same content to be optimally displayed on any device size, however there could be scenarios where a particular device size may be better suited to different content. Mobile devices also have features that are not available on fixed devices so the content for each may differ.

Although most users will be viewing only one device type in any particular session there still needs to be consistency across all device types. Users may use one device for research, and another for purchase, or use the office PC and then transfer to the home tablet. Users may also switch between different views (portrait/landscape) within the same device so it‘s important that the experience across all devices is smooth and joined up, rather than a series of disparate interfaces.

The approach to responsive web design differs slightly depending whether the responsive web design website is to be built from scratch, or whether a website already exists and it is to be rebuilt responsively. In the case of Aviva initially at least, the latter is likely to be more common. Whichever method is opted for, the following general usability principles should be adhered to:


Usability principles

Consistency

Provide a consistent interface. This will improve the memorability of the site and reduce the time it takes users to complete their tasks.

Efficiency and effectiveness

Design your site so that users can achieve their goals as efficiently as possible. Users will only continue when they feel as though they are making progress with the task in hand.

Be informative but in the users own language

Use language that users will understand and avoid jargon and unnecessary marketing waffle.

Simplicity and visibility

Keep the interface simple and straightforward. The most commonly used functions and content should be the most prominent. Ensure controls are visible and intuitive in their design.

Visual design

Ensure the design visually supports information hierarchies. Remove visual elements that distract from key messages.


Our approach

Step 1

Identify self–contained elements for each page. For example, the primary navigation would be an element, as would the breadcrumb, site search, and call–to–actions.

Fig. 1 – example of identifying self–contained elements.

Step 2

Working with the business, prioritise each element. This aids the developer when a breakpoint that hasn‘t been designed for, and they need to reorder some elements.

Step 3

Ask the business if all elements are required for each device size/orientation. Are all elements necessary for the user to progress along their journey? For example, breadcrumbs are not essential if there are alternative methods to user–orientation available (eg highlighted navigation and clear page titles).

Step 4

Consider displaying certain elements in a space–saving way, eg site search, navigation, show/hide copy.

Step 5

Create templates for each device size/orientation, placing each element in order or prioritisation. Start with the smallest device size.

Fig. 2 – example of template creation for the smallest device size.

Step 6

Wireframe the smallest device size. Ensure that element behaviours are described particularly if they are inconsistent with desktop elements.

Fig. 3 – example of wireframing for the smallest device size.

Step 7

Wireframe any further device sizes where elements differ from those already described.


Page elements

When designing for the smaller device sizes there are a number of various solutions available for solving potential design problems. Having researched and tested these, the following are the standards that should be attempted to be used for all future responsive designs:

Logo

This should be located at the top left of the page, and is clickable – directing the user to the homepage. Due to brand guidelines there is no affordance that the logo behaves in this way eg creating a button around the logo, or including a ‘home’ icon.

Fig. 4 – example of logo location.

Search box

The search box should be displayed towards the top right of the page alongside the logo. Where possible this should be displayed empty, however on device sizes where space is more of an issue the search box can be replaced with a Search icon eg. magnifying glass. When the icon is tapped the search box and call–to–action open beneath, pushing down the remaining content. Tapping the icon once more reverses this action.

For websites where search is a common task, then the permanent display of the box should be considered.

Fig. 5 – example of search box implementation on small devices.

Primary navigation

There are numerous solutions for designing a primary navigation, and the correct solution depends on the site structure of the website that is being designed. In the case of aviva.co.uk which has a large number of pages and a broad structure the preferred option on the smaller devices was to utilise a fly–out menu as this provided good orientation in a website where it can be easy for users to get lost.

The primary navigation can be displayed across up to 2 horizontal rows, after which a different design approach is required. We opted for a navigation button to be placed in the header between the logo and the search icon. Although there is some convention for a navigation icon to be displayed as 3 horizontal lines, this is still not intuitive to many users. So we have used this icon alongside the words ‘Menu’ to help build up a relationship between them.

A problem that we encountered that does not appear to exist frequently with other responsive websites is how to display both the primary and secondary navigation. We wanted users to be able to navigate within their chosen category (ie. Travel) easily, but also to move from category to category without relying on the back or the home buttons. Our solution was to display both navigations but with slightly different styles, thereby suggesting some hierarchy between the navigations.

Fig. 6 – example of primary navigation on small devices.

Copy

The amount of copy that users of mobile devices are prepared to scroll through is a lot less than that of a desktop user. As the experience should be consistent across all devices it is recommended that copy is written with the smaller devices in mind – this also aids users of desktops as only the necessary copy is displayed to them in a more efficient way.

Category/landing pages should introduce the brand and product offering in no more than 200 words. Deeper content pages should go into more detail up to 400 words – any more than this and the page will quickly lose any visual impact so it may be worth considering creating additional pages.

Images

Images should be used sparingly particularly on mobile devices as they impact download speeds, whilst pushing more valuable content below the fold. For branding reasons an image can be included on a landing page, however content pages should not include an image for the reasons already stated.

Footer

The footer should be kept as short and fat and possible, which depending on the device size may become more of a long and thin shape. The footer can contain more content as the device gets smaller as lower priority links can be moved into the footer area that were displayed elsewhere on the pages of larger devices.

Tables

Tables are a notoriously difficult problem to solve and the correct solution depends largely on the size and content of the table. Whichever solution is used, it is important that it is intuitive to the user if any scrolling or swiping is required, and where and how this should be done.