Saturday 18 August 2012

The Responsive Manifesto

A spectre is haunting the world wide web—the spectre of Responsive Web Design. Well not quite perhaps, but it is now a little over two years since the term was coined by Ethan Marcotte in an article on the blog A List Apart. This article was later expanded into a book, published by A Book Apart in July last year, since when the idea has spread rapidly amongst designers and developers and I for one have become an enthusiast.

In this post I want to put the concept of Responsive Web Design into context—how and why it has become such a big issue over the last couple of years, explain briefly what it is and how it is achieved and finally discuss some of the criticisms that have been made of it, and why I believe these tend to fundamentally misunderstand the concept.

The main driving force behind the development of the approach has been the increased use of smaller, mobile devices to view online content over the last few years. It is commonly estimated that somewhere around the year of 2014 the use of mobile devices will outstrip desktop devices for viewing online content.

Initially, the main option for developers was to build a dedicated mobile site. The main drawback to this is that it requires the user to be redirected once their device has been recognised and with the number of available mobile devices increasing at a phenomenal rate it is just impossible to keep up. Not only that but the range of different screen sizes and capabilities of these devices is increasing in a wholly unpredictable way.

It is this dilemma which inspired Marcotte to propose the solution of a site which responds to the device on which it is being viewed in a way that makes sense on that device. There are a number of examples of this—but probably the first major site to use it was the Boston Globe. Looking at this on a desktop and mobile browser illustrates how the same content can be maximised for the device being used to view it.

This is made possible by coding the site within a flexible grid, able to respond to the dimensions of the viewport of the device, and using media queries—new to the W3C CSS3 specification—to dynamically trigger changes to the layout based upon various attributes of the display device, such as its width, orientation or aspect ratio.

But more importantly, to me at least, is the philosophy behind this approach. In the article and the book Ethan Marcotte is not just presenting a ‘how to’ but is also positing a change in our way of thinking about the web. In this, his starting point is an article by John Allsopp, A Dao of Web Design, which appeared on A List Apart some ten years earlier.

The main point Marcotte takes from this is that developments from one media to another inevitably see some elements of the old carried on into the new, even after they have ceased to make sense. This can be best understood by considering parallel developments in other media such as how theatre gave rise to cinema. In its early days films were essentially made by placing a camera in front of actors in a theatrical setting. As the medium evolved—both through technical advances, and through its own language becoming better understood—it gradually created its own ways of doing things, casting off the redundant values of its ancestor.

When applied to web, this refers to how this medium has developed out of print and borrows from it notions such as a clearly defined space—the printed page—in which to work and others, such as ‘masthead’, ‘white-space’, ‘leading’ and ‘fold’. All of this must be jettisoned in favour of web defining its own rules; what have been seen hitherto as ‘limitations’ of the web, as against print, should instead be seen as strengths.

So to the criticisms. I’ll cover some of the main ones I have come across here, which all have a certain degree of validity, but for me all miss the essential point.

Broadly speaking, there are three main strands of criticism that I have noticed. The first of these argue that Responsive Design is not as good as a dedicated mobile site because it is difficult to optimise certain elements (especially images) for an unknown device. This is an important point when considering the potentially limited bandwidth available to mobile devices and the image-heavy nature of many desktop sites. Whilst there are discussions around how to better mark up images in HTML—including suggestions to introduce a ‘picture’ tag along the lines of ‘video’ and ‘audio’ ones—it remains the case that there is no easy way to serve up smaller images to mobile devices in a responsive site.

Another is that the approach mixes the concepts of the device and the context in which it is used. In other words it is not just about screen sizes but how and when people use the device. Think of a restaurant site for instance. At home your concern may be to find a good restaurant for an evening out. Detailed descriptions of menus and so on will be more appropriate than when you are on the move and your needs are more basic: where is it? Is it open? What’s the phone number? A dedicated mobile site, it is argued, is more able to serve up aspects of the content appropriate to the context in which it is viewed.

It is also argued that a responsive approach can have a negative impact on the user experience when elements move from one place to another, less familiar one. This is, to my mind, the most convincing argument against a responsive approach—though not one that is unique to it: a dedicated mobile site is subject to similar criticisms.

Valid criticisms all. But they serve to highlight the way that the rise of the mobile device has thrown the whole game wide open. Of course large images should not clog up a user’s bandwidth on a mobile device, but look again at the Boston Globe site, preferably on a desktop browser and change the size of the viewport. Image sizes do not change that much between a large or small sized browser window. The design, created with the mobile device foremost in mind, does not call for large images. If your design calls out for large images then the responsive route is not for you. But maybe all sites should move away from this and designers should be encouraged to come up with design solutions rather than rely on technical ones.

The argument over context versus content can be viewed in a similar light. The use of a mobile device does not necessarily imply the user is away from their desktop computer—browsing on a mobile whilst at home is increasingly common. In other words changing the content for different devices is the wrong approach—changing how that content is presented is a better one.

Responsive Web Design is, to my mind, primarily about adopting a different philosophy to the development of sites—beginning with mobile devices—which should lead to the adoption of better practices on all devices. The mobile-enabled world into which we are now moving presents us with challenges for sure but, armed with a clear idea of how to approach these, and with good concepts of user-oriented design these are challenges we should relish. It is early days for the responsive approach but we as developers have the opportunity to break the chains binding us to the practices of yesterday and take a step towards declaring the web as its own medium. And that’s quite a revolutionary idea!

Adding comments has now expired for this post.