Thoughts on Responsive Enhancement

At AsyncJS in Brighton last night, Jeremy Keith gave an overview of “Respon­sive enhance­ment” — adapt­ing a lay­out in response to browser or device capa­bil­i­ties. After con­sid­er­ing why fixed width designs are so preva­lent, via a brief his­tory les­son, we delved into the tools and meth­ods by which a truly respon­sive design can be imple­mented, focussing pri­mar­ily on size con­straints but also touch­ing on trou­bles sur­round­ing speed.

This arti­cle is a brain dump from last night’s event.

CSS3 media queries let us adapt CSS rules to dif­fer­ent view­port prop­er­ties; width, height, pixel ratio, even colour and mono­chrome screens (full list). Aside: the Ama­zon Kin­dle (which uses webkit) reports itself as colour, with 8 lev­els, rather than monochrome.

The com­mon process is to design for the desk­top and use media queries to adapt down­wards. On thin­ner devices con­tent is lin­earised, nav­i­ga­tion moves to the top or bot­tom, less impor­tant ele­ments are some­times hid­den; every­thing is sim­pli­fied down to the page’s core use case.

A num­ber of tuto­ri­als have offered up the exact pixel-based media queries needed to tar­get spe­cific devices, a sort of restricted browser sniff­ing. This isn’t truly pro­gres­sive, you can never cover all devices, and devices change, revis­it­ing code for device iter­a­tions isn’t going to be fun.

Media queries don’t need to be pixel based either, chang­ing a page lay­out based on ems will adapt con­tent for larger text sizes. If the user’s text size is huge, our view­port is the same but we’ve got less space to play with, a lin­ear mobile-like design might be more desirable.

This act of adapt­ing down­wards works for devices like the iPhone and iPad, but what about those that don’t sup­port media queries? They’re going to get the full desk­top ver­sion and it’s not going to be pretty.

Luke Wrob­lewski has sug­gested design­ing for mobile first (an excel­lent read). In terms of respon­sive enhance­ment that means cre­at­ing your lin­ear site as the base­line and build­ing out­wards around con­tent, bring­ing in fea­tures as capa­bil­i­ties improve and con­straints are relaxed. As the view­port widens, media queries can intro­duce columns, rather than remove them. It’s the same process but in the oppo­site direction.

All mobile devices and older browsers would get the sim­pli­fied, lin­ear design. This works on the assump­tion that desk­top browsers sup­port media queries, IE 8 and below do not, ergo they’ll be see­ing the lin­ear site design. This may be accept­able, but in the major­ity of cases IE will need some sort of hack to get the full fea­tured version.

Using con­di­tional IE com­ments an IE lay­out can be hacked in. The IE spe­cific styles are likely to repeat exist­ing code, unde­sir­able, but unavoid­able? This is still a one size fits all approach as IE will not adapt to screen or text size. For this we need a JS poly-fill, one that enables media queries in older browsers. There’s a library on Google Code that does just this, CSS3 Media Queries JS.

Build­ing a page that can be lin­earised means putting the most impor­tant infor­ma­tion first in the source code. This assumes that the con­text of “what is impor­tant” is sim­i­lar on dif­fer­ent devices. If the con­text is dif­fer­ent, that makes a case for serv­ing dif­fer­ent con­tent, usu­ally via a stand­alone mobile site (which should always come with a link to the full version).

And on the topic of serv­ing dif­fer­ent con­tent, there is also the speed prob­lem. Hid­ing and show­ing parts of a page using CSS is great, but it doesn’t stop the slower mobile net­works from down­load­ing the unnec­es­sary parts, includ­ing those huge back­ground images. PPK has writ­ten an excel­lent arti­cle on com­bin­ing media queries and javascript to avoid some of these caveats.

To round this brain dump off, I’ll rec­om­mend some other arti­cles on the sub­ject, which go into some of the tech­ni­cal aspects in a lit­tle more depth.

Ethan Marcotte’s “Respon­sive Web Design“
Jeremy Keith’s “Respon­sive Enhance­ment“
Yiibu’s “Rethink­ing the mobile web“
PPK’s “State of Mobile Web Devel­op­ment”