IT WAS FIVE years ago today, Ethan Marcotte taught the web to play…nicely with all kinds of devices in all kinds of contexts. And he did it live on stage at An Event Apart Seattle 2010. Watch the video that changed the web forever.
In What We Mean When We Say “responsive” and Defining Responsiveness, Lyza Danger Gardner and Jason Grigsby cut to the heart of a disagreement I had three years ago with Ethan Marcotte, the creator of Responsive Web Design and author of Responsive Web Design, a book I published in 2011.
Ethan told the world that Responsive Web Design required, and was defined by, fluid layouts, flexible images, and media queries. All three elements had to be present. If they weren’t using all three, you might be doing something interesting, but you were most definitely not doing Responsive Web Design.
Ethan invented all of this. Without him, we would likely be arguing whether it was time to consider 1280 pixels the new default fixed width for all desktop websites, and sending anything that wasn’t a desktop browser to a function- and content-limited “mobile site” whose URL began with the letter m. Ethan is a brilliant, multi-talented innovator; I am but the shadow of a hack. And yet, before he began creating his book, midway through the writing, and even a year after I published it, I continued to urge Ethan to rethink #RWD as “a bigger idea”—a concept rather than a single set of techniques.
I’m no genius. What I meant by “bigger idea” was limited to the notion that we’d one day be able to create responsive layouts with different techniques—so let’s not restrict the concept to a particular execution. I wasn’t thinking about other meanings of responsive, wasn’t considering problems of responsive content, and so on. I’m not that forward-thinking and it was three freaking years ago, come on.
I lost my gentle argument with Ethan, so the industry is having it now. And that’s just as it should be. Everything worked out for the best. Here’s why:
If Ethan hadn’t included three simple executional requirements as part of his definition, the concept might have quickly fallen by the wayside, as previous insights into the fluid nature of the web have done. The simplicity, elegance, and completeness of the package—here’s why, and here’s how—sold the idea to thousands of designers and developers, whose work and advocacy in turn sold it to hundreds of thousands more. This wouldn’t have happened if Ethan had promoted a more amorphous notion. Our world wouldn’t have changed overnight if developers had had too much to think about. Cutting to the heart of things and keeping it simple was as powerful a creative act on Ethan’s part as the “discovery” of #RWD itself.
We’ve only become ready to think about things like “responsible” responsive design, adaptive content, and a standard approach to responsive images now that we have built our share of first-generation responsive sites, and encountered the problems that led to the additional pondering. Baby steps. Brilliant baby steps.
Some commenters want to use initial-capped Responsive Web Design to mean responsive design as Ethan first defined it, and lowercase responsive design to mean an amorphous matrix of exciting and evolving design thinking. Lyza says soon we’ll stop saying Responsive altogether, a conclusion Andy Clarke reached three years ago.
Me, I like that Ethan stuck to his guns, and that the classical definition will always be out there, regardless of how web design evolves thanks to it. Kind of like there’s HTML 5, a defined and scoped W3C specification, and HTML living standard, an evolving activity. Our industry needs roots and wings, and, lucky us, we’ve got ‘em both.
THE GOAL of a “responsive images” solution is to deliver images optimized for the end user’s context, rather than serving the largest potentially necessary image to everyone. Unfortunately, this hasn’t been quite so simple in practice as it is in theory.
In Big Web Show № 112, I sit down with Mat Marquis, chair of the W3C Responsive Images Community Group, to discuss guidelines for responsive images in multi-device design. We talk about the history, theory, and multi-leveled challenge of responsive images, the path to standardization, and what browsers will do next.
URLs in this Episode
DESIGNERS. WE LOVE CANVASES. It’s what we know. Even the cave wall had predictable, fixed dimensions. On the web, in the past few years, we’ve finally had to acknowledge that the canvas is not fixed, that each user’s canvas is different, and that fixed-width design—while safe and comfortable because it’s what we know—really doesn’t make sense in the world of HTML, and probably never did. We’ve spent the past two or three years rapidly learning (and sharing) new ways of designing.
But while we were unwrapping ourselves from the notion of a fixed canvas on the web, many of us were gleefully tucking into a fixed canvas in Apple’s world of the iPhone and iPad. True, the iPad had more pixels than the original iPhone—an advantage also enjoyed by later iPhone models with their Retina displays. But they shared easily interchanged aspect ratios (4:3 for the iPad and 3:2 for the iphone), enabling designers to design right to the canvas.
Apple’s fixed canvas wasn’t just a designer’s security blanket. It enabled us to craft a certain kind of polished experience right to the device. We laughed (or cried) at the Android with its 500 “standard” breakpoints and counting. Apple had given us a fixed-width sandbox and we built castles in it.
Well, goodbye to all that.
The end of fixed aspect ratios
With the iPhone 5’s switch to a 16:9 aspect ratio, and given the unknown aspect ratio of the upcoming iPad mini, “we’re going to see a big change in a certain type of iOS app—the one designed for the device,” Craig Grannell predicts in today’s reverttosaved.com:
[Veteran developer John] Pickford summed it up by stating his approach would no longer depend heavily on screen shape, and I’ve heard similar from other developers, both of apps and games although especially the latter. In a sense, this could be a good thing—freeing up iOS from the constraints of specific screen shapes opens up developers to whatever Apple throws at them next and should also make apps simpler to port to competing platforms. But it also impacts heavily on those tightly crafted experiences that were designed just for your iPad or just for your iPhone. Having all the action take place only in the very centre of a screen, because a developer cannot guarantee what device you’re using, or, worse, carving out a viewport and surrounding it with a border, could cheapen iOS games and apps in a big way.
Perhaps I’m being pessimistic, but pre-iPhone 5, indies were already feeling the pinch. With that device and perhaps a new, smaller iPad to contend with, the shift towards more fluid and less device-specific apps seems inevitable.—Craig Grannell, iOS screen fragmentation points to a shift in app development
I share Craig’s assessment of what the change in aspect ratios portends for application design. But I believe that designers will rise to the challenge, as we have on the web; and that bright app designers will find ways to design experiences which, even if they are actually flexible behind the scenes, still feel like they were custom crafted for the device in your hand.
IN EPISODE 63 of Triangulation, Leo Laporte, a gracious and knowledgeable podcaster/broadcaster straight outta Petaluma, CA, interviews Your Humble Narrator about web standards history, responsive web design, content first, the state of standards in a multi-device world, and why communists sometimes make lousy band managers.
“NOT EVERYTHING always works in your favor when you design for the screen. Interaction design is engineering: it’s not about finding the perfect design, it’s finding the best compromise.”
A FEW GOOD LINKS from a day-long workshop by Luke Wroblewski:
- New! Off Canvas Multi-Device Layouts by Luke Wroblewski and Jason Weaver
- The EMs have it: Proportional Media Queries FTW! by Lyza Gardner
- Responsive IMGs Part 2 — In-depth Look at Techniques by Jason Grigsby
- Multi-Device Layout Patterns by Luke Wroblewski
- Off Canvas – A Multi-Device Web Layout Pattern by Jason Weaver
Responsive Video Embeds with FitVids by Dave Rupert
- RESS: Responsive Design + Server Side Components by Luke Wroblewski
- RESS, Server-Side Feature-Detection and the Evolution of Responsive Web Design by Dave Olsen
AT AN EVENT APART Boston, “Scott Jehl discussed ways we can improve web performance by qualifying capabilities and being smart about how assets are loaded in browsers [and] shared a … new tools he helped create that can help address these issues.”
Enjoy Luke Wroblewski’s notes on Scott’s talk.
“WE ARE ALL PUBLISHERS,” claims Issue No. 353 of A List Apart for people who make websites. Design books with CSS3; craft a responsive web résumé.
by NELLIE MCKESSON
While historically, it’s been difficult at best to create print-quality PDF books from markup alone, CSS3 now brings us the Paged Media Module, which targets print book formatting. “Paged” media exists as finite pages, like books and magazines, rather than as long scrolling stretches of text, like most websites. With a single CSS stylesheet, publishers can take XHTML source content and turn it into a laid-out, print-ready PDF. You can take your XHTML source, bypass desktop page layout software like Adobe InDesign, and package it as an ePub file. It’s a lightweight and adaptable workflow, which gets you beautiful books faster. Nellie McKesson, eBook Operations Manager at O’Reilly Media, explains how to build books with CSS3.
by ANDREW HOFFMAN
Grizzled job hunting veterans know too well that a sharp résumé and near-flawless interview may still leave you short of your dream job. Competition is fierce and never wanes. Finding new ways to distinguish yourself in today’s unforgiving economy is vital to a designer/developer’s survival. Happily, web standards whiz and mobile web developer Andrew Hoffman has come up with a dandy differentiator that is just perfect for A List Apart readers. Learn how to author a clean résumé in HTML5/CSS3 that scales well to different viewport sizes, is easy to update and maintain, and will never grow obsolete.
Illustration by Kevin Cornell for A List Apart.
IN A SPECIAL ISSUE of A List Apart for people who make websites:
Then a few months ago, in response to an article at A List Apart, a W3C Responsive Images Community Group formed — and proposed a simple-to-understand HTML
picture element capable of serving responsive images. The group even delivered
picture functionality to older browsers via two polyfills: namely, Scott Jehl’s Picturefill and Abban Dunne’s jQuery Picture. The WHATWG has responded by ignoring the community’s work on the
picture element, and proposing a more complicated
img set element.
Which proposed standard is better, and for whom? Which will win? And what can you do to help avert an “us versus them” crisis that could hurt end-users and turn developers off to the standards process? ALA’s own Mat Marquis explains the ins and outs of responsive images and web standards at the turning point.