Evolving Responsive Web Design
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 joy of content creation (and the hazards of building in someone else’s sandbox)
AN INSPIRING STORY of content creation, which is also, although this particular tale ends happily, a warning about the hazards of building in someone else’s sandbox.
Stampylongnose makes wonderful videos about Minecraft (among other things) and is the first independent content creator in my young daughter’s world. She follows him like you followed your first favorite blogger.
In “1 Million Subscribers Special – From Then To Now,” he shares how he became an independent video producer on the web—how he lost everything when Google arbitrarily pulled the plug—and how the community that loved him, and one great Google admin, fought to restore his work.
“The independent content producer refuses to die.”
This is a Website
LAST NIGHT at dinner, my friend Tantek Çelik (and if you don’t know who he is, learn the history of your craft) lamented that there was no longer any innovation in blogging—and hadn’t been for years. I replied by asking if anyone was still blogging.
Me, I regret the day I started calling what I do here “blogging.” When I launched this website in 1995, I thought of what I was doing as “writing and publishing,” which is the case. But in the early 2000s, after Rebecca Blood’s book came out, I succumbed to peer pressure. Not from Rebecca: Rebecca is awesome, and still going strong. The peer pressure came from the zeitgeist.
Nobody in the mainstream had noticed a decade of independent content producers, but they woke up when someone started calling it “blogging.” By the way, what an appalling word that is. Blogging. Yecch. I held my nose at the time. But I also held my tongue. If calling your activity blogging was the price of recognition and attention, so be it, my younger self said to itself.
Did Twitter and Facebook kill blogging? Was it withdrawal of the mainstream spotlight? Did people stop independently writing and publishing on the web because it was too much work for too little attention and gain? Or did they discover that, after all, they mostly had nothing to say?
Blogging may have been a fad, a semi-comic emblem of a time, like CB Radio and disco dancing, but independent writing and publishing is not. Sharing ideas and passions on the only free medium the world has known is not a fad or joke.
We were struggling, whether we knew it or not, to found a more fluid society. A place where everyone, not just appointed apologists for the status quo, could be heard. That dream need not die. It matters more now than ever.
Yes, recycling other people’s recycling of other people’s recycling of cat gifs is fun and easy on Tumblr. Yes, rubbing out a good bon mot on Twitter can satisfy one’s ego and rekindle a wistful remembrance of meaning. Yes, these things are still fine to do. But they are not all we can do on this web. This is our web. Let us not surrender it so easily to new corporate masters.
Keep blogging in the free world.
Insites: The Book Honors Web Design, Designers
“INSITES: THE BOOK is a beautiful, limited edition, 256-page book presented in a numbered, foil-blocked presentation box. This very special publication features no code snippets and no design tips; instead, 20 deeply personal conversations with the biggest names in the web community.
“Over the course of six months, we travelled the US and the UK to meet with Tina Roth Eisenberg, Jason Santa Maria, Cameron Moll, Ethan Marcotte, Alex Hunter, Brendan Dawes, Simon Collison, Dan Rubin, Andy McGloughlin, Kevin Rose and Daniel Burka, Josh Brewer, Ron Richards, Trent Walton, Ian Coyle, Mandy Brown, Sarah Parmenter, Jim Coudal, Jeffrey Zeldman, Tim Van Damme, and Jon Hicks.
“We delved into their personal journeys, big wins, and lessons learned, along with the kind of tales you’ll never hear on a conference stage. Each and every person we spoke to has an amazing story to tell — a story we can all relate to, because even the biggest successes have the smallest, most humble of beginnings.” — Insites: The Book
I am honored to be among those interviewed in this beautiful publication.
Insites: The Book is published by Viewport Industries in association with MailChimp.
Leo Laporte interviews JZ
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.
Filed under: business, businessweek, client management, client services, clients, content, Content First, CSS3, Curation, Dan Benjamin, Design, E-Books, Ethan Marcotte, findability, Google, Happy Cog™, HTML, HTML5, Jeremy Keith, Microsoft, podcasts, Publishing, Real type on the web, Redesigns, Responsive Web Design, Standards, State of the Web, The Big Web Show, Usability, User Experience, UX, Web Design, Web Design History, Web Standards, Zeldman
Product Management for the Web; Beyond Usability Testing
IN ISSUE NO. 357 of A List Apart for people who make websites:
by DEVAN GOLDSTEIN
To be sure we’re designing the right experience for the right audience, there’s no substitute for research conducted with actual users. Like any research method, though, usability testing has its drawbacks. Most importantly, it isn’t cheap. Fortunately, there are other usability research methods at our disposal. The standouts, expert review and heuristic evaluation, are easy to add to a design and development process almost regardless of budget or resource concerns. Explore these techniques, learn their advantages and disadvantages, and get the low-down on how to include them in your projects.
by KRISTOFER LAYON
Whether we prototype, write, design, develop, or test as part of building the web, we’re creating something hundreds, thousands, or maybe even millions of people will use. But how do we know that we’re creating the right enhancements for the web, at the right time, and for the right customers? Because our client or boss asked us to? And how do they know? Enter product management for the web—bridging the gap between leadership and customers on one side, and the user experience, content strategy, design, and development team on the other. Learn to set priorities that gradually but steadily make your product (and the web) better.
SINCE 1998, A List Apart has explored the design, development, and meaning of web content, with a special focus on web standards and best practices.
Illustration by Kevin Cornell for A List Apart Magazine.
ENJOY A LIST APART’S SPECIAL two-part issue on digital publication standards.
by NICK DISABATO
ebooks are a new frontier, but they look a lot like the old web frontier, with HTML, CSS, and XML underpinning the main ebook standard, ePub. Yet there are key distinctions between ebook publishing’s current problems and what the web standards movement faced. The web was founded without an intent to disrupt any particular industry; it had no precedent, no analogy. E-reading antagonizes a large, powerful industry that’s scared of what this new way of reading brings—and they’re either actively fighting open standards or simply ignoring them. In part one of a two-part series in this issue, Nick Disabato examines the explosion in reading, explores how content is freeing itself from context, and mines the broken ebook landscape in search of business logic and a way out of the present mess.
by NICK DISABATO
The internet is disrupting many content-focused industries, and the publishing landscape is beginning its own transformation in response. Tools haven’t yet been developed to properly, semantically export long-form writing. Most books are encumbered by Digital Rights Management (DRM), a piracy-encouraging practice long since abandoned by the music industry. In the second article of a two-part series in this issue, Nick Disabato discusses the ramifications of these practices for various publishers and proposes a way forward, so we can all continue sharing information openly, in a way that benefits publishers, writers, and readers alike.
Illustration by Kevin Cornell for A List Apart.
Readlists: behind the scenes
FROM THE HOME PAGE of today’s newly announced, totally disruptive, completely free product powered by Readability: “What’s a Readlist? A group of web pages—articles, recipes, course materials, anything—bundled into an e-book you can send to your Kindle, iPad, or iPhone.”
For some time now, people who miss the point have seen Readability as an app that competes in the read-it-later space. That’s like viewing Andy Warhol as a failed advertising art director. Readability is a platform that radically rethinks how we consume, and who pays for, web content. It monetizes content for authors and its technology is available to all via the API. It scares designers, angers some advertisers. Its transformative potential is huge. Readlists are the latest free product to manifest some of that potential.
With Readlist, anyone can create ebooks out of existing web content. It’s easy. Sign in with your Readability account or sign up for one, and start making books of your favorite web articles.
There are still some bugs being worked out, but hey.
I was honored to beta test the product and create one of the first Readlists, along with Erin Kissane, Anil Dash, Aaron Lammer, David Sleight, and Chris Dary.
Disclaimer: I am on the advisory board of Readability and cofounded The Deck advertising network with Jim Coudal and Jason Fried. Readability removes clutter (including ads) from the reading experience; The Deck sells ads. Conflict of interest? Here’s another: I design content websites so as to make Readability unnecessary (because I design for readers); yet I strongly support Readability as a platform and above all as a web idea that is at least 15 years overdue. Either designers will design for their end-users, or third-party apps will remove designers from the transaction. As a designer, I’m not afraid of that. Rather, it inspires me.
Filed under: Design, Platforms, Products, Publications, Publishing, Real type on the web, Respect, Responsibility, Startups, State of the Web, The Essentials, The Profession, This never happens to Gruber
Mike Monteiro’s “Design Is A Job” is finally available to buy or preview.
CO-FOUNDER of Mule Design and raconteur Mike Monteiro wants to help you do your job better. From contracts to selling design, from working with clients to working with each other, his brief book Design Is A Job is packed with knowledge you need to know. This is one of the most in-demand titles we at A Book Apart have yet published, and the long, long wait for its release (and yours) is finally over!
— Enjoy an exclusive Preview of Design Is A Job in Issue No. 348 of A List Apart, for people who make websites.
— Buy Design Is A Job directly from the makers at A Book Apart.
Also of interest:
- Watch F*ck you. Pay Me, a presentation by Mike Monteiro to San Francisco Creative Mornings, 25 March 2011. (Video, 38:40.)
- Listen to Big Web Show No. 59: Jeffrey Zeldman talks with Mike Monteiro of Mule Design. (Audio, 54 minutes.)
- Follow @mike_ftw on Twitter.
- Pay attention to Mule Design Studio.
CSS & Mobile To The Future | Embrace Users, Constrain Design | An Event Apart Seattle 2012 Day II
TUESDAY, 3 APRIL 2012, was Day II of An Event Apart Seattle, a sold-out, three-day event for people who make websites. If you couldn’t be among us, never fear. The amazing Luke Wroblewski (who leads a day-long seminar on mobile web design today) took excellent notes throughout the day, and shares them herewith:
The (CSS) Future is Now – Eric Meyer
In his The Future is Now talk at An Event Apart in Seattle, WA 2012 Eric Meyer talked about some of the visual effects we can achieve with CSS today. Create shiny new visual elements with no images using progressive enhancement and CSS that is available in all modern browsers.
A Philosophy of Restraint
- Simon Collison
In his A Philosophy of Restraint talk at An Event Apart in Seattle, WA 2012 Simon Collison outlined his design philosophy and how he applies it to web projects. Embrace constraints; simplicity and complexity; design aesthetic; design systems as foundations that prepare us for future projects and complexity; affordances and type; focus and content; audit and pause — prevent catastrophic failures and shine a new light on what you’ve learned with each project.
Touch Events – Peter-Paul Koch (PPK)
In his Touch Events talk at An Event Apart in Seattle, WA 2012 Peter-Paul Koch talked about touch support in mobile browsers and how to handle touch events in web development. Includes a ranking of current mobile browsers; interaction modes in mobile versus desktop (mouse) and keyboard — how do we adjust scripts to work with touch?; touch events; supporting modes; event cascade; and “stick with click.”
Mobile to the Future – Luke Wroblewski
Alas, Luke could not take notes on his own presentation. Here’s what it was about: When something new comes along, it’s common for us to react with what we already know. Radio programming on TV, print design on web pages, and now web page design on mobile devices. But every medium ultimately needs unique thinking and design to reach its true potential. Through an in-depth look at several common web interactions, Luke outlined how to adapt existing desktop design solutions for mobile devices and how to use mobile to expand what’s possible across all devices.Instead of thinking about how to reformat your websites to fit mobile screens, attendees learned to see mobile as way to rethink the future of the web.
What’s Your Problem? – Whitney Hess
In her What’s Your Problem? Putting Purpose Back into Your Projects talk at An Event Apart in Seattle, WA 2012 Whitney Hess outlined the value of learning about opportunities directly from customers. Understand the problem before designing the solution. Ask why before you figure out how. There is no universal solution for all our projects, we need to determine which practices are “best” through our understanding of problems. Our reliance on best practices is creating a world of uniform websites that solve no one’s problem. Leave the desk and interact with people. Rather than the problem solver, be the person who can see the problem.
Properties of Intuitive Pages
- Jared Spool
At An Event Apart in Seattle WA 2012, Jared Spool walked through what makes a design intuitive, why some users need different treatment, and the role of design. Current versus acquired knowledge and how to bridge the gap (how to train users, thus making your site or app “intuitive”). Redesigns and how to avoid disaster. Design skills. The gap between current knowledge and target knowledge is where design happens. Why intuitive design is only possible in small, short iterations.
Day III begins in 90 minutes. See some of you there.
Photos: AEA Seattle Flickr pool or hashtags #aea and #aeasea on Instagram.
Filed under: An Event Apart, Appearances, CSS, CSS3, Design, development, eric meyer, HTML, HTML5, Ideas, industry, Information architecture, IXD, Platforms, Publishing, Redesigns, Responsive Web Design, Scripting, Standards, State of the Web, User Experience, UX, Web Design, Web Standards