The site navigation:

With Good References

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.

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.