Skip to main content

With Good References

Posted on , and filed alongside my other Writing

I swear, I planned to finish this entry up today and post it—but unfortunately I and my crap time management have been thwarted. So at the risk of sounding “me too”-y, here goes:

That Jeremy Keith has been a media-queryin’ fiend. Blogging up a storm about not one, not two, but three recent responsive redesigns, Jeremy has most recently dropped the responsive boom (what?) on his own site, discussing some of the lessons he’s learned along the way. And one of the items he mentioned is one that’s been frontmost in my mind of late: namely, the role of the reference design in the responsive workflow.

As I’ve been talking about responsive design this year, at AEA and elsewhere, I urge the audience to think of the responsive process as beginning with a flexible reference design, a design that epitomizes your starting point, your ideal, optimal design. With that baseline in place, you can then apply media queries to scale beyond that starting point, allowing your design to adapt and respond to the media rendering it. Which is basically what I said in my original article:

We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.

Now, the examples in my original article began with a very desktop-centric design, using media queries to scale it down (and up) from that baseline. Not that there’s anything wrong with that: most of the recent (and fantastic) responsive designs have begun with that more desktoppy reference point.

But that doesn’t mean that a responsive design can’t begin with a more mobile-ish approach. In fact, I tried to implement exactly that on the recent launch of my portfolio site. Beginning with a very linear, small screen-friendly layout, the layout becomes gradually more complex as the viewport widens, introducing a rudimentary grid and a little asymmetry, eventually, and heavier graphics.

What if the user views the site on a browser or device that’s blind to media queries? If it’s a small screen, no problem: they get the default, linear design. But that default reference design translates nicely to a larger screen as well, constrained by a little max-width. So no matter where you start along the resolution range, it’s important to keep that reference point—and your audience’s needs—firmly in mind.