Categories
An Event Apart

Ethan Marcotte: The Responsive Designer’s Workflow

A responsive site isn’t flipping between a set of fixed layouts. It’s liquid. Breakpoints that you haven’t thought of will still work.

You have to figure out what is the most appropriate experience for what device. Stephen Hay wrote a great post called There Is No Mobile Web. His point is that the rise of mobile should encourage to revisit our principles of accessibility and progressive enhancement for everyone.

When responsive design meets Mobile First—starting with the narrowest width and building up from there—what you’re doing is progressive enhancement. You’ll even see this layering in the way that the stylesheets are structured.

The basic experience is still very attractive. The next step is enhancing for browsers that support media queries …and Internet Explorer. They get an enhanced stylesheet.
There are other things you can test for: are touch events supported, for example. So an iPad has the screen size of a laptop but it also supports touch events. They get some enhanced JavaScript functionality.

A really tricky question is “is this key content, or is it simply an enhancement for some users?” Web fonts are good example of this grey area. For the Boston Globe, they decided to make a hard cut-off point and only serve up web fonts to viewports above a certain size. …

Adactio: Journal—Ethan Marcotte: The Responsive Designer’s Workflow.

By L. Jeffrey Zeldman

“King of Web Standards”—Bloomberg Businessweek. Author, Designer, Founder. Talent Content Director at Automattic. Publisher, alistapart.com & abookapart.com. Ava’s dad.

Got something to say?

Discover more from Zeldman on Web and Interaction Design

Subscribe now to keep reading and get access to the full archive.

Continue reading