The next talk here at An Event Apart in Boston is one I’ve really, really, really been looking forward to: it’s a presentation by my hero Ethan Marcotte. I’ll try to liveblog it here…
The talk is called The Responsive Web Designer’s Workflow but Ethan begins by talking about his grandmother. She was born in 1910 and she’s still in great shape. This past Christmas she gave Ethan a gift of three battered and worn books that were her father’s diaries from the 1880s. They’re beautiful. The front is filled with almanac data but the most fascinating part is the short updates, mostly about the weather. They’re imperfect with crossing out and misspelling but they’re very visceral.
Stories are important. Passing on stories is an important part of what makes us human. Ethan illustrates this by showing some of my tweets about eating toast.
Newspapers are an odd paradox. For one day they are filled with the most important stories but just a day later they lose that immediate value. Take the Boston Globe, for example. It has a long history. Looking at old copies, the artefact itself is quite lovely.
But it’s a changing industry. This year nearly half of American adults will receive their news through mobile devices. The industry is trying to catch up with various strategies: separate mobile sites, iPad apps, and so on.
Ethan’s response last year was to talk about Responsive Web Design, which breaks down into three parts:
- flexible grids,
- flexible images and media and
- media queries.
The idea has taken hold and lots of very talented designers have adopted a responsive approach.
Well, today you can add one more site to the list: The Boston Globe, relaunching with a responsive design this Summer.
Up ‘till now, responsiveness has been about layout—that’s different to design. As Paul Rand wrote:
Design is the method of putting form and content together.
There were three firms involved in the Globe redesign: The Boston Globe itself, Upstatement, and Filament Group. Ethan was in that third group. Everyone’s got a wide range of skills. It’s tempting to divide skills into visual design and interaction design. But that distinction is often a reflection of the job roles at design agencies.
Is the traditional design agency process part of the problem? We have this linear approach: discover, design, develop, deliver—like a relay race. But for a responsive site, you can never really say what the final deliverable is. You could try to come up with Photoshop comps for all possible layouts but that just doesn’t scale.
Then there’s the tools. The first thing you do when you open up Photoshop is to create a fixed canvas size in pixels. This is what Jason was railing against in his quest for a real web design application.
For the responsive workflow, what’s needed is …design-o-velopment (no, not really).
The group convenes. The designers introduce the comp, explaining their decisions. The developers ask lots of questions. Where does content come from? How does the user interact with it? And the important one: how is going to look on a smaller screen? How should it adapt? They discuss the various input modes: mouse, touch, keyboard, voice. The questions are more important than any particular answers at this point.
“What value does this content have for our mobile users?” That question can be best answered by adopting Luke’s Mobile First approach. Narrow screens force us to focus.
Look at an article on AOL. The mobile version is great. The desktop version is cluttered. We drown the content. “Mobile” has become a synonym for “Less” and “Desktop” has become a synonym for “More.”
If you were asked to describe a mobie user, you might think of someone on the go, easily distracted. Whereas you may imagine a desktop user as sitting comfortably with plenty of screen size and attention. But it’s not that simple. People use their mobile devices in all sorts of environments at all sorts of times.
Making decisions about what people want based simply on the device they are using is a little bit like telepathy. Context doesn’t necessarily determine the user’s intent.
Even a good mobile experience, like Flickr’s, gets things wrong. Content is withheld from visitors with mobile devices. Lots of people click on that “desktop version” link because they feel they are missing out.
When you practice Mobile First, you’re making a commitment to the content. Everything that’s displayed on the page deserves to be there. Mobile First really means Content First.
Now you prototype like wild. A pixel-based tool like Photoshop is limited in what it can convey so you need to start making prototypes from the outset.
Figuring out the proportions for a flexible grid is fairly straightforward: target divided by context equals result. Slot in your pixel values to that equation and you get a percentage that you can declare in your stylesheet. Now you’ve got a liquid layout.
Resizing images is simple:
img { max-width: 100%; }
For important large images you can use Scott Jehl’s script to swap out the image src attribute based on the viewport size. It defaults to the smaller-sized image.
Finally, there’s the media queries. There’s a lot of devices to test on. Fortunately the Filament Group are involved with jQuery Mobile so they’ve already got a lot of devices. But rather than designing for specific devices, they searched instead for commonalities, like screen sizes. These are common breakpoints so they are what’s used in the media queries.
There’s very good browser support for media queries but there are still some laggards. Scott Jehl’s other script, Respond, bootstraps media query support using JavaScript.
It’s worth pointing out that they don’t have comps for all these breakpoints: they’re designing in the browser at this point. But they take these prototypes back to the designers so that they can vet them. They ask more questions. How well does the layout adapt? Do individual elements still feel usable? Most importantly, do any page elements need additional design work?
The masthead of the Boston Globe was a tricky problem. The result from prototyping wasn’t satisfactory so the designers came up with a different solution. As the layout shrinks, the masthead functionality changes. This solution wouldn’t have been possible without reconvening to review the prototype. So they’re designing in the browser but what they’re designing are design recommendations.
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.
Conditional loading in JavaScript is very useful for serving up the right functionality to the right devices.
Let’s pull back a bit before we wrap up.
Just as there has been discussion “Mobile” and “Desktop”, there has also been discussion of “Mobile” and “Responsiveness.” A lot of the discussion is around butting heads between idealism and realism. Ultimately the decision about whether to make “Mobile” site or a “Responsive” site is more about the designer’s philosophy than about devices.
This has been quite a day for announcements. As well as the forthcoming Boston Globe redesign, Ethan also has a publishing date for his book: Responsive Web Design will be published by A Book Apart on June 7th.