Adapting to a responsive future

January 2016

Back when website building stated becoming more mainstream in the mid-nineties, everyone’s primary concern was minimising everything as far as possible to ensure users could access the site on the modems that were used back then. Screens tended to be low resolution, often with limited colours. It was a constant fight to ensure that sites worked at all, let alone looked great. There were no mobile sites, no pervasive smart devices. Just desktops and laptops.

Back then, it was fairly common to either lock sites down to a very limited width – say, 680 pixels wide – or create them as “fluid” so they filled the screen. Debates raged about the relative value of these approaches, until increasing screen sizes started to highlight some of the issues with fluid sites. They ran into particular problems with line-length (long lines of text are very difficult to read) – and the fact that they tended to look less “designed”. Fixed-width sites quickly became the norm.

Then in 2007 Apple release the iPhone. It wasn’t the first smart device. It certainly wasn’t the first “alternative screen” that allowed people to view websites (WebTV, PDAs and other phones had done that for years previously). It did, however, change people’s expectations about how they could access the web. Rather than being satisfied with viewing a desktop site on a screen, people began to ask why sites weren’t tailored to this new method of browsing.

Remembering the debates about fixed versus fluid, people looked back at the old arguments and started to realise that “fluid” perhaps held the answer in this new landscape. With enhancements to code, and the real maturation of CSS, it was becoming possible to create sites that worked regardless of screen size.

Being creatures of habit, however, the web development community then immediately decided to take two approaches – “responsive” (which is analogous to the “fluid” approach), and “adaptive” (which tended to reflect the old “fixed” approach).

And this is where people now get muddled.

Developers understand the clear difference and use the terms carefully, as they infer a different approach to building sites. Most other people, however, tend to use them interchangeably, as they understand them to mean simply “works on my phone, tablet and computer”.

It’s important to know the difference, however, as you may not get what you expect from your developer! Forewarned is forearmed, as they say…

Adaptive can be understood as “depending on device size, the site adapts itself”.

Usually this means that the site is set to render at a series of specific sizes (like the “fixed” sites of old). Between those sizes, the site will not change. You can recognise sites built in this way as they jump width as you resize your browser, tending to be set to sizes that match Apple devices – 320 pixels for “mobile” (iPhone portrait), 768 for “tablet” (iPad portrait), and 1024 for everything else. This means that if you visit the site on a device that is between these sizes – say 400 pixels wide – you will still get the “320” version of the site, usually with margins on either side.

The biggest issue with adaptive is that it can make a site feel incomplete or badly designed – with the increasing variety of screen sizes on mobile devices, there is no way to “adapt” to every size, so you end up with increasing gaps and more ill-fitting designs.

Responsive on the other hand can be understood as “the site responds fluidly to all device sizes”.

This means that the site is built so that it can expand or contract to fit any device size. From mobile to massive wall-mounted display, the site will change continually in order to fill up the available space. In places developers will choose to alter the way elements display – stacking blocks of content, or changing the way navigation works – but fundamentally, the site works on any screen size. It is also possible to lock the bounds of sites – so within a certain range the site “responds”, but beyond that it locks to a set size. This prevents the problem of long line lengths, and can be used to guide people to other solutions – for example, have a site that works between tablet and desktop, but locks for mobile users in order to guide them to a more appropriate mobile experience (where content may be truncated).

There are issues with responsive as well, however. Because it is completely flexible, designs need to be more considered – you will undoubtedly be presented flat designs in basic formats of “desktop, tablet, mobile”. When built, however, sizes between these design points can fragment a little.

So, responsive or adaptive?

We would always recommend that you take a responsive approach.

Despite the drawback that at certain sizes a site may look less than perfect, it will always be more accessible and perform better than a site that is ill-fitting. It is ever more important that, in an era when screen sizes and resolutions are becoming ever more diverse, your site preforms optimally on all of them – and not just on the few that are currently fashionable.