textwrap

running words around
design education and visual communication
authored by chris m hughes

Demystifying Responsive Design

Wednesday, 14 September 2011

screen sizes example
One of the current industry buzzphrases at the moment is 'responsive design', and its definitive statement-of-intent was expressed by Ethan Marcotte in his seminal article 'Responsive Web Design', back in May 2010.

Since then Marcotte has published a well-received and extremely useful book on the subject, and the industry has perked up its ears.

Rather than being a bona-fide technique, 'responsive' design is more like a philosophy which has gradually emerged in reaction to the issues posed by the diverse range of screen sizes, resolutions and devices which now display web pages. In a nutshell, a web design should embrace the limitations of each device and display a 'version' of itself to each device and its user.

This notion that a single web design should present a coherent visual style across all devices is, on the face of it, hugely ambitious. It makes the browser wars of the late 1990's and early 2000's sound like a walk in the park in terms of effort, technical know-how and good old-fashioned patience. But the advent of html5, and css3 in particular, mean that responsive design is achievable and reliable so long as web designers bring a new set of best practices to the design process.


Techniques
Some of the key aspects of responsive design will be familiar to many web designers, including students in my classes, because in essence they are all just examples of good practice and good accessibility, and have been around in various forms for a number of years -

1.a fluid (or semi-fluid) column grid layout
2.device-specific stylesheets
3.resizeable images
4.media queries

Brought together, these tweaks allow a web page to dynamically adjust to the size and resolution limitations of whatever device it is served up to.

Options
In practice, designers are using either of two techniques to display versions of their designs to each device. The first technique is to use a media query in the head of the document that identifies which type of device is viewing the page. A specific stylesheet created for that device is then loaded. A simple css example would look like this:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="layout2.css">

The media query specifies a media type (screen), and a media feature (max-device-width), with a related value (800px).

In the example, layout2.css will be used to serve up the webpage until the browser size goes beyond 800px, at which point a different stylesheet (and hence an adjusted layout arrangement) would take over.

We could add another media query to this, such as -

<link rel="stylesheet" type="text/css" media="handheld" href="layout3.css">

This time, layout3.css is loaded to display on a handheld device. Other stylesheets called in the head of the page, like layout2.css, are ignored.

This use of dual stylesheets can also be combined with the 'orientation' media query for the iPad and some tablet devices. For more on this, you can refer to my recent post on this subject, together with the sample css. A related approach to this idea uses the @import rule, which imports a stylesheet when a particular device sizing is called for.

But what becomes apparent is that you need multiple stylesheets, and a variety of media screen queries to satisfy each device. Which all sounds a bit version-messy and time consuming.

A more elegant and streamlined way to accomplish this is by using css3 to create media queries on the fly inside a single stylesheet.

The rule is called @media, and all that needs to be done is to list an alternative set of values for any existing div id or class that's already in the stylesheet -

@media screen and (max-device-width: 800px) {
#wrapper {
width:780px;
}
}

In this example, as soon as the browser size is reduced to 800px, the wrapper is displayed at a new width of 780px. Everything inside the wrapper, e.g. the header, the menu, font-sizes and so on, will be re-organised automatically if the values have been expressed as floats and percentages in a fluid grid.


What all this achieves
Ideally, a single website based on responsive design will produce a range of visual versions across various devices. This example is a particularly good one - Sparkbox.com -

sparkbox device layouts


When the user resizes their browser window, the site will adjust to display whatever version fits the device size. To see this in action, simply reduce the size of your browser right now on textwrap.net to 800px and then down to 480px and see what happens.

This all sounds like hard work, but it delivers a seamless viewing experience across a myriad of devices, and satisfies branding guidelines. It also establishes two pieces of best practice that will become standard in the industry.

Firstly, that a selection of designs at various scales and layouts are created during the development of the site, both as visual mock-ups and as demos. Designers will start looking for a sense of visual unity.

Secondly, that a set of pre-defined alternative values for id's and classes are written in tandem as the layout is created.

From a purely design viewpoint, we should all be celebrating, because more than ever, print-based paradigms will become the dominant visual aspect of responsive design.

Typography, proportion, whitespace, vertical rhythm, and economy of content will trump animated banners, multiple options, jqueried menus and image galleries. Responsive web design will introduce a new form of controlled minimalism to web design. It will also redefine the limits and usefulness of branding guidelines.

For web design, the focus has to be on the future. Apparently, by 2014, more than 50% of all websites will be viewed primarily on a mobile device.


More:
Responsive Web Design @ smashingmagazine
StunningCSS3 Media Queries
Buy Ethan Marcotte's book