The Responsive Designers Workflow, #psuweb12 keynote presentation from @beep

This is a live-blogged post during the 2012 Penn State Web conference. This keynote was presented by Ethan Marcotte.

Nearly half of all American adults get local news on a cellphone or tablet computer

What makes a design responsive?

• Flexible grids
• Flexible images and media
• CSS media queries

Each of these components are speaking about layout. And design isn’t just about layout.

“Design is the stuff around the end result.” - Mark Boulton

The Boston Globe (responsive site launched recently)

• Challenge: how do you take inflexible pieces of art into something that can be viewed on any device?
• Tasked with both visual and interaction design. 
• Typical linear approach: discover - design - develop - deliver. You finish one stage before moving to the next. But how do you finish design when it is responsive?
• Another part of the problem? The tools we use to design for the web are inflexible. 
• New approach: Stop thinking about design and development as separate. 
• What content is necessary for a mobile viewer?
• They’re trying to cultivate readers despite the device.

Advice: Ask the questions, even if you don’t have the answers right away.

Mobile first: mobile traffic has exploded, new capabilities, and narrower screens force us to focus.

Our methods for designing for the web need refinement.

Has “mobile and desktop” become synonymous with “less and more?”

84% -- mobile access at home
31% -- mobile buyers shop while watching TV

We are no longer tethered to a specific location or position for accessing the web. But we are also capable of long periods of focus.

Context doesn’t necessarily determine the user’s intent.

We need a commitment to the content that we’re designing. And designing for “content first” we can improve the interface for all of our readers, no matter what device they’re on.

Back to the Boston Globe

• Finding the right proportions is necessary for a flexible grid
• “Rinse, repeat, and refine as needed.” Approach applied to the Globe’s masthead. 
• Content for all with an appropriate experience.
• Design the basic experience and then scale up.
• Always ask “is this content (critical to the reader) or an enhancement?” For example: web fonts. They decided to quarantine font usage below a certain breakpoint.

We can’t keep up with the pace of innovation on mobile. When you write down the breakpoints you’ve already outdated yourself. We can’t anticipate what’s ahead!

We need more perspective when we think about “mobile” and “desktop” and “mobile sites” and “responsive sites.”

Don’t close yourself off to the creative solution. It’s about your audience, not the devices that they have in their hands.