Does 2015 mark the end of pixel perfect design?

Up until about eight years ago consumers of digital content had a limited viewpoint into our digital world.

Maybe we had a desktop computer at home, a laptop at work or, if you were feeling brave, a dumbphone to connect to the very occasional slow WAP website.

Smartphones didn't take off until 2007's iPhone, so before then running a real website on a phone was somewhat niche.

Desktop computers had similar resolution screens, typically with widths differing by only one or two hundred pixels, and so fixed width layout for websites was quite common.

The original iMac with the BBC website from 1998

Fixed width to varied form factors

Fixed layouts meant the user would see exactly what the designer wanted them to see.

Fixing the width of a website to 760 or 960 pixels meant the designer could spend time making sure every item on the page fitted and looked beautiful. The closest we got to responsive or fluid design involved centring the content on the page.

Today's devices come in many form factors: desktop and laptops are no longer the only conduits to get your app or website into the hands of consumers.

Larger screens via smart televisions, games consoles and digital media players are also muscling in. And smaller screens, not just on mobile phones and tablets, but on smaller wearable devices such as smart watches and the likes of Google Glass, are also adding to the mobile inventory.

Smartwatches, once the stuff of a mad man's dream, are owned by all designers in London... well, almost

Building responsively

For you, the designer in 2015, you have to build responsively.

That is to say to detect the screen dimensions or device type and rearrange elements to best use the available space. This can be achieved using one or more 'breakpoints' to switch between one layout and another.

Once these layouts are agreed then, rather than producing designs to dimensions in fixed pixel units, percentages should be used. This helps to keep user interface (UI) elements in a fluid layout, maintaining the desired spatial weighting.

Whilst this can lead to increased design time to cover a range of potential resolutions, the advantage is a finished experience that makes best use of the screen space available.

Another method for using available screen space is the elastic layout, which is very similar to fluid but which uses 'em' measurements instead of percentages, meaning it effectively uses font height to determine the layout.

Considering content hierarchy

Using responsive layouts means you can resize a website to best fit a screen, but it also means that content hierarchy must be considered.

If content is side-by-side on desktop, how should it stack on top of each another on mobile? One tip is to not design for specific breakpoints from the outset. Instead build fluid and add breakpoints, as the site becomes ugly at smaller resolutions when resizing the browser window.

Design should be content-driven, based on what looks good to the eye at certain widths

Although we are mostly discussing website layout here, similar principles can be used for native apps on mobiles and tablets. Android and iOS both have systems for dealing with varying screen sizes, with Android clearly having the most variation within its ecosystem.

We already have HiDPI (High Dots Per Inch) screens such as Apple's Retina display, and more manufacturers are jumping on board (Lenovo's Yoga 3 Pro being a beauty). With this new class of screen resolutions to cater for, we will have to not only think about layout in general, but also about the quality of imagery we use on such devices.

Lenovo Yoga 3 Pro, the latest in a line of thin yet powerful notebooks

Many devices, many sizes

With the next hump in web design being these high res screens, we will be generating several sizes of each image, and implementing using the proposed srcset attribute on img tags.

In the future we'll increasingly have to target a broader range of devices and screens, in particular wearable devices such as watches, and whatever follows after the now abandoned Google Glass project.

Google Glass: abandonded for now, but potentially something for designer to keep in mind in the future

The idea is to design responsively and fluidly – and to only need to do it once. Cover all resolutions, without worrying about specific devices, and your website or app can handle whatever device or screen it's displayed on.

Words: Tom Bandy

Tom Bandy is a creative technologist at global design and technology agency Athlon, a company working at the intersection of design, human factors and software development.

Like this? Read these!