Mobile Web: The Evolution of Responsive Web Design

 

Things sure have changed since the guys at A List Apart first starting using terms like responsive web design. Ethan Marcotte’s 2010 article and his book the following year largely cemented its place in the designer’s phrasebook, but John Allsopp had been talking about a responsive web since way back in 2000.

Either way, responsive web design is anything but a new concept, even if it has only really caught on over the last few years. And things are moving fast too, with the prospect of wearable devices and a future of unforeseen technology changing the way we look at web design

 

The shift from adaptive to responsive design

Before responsive design matured as a mobile solution the best we had was adaptive design, which ideally used progressive enhancement to adapt content and layouts as screen sizes get bigger.

Sadly, progressive enhancement didn’t feature in adaptive design as much as it should have. More common were adaptive ‘redesigns’ that relied on graceful degradation to scale down as screens get smaller. Essentially it was a quick fix to address the rise of mobile users, but as desktop began to take a back seat and a new breed of wearable technology hit consumer shelves, responsive design emerged as the first step towards a device independent web.

 

The goal behind responsive web design

Fluid, adaptive and other ‘flexible’ design techniques all too often get labelled under the same tag as responsive, but more than technical differences (like fluid grids) it’s the goal behind responsive design that sets it apart.

In the days of adaptive we were still thinking in terms of a select few common screen sizes and adjusting layouts for them. In the days of responsive, however, our aim is to design independently of screen sizes, device or any other limitation to create a user experience that works across all existing and future devices.

 

 

The evolution of responsive design

As the dust settled and the initial hype around responsive web design gradually died down we got a chance to take stock, see its flaws and move into the next chapter. Responsive still had some growing up to do and it’s come a long way over the last few years.

 

Mobile first

Mobile first design is the first high-profile extension of responsive and it was a large step in the right direction.

The triumph of mobile first was moving beyond the design of layouts for multiple devices and prioritising performance. Smartphones typically come with less power and weaker connections, so by focusing on these first we can create a stronger user experience across all devices.

The biggest problem with mobile first is the name itself, because it suggests we should prioritise mobile over anything else. If we think of it as “performance first,” irrespective of device (or inclusive of all of them), then we’re keeping the main goal in mind.

 

Mobile only

An even worse name choice in my opinion, but a trend that seems to have developed this year is a resurgence of “mobile only” design. I mentioned this in our recent web design trends article and rather than having separate mobile sites, mobile first or responsive designs, the revamped approach to “mobile only” is a single mobile site and entire digital strategy.

I’m not buying it myself (for what it’s worth) and, while a mobile only format may work for some very niche brands, I’m hoping this is one fad that doesn’t gain too much traction.

 

 

Responsive design today

So five years after Ethan Marcotte coined the phrase, where are we at with responsive design and how much progress has been made? Well, in theory we’ve come a long way, but it will take some time before we see the latest responsive techniques and philosophies work their way into the wider web.

 

Content first

Forget devices, it’s the content that matters for any given screen size. It’s fairly common practice now to let content determine your breakpoints and use relative units (ems) for your media queries to accommodate for user zooming.

 

Starting small

Right out of the mobile-first handbook it makes sense to start with a small design and build your way up from there. We’re not just talking layouts either (performance optimisation, remember?) but clean code, minimal server requests, conditional loading and everything else you can do to maximise performance on less capable devices.

 

Minimalism

Minimal design goes a long way in the days of multiple devices, where screen retail space is often a luxury. Minimalism can be harder to pull off on larger displays perhaps, but this is where responsive layouts come into their own.  Check out some great examples here and here.

 

Lightweight

There’s only one weight division you want to be in as a website owner and that’s the lightest of the bunch. The evolution of JavaScript has opened up new possibilities with the likes of Node.js and other server side solutions, making real-time web applications and more complex features less demanding on servers, browsers and devices.

 

Full-width

In line with the minimal approach going full-width with your designs gets you off to a great start for smaller displays, even if you choose to double up with columns or other layouts as you work your way through breakpoints.

 

Flexible media

Let’s face it, visual content is where it’s at, but it wouldn’t be anywhere without flexible media. A huge step was the introduction of markup that finally offered a workable solution to responsive images, although video still calls for a little hacking in some cases.

 

Touchscreen optimisation

Sadly, many sites and apps still leave a lot to be desired on touchscreen, which kind of defeats the point of optimising for mobile. Forms are probably the biggest sinner and HTML5 input types are a good place to start. Input fields, links and button also need to be big enough to accurately tap first time and spacious layouts go a long way to help touchscreen performance too.

To sum up, responsive design today encompasses far more than layouts and screen sizes; it’s a part of a wider UX design that demands the best performance for users on every device.

 

 

Where is the future of responsive web design headed?

As time goes by responsive design will probably merge further into UX design, probably to an extent where we won’t need to call designs responsive any more. In the meantime we’ll see more elegant examples of web experiences as JavaScript and other technologies make animations and user interactions less demanding.

But we still haven’t answered the difficult question of how to make content truly accessible across multiple devices – and this is something we’ll need to address. Responsive design doesn’t stop a 1000-word article turning into an endless scroll of monotony (apologies mobile readers) and this remains our biggest hurdle as the range of connected devices continues to expand.

It’s been a turbulent few years with the rapid growth of mobile and a number of design approaches to accommodate it, but a long-term will need to be more sustainable. One that can stand the test of time and new technologies alike – as well as the changing user habits that come with them.