Responsive-Design

"Responsive design: what’s it all about?"

15/08/13


For most of us, it’s probably fair to say that the web feels like such an intrinsic part of our lives that it’s hard to imagine life without it. At odds with this rather trite assertion is the fact that – relatively speaking – the web is still in its infancy.

Let’s compare the web to other forms of mass media. Movable type printing became globally widespread in the 15th century (although it was actually invented in China around 400 years earlier). Radio broadcasts have been listened to for around a century. Television has been melting our brains, corrupting our youth and propelling talentless individuals to stardom since the 1940s.

Ask anyone when they first started using the web and they’ll probably tell you that it was some time around the mid 90s, while Friends was first showing on TV and the latest Prodigy album was probably playing somewhere in the background. This pegs the web’s mass-market age at around 20 years old. In contrast, the television is now about 70 (3-4x the age of the web); the radio should be expecting a telegram from the Queen any day now (5x the age of the web); the printed word has been going strong for about 600 years, like some kind of undying media Frankenstein. This means that print has now been part of the public’s consciousness for 30 times longer than the web as we know it.

Understanding the web

press-letters

So, looking back at the incredibly primitive state of early TV and radio, it’s not unfair to suggest that we’re not even close to figuring out the web yet, although we’re undoubtedly getting better at it. One significant problem is that we don’t really know what “figuring it out” even means here. Quantifying success is hard to achieve when the very notion of success can sometimes be hard to agree on, especially in the context of subjective and thorny areas such as a website’s layout and user interface.

Graphic designers and typesetters in particular have had a hard time adjusting from finely manicured print layouts to the web’s visual crapshoot, where the rendering of their painstaking design work can charitably be described as “fluid” – frequently a frustrating and inconsistent mess that presents unwelcome challenges to anyone looking for a pixel-perfect rendering of their artistic oeuvre.

The root cause of these design headaches is often the distinctly unsexy concept of “device fragmentation”. From the outset, people have been using a variety of operating systems and browsers to access the web (remember Internet Explorer vs. Netscape Navigator?), which have historically been cavalier at best in their approach to web standards, presenting a rather unhelpful movable target for web designers and clients who just want their design to look the same on every computer.

However, the biggest upset has surely been the explosion of web usage on mobile devices. As has been widely predicted for some time, the percentage of people accessing the web from desktop computers is rapidly on the decline. Most analysts predict that tablet sales will breeze past 100 million this year; only a fool would argue that this is not a very large and significant number. Over the last few years, the prediction of exponential mobile growth has moved beyond speculation and punditry into a very real and entrenched trend that still shows little sign of abating.

Dealing with mobile disruption

happy-mobile

So, what does this mean for the poor graphic artists and user interface designers who already had a hard time getting their sites to display consistently across all manner of devices? Well, referring back to my earlier statement – that we don’t know what “figuring out” the web actually means – many web professionals are starting to realise that pixel-perfect cross-platform design is not actually the design panacea that many thought it to be. Instead of aiming for complete parity of design across every single device – a lofty ideal both needlessly ambitious and increasingly misplaced – we should allow sites to respond gracefully to the device being used to view them.

The concept of adapting your content to various target devices is not necessarily a new one. Any experienced web developer will surely remember the dark days of “browser sniffing”: attempting to discover each visitor’s browser within your code and serving up appropriate content designed for that browser alone. Similar techniques have been used to serve up completely separate mobile sites for years and in many cases are still being used – and, it must be said, sometimes with successful results.

However, there is an important distinction to make here: in attempting to write separate code for each device (or for each loosely-defined group of devices), the cost of development grows proportionately with the number of devices that you are trying to support. Software projects become more expensive, more prone to failure and less adaptable to emerging trends on the web, which is already a rather volatile environment to work in. The hugely divergent pool of mobile phones, tablets and desktop devices released each year makes device-specific development a poor solution to a debatable problem, which was arguably over-egged in the first place.

Responsive design to the rescue

The concept of responsive design is markedly different. Here, we embrace the fact that websites are viewed in a huge number of resolutions and devices that will – in all likelihood – change significantly every year. Instead of the frenetic targeting of each new device in a constant game of web design whack-a-mole, we build one fluid layout that shuffles its constituent parts around as the size of the viewport (i.e. the size of the brower window or screen) changes with each new device.

The distinction can be hard to convey in words alone, so here are some good examples:

Firebox

shot-firebox

When viewed in full width, we can see a wide grid of products, a full-width site navigation and a horizontal bar of sub navigation. When the viewport is smaller – either because we are shrinking the browser window or because we’re accessing the site on a mobile – the products rearrange themselves into a vertical column, the menu collapses into a small area accessible from a button and the sub-navigation disappears. All of the content is still accessible, but it in a way that is appropriate given the size of the window.

BBC mobile

shot-bbc

Although the desktop BBC site is not yet fully responsive, its mobile site is. The BBC have taken a similar approach to Firebox, where at full width we can see several columns of content and a full menu bar, which collapse when the viewport shrinks.

Where to go from here?

The benefits of responsive design are obvious: we can build websites that cater for a wide range of devices, many of which haven’t even been released yet, by allowing a single code base to respond elegantly to a plethora of displays. We can do this gracefully and without the inestimable cost of catering to very specific devices, many of which have a shelf life shorter than a tin of beans.

There are undoubtedly still challenges – responsive images, for example, are still proving to be a bit of a headache, although clever workarounds do exist – but given the infantile state of the web, there are bound to be teething problems with any new technology or technique, particularly one that sets out to solve a problem such as device fragmentation that – by its very nature – is very hard to quantify.

At Draw & Code we’re fascinated by new technology, and as such are often suspicious of anything that claims to be “future-proof”. It’s frequently an unrealistic and misguided goal for any new project, given the rapid rate of change of technology. However, keeping at least one eye on the future pays dividends, and in the case of responsive design we have a technology that helps us to prepare for whatever the future holds while doing a fine job of developing websites in the present. We love it.


[GET IN TOUCH]