Responsive Design: “The Web Is Not Fixed Width and It Never Was!”

by Jamie Eastabrook

I think this is one of my favourite quotes from Future of Web Design London (FOWD). Not just because it is true but because a one “fixed width” size fits all approach just isn’t giving users of a website the best possible experience anymore.

Enter ‘Responsive Design’

Responsive web design is not easy and that was definitely something widely agreed upon by those at FOWD, however that hasn’t stopped us wanting to make every website we do be responsive.

A lot of principles and guidance given by the speakers at FOWD has since influenced the work and decisions I’ve made on projects.

Don’t use Lorem Ipsum

Always ask the client for the real content to use when wireframing and designing. This will help when thinking about the structure and layout of the content on the website.

If you are designing with Lorem Ipsum you are just creating a pretty picture essentially around nothing.

For example, if the title of an article is never going to be less than a certain number of characters this may have an impact on it being shown on different areas throughout the site where you may choose to present it in a different layout than you would have done without knowing this information.

Tap targets

We should let people be lazy and not force them to resort to tiny finger pecking at the screen.

Hand

The average tap target size is 44px by 44px.

This guide isn’t just relevant for styled links but also throughout your website where the user could potentially tap something else that appears around the thing they actually wanted to tap. Think of a list of checkboxes on a form or the placement of important links that result in completely different actions that may frustrate the user.

Options

Sarah Parmenter @sazzy uses a set of semi-transparent Photoshop layers on all her designs to ensure her tap targets are correct.

Don’t make assumptions

@sazzy said this best during her talk on ‘Beautiful iOS Design’ when she told us to stop thinking about the context of what users may or may not be doing when accessing a site on a mobile device.

This is of relevance for users on any device, whether it be desktop, tablet or otherwise. We should concentrate more on creating the best overall website experience across all devices.

Creating Responsive Designs

Don’t create a million Photoshop files to illustrate how the website will work in the browser as a responsive design, this will cause an endless amount of additional time being added to the project until the design is in a ‘sign-off state’.

Depending on the project there are a number of potential options you could experiment with.
Use paper prototyping

Using old-fashioned paper and pencil will allow you to quickly iterate and to demonstrate your ideas of how you see elements of the design responding to changes in browser size.

This isn’t just an option for Responsive only design but designs in general. This style of prototyping is a quick and ‘throw away’ approach.

These will also let the client give you their honest feedback as they don’t look like you’ve spent hours and hours behind them.

Use InDesign

Indesign! My eyebrow did raise when I heard @sazzy say it but in all seriousness, InDesign could be a good solution for responsive layout adjustments.

Jesse Bennett-Chamberlain has blogged about his responsive process and offers a download of an InDesign responsive template.

InDesign also has the option to create alternate layouts which allows you to create multiple layout versions of the same design all within the same file – it also has a set of predefined layouts for you to choose from when creating one. Neat.

BrightLemon