đ Celebrating 10 years of Responsive Web Design
Jun 11, 2021
𼳠Ten Years of RWD with Ethan Marcotte
Well, that was fast! We're celebrating ten years of Responsive Web Design this week with a fresh take from Ethan Marcotte. (Happy tenth to that little yellow book!) Take a look back (and ahead!) as Ethan reflects on what inspired Responsive Web Design, what we need to reckon with as designers, and how a grandmotherâs advice lives on today.Â
Â
ABA: When did you first know you wanted to write Responsive Web Design? What was the ignition spark?
Ethan Marcotte:Â Iâm not sure I can point to one specific thing, honestly.
I will say that ever since reading John Allsoppâs âA Dao Of Web Designâ early in my career, I was inspired by the idea of the web as a flexible design mediumâsomething that could be accessed from any kind of device, and rendered on any screen resolution. Even twenty years on, Johnâs article still feels like one of the most important pieces ever written about the web.
Fast forward a decade or so later, I was working on the talk that eventually became an article (and later, a little yellow book), and I didnât know what to call this technique Iâd cobbled together. But thankfully, my partner told me about this cool architectural flourish sheâd stumbled across. I started reading more about this more interactive form of architecture, then found some articles where they referred to it with a different name: responsive architecture.
Ten years on, those are the two sparks I think of first.
ABA: What has been the most significant change in the discipline of design youâve seen emerge since the book came out?
EM:Â CSS Grid Layout comes immediately to mind, I suppose. It hasnât just been a new way of building the same fluid layouts I made before: CSS Gridâs rewired the way I think about creating layouts for the web. And whatâs more, I can rely on media queries less for managing layout breakpoints. Media queries are still indispensable for my work, but Iâve loved seeing the way I use them change.
(Iâll say that if youâre looking to learn more about CSS Grid, Rachel Andrewâs resources and writing have been a massive influence on me here.)
But honestly, itâs hard to pick just one change! The responsive work I do today looks dramatically different than it did a decade ago. Itâs different than it was one year ago: I like saying that the three ingredients of a responsive designâfluid grids, flexible images, and media queriesâhavenât really changed, but everything around those ingredients have changed in a million different, wonderful ways.
ABA: Why was it important to put this book out, with its specific thesis, in 2011?
EM:Â I mentioned John Allsoppâs âA Dao Of Web Designâ before, but for the decade or so that followed, our industry wasnât really thinking about the web in device-agnostic terms. And we definitely werenât designing flexibly: by and large, we were creating pixel-precise layouts that were optimized toward desktop displays, and usually targeting a minimum screen resolution.
This worked great until mobile broke everything.
Of course, âmobileâ didnât really break anythingâit just showed us what weâd broken. By assuming that we could control how, when, and where our designs were accessed, weâd been limiting the reach of our designs, and pushing away an entire class of users.
This is basically how the concept of âresponsive web designâ got its start. A couple years before the article came out, Iâd been working on a string of projects that asked me to work on separate, standalone mobile websites. Not even that, really: Iâd often be asked to provide âan iPhone website.â Of course, those sites would invariably be stripped-down, feature-limited versions of the desktop websiteâthe ârealâ website. And something about that push for âmobileâ websites didnât quite feel right to me. It definitely didnât feel sustainable:âI mean, were we supposed to keep creating separate websites for every new device that came along?
By this time, Iâd already written about a technique for creating complex and flexible grid-based layouts; others had already popularized approaches for making flexible images; and when I first read about media queries, well, I realized those three ingredients might make for something really, really interesting.
ABA: Whatâs one thing you want designers to reckon with right now?
EM: Oh, this is a good question, but itâs a hard one.
If I can pick just one thing, itâd be for designers to take a hard, critical look at the biases baked into our design tools. Because every tool has a set of assumptions baked into it, which can easily shape the design of products built with them. For example, if a design tool only works properly when thereâs a persistent network connection, what kind of expectations does that create in the design team? Will they start to assume their users will always be connected too? Does an image production workflow only produce high-density images? If so, how does that impact any users who might be on limited or PAYGO data plans?
The point of these questions isnât to find fault with the applications we use. Itâs in effort to surface any implicit assumptions and biases baked into the software and, in doing so, to recognize that every tool shapes the task. Our design tools change the design of our products and, at times, they can change us.
If I could pick two things? Well, Iâd urge designersâas well as developers, researchers, content strategists, and all other workers in the tech industryâto organize their workplaces, and to form unions.Â
ABA: Is there anyone youâre following the work of right now, who youâd recommend others pay attention to?
EM:Â Oh my goodness, so many people are doing work I find inspiring. Iâll give you two names, but please keep in mind that the list is much longer than that.
First, Lynn Fisher! Every year she does a stunning responsive refresh of her homepage, and Iâm always in awe of what she pulls together. Seriously, take a spin through her redesign archive, and resize your browser window on each of her designs. Personally, I think each piece is a little responsive masterpiece. But for me, itâs not just about the (considerable) skill involvedâthereâs so much playfulness at the heart of each redesign. And I love that: for me, Lynnâs redesigns are a reminder that modern responsive design doesnât need to be constrained by frameworks. There are plenty of opportunities for experimentation and joy, if we look for them.
Secondly, Iâm also inspired by Resilient Coders, a Boston-based non-profit working to address the tech industryâs deep-seated diversity and equity issues. They train young people of color to become software engineers, and then they connect graduates with good, well-paying jobs in the tech industry. Iâve volunteered with them a bit over the last few years, and Iâm so impressed by the bootcamp, by the students Iâve worked with, and by the team and community that Leon Noel and David Delmar SentĂes have built. If your companyâs in a position to hire a graduate, do; and if you can donate to Resilient Coders, theyâre doing important work thatâs worth supporting.
ABA: What is your go-to source of inspiration when youâre trying to get out of a creative rut?
EM: I can hear a few close friends rolling their eyes right now, but I listen to Ursula Franklinâs Massey Lectures when Iâm feeling stuck. I dearly, dearly love reading the book that the lectures eventually turned into, but Franklinâs voice has a bracing, inspiring quality to it. But however you choose to read or hear her words, theyâre a remarkable look at technology not as an abstract concept, but as a social forceâone that shapes peopleâs lives.
ABA: Is there a fear that keeps you up at night? What is it?
EM: Grizzly bears.
ABA:Â What tool, object, or ritual could you not live without to get you through a week?
EM:Â I go running three times a week. I am, to be clear, not a fast runner, much less a âgoodâ one. (Whatever that is.) But in the last few years Iâve gradually worked up to running longer distances, and Iâm proud of that. And getting some time outsideâwith a good audiobook in my ears, with no screens in sightâhas become something I really look forward to.
ABA: Is there a piece of professional or life advice youâve gotten that has always stuck with you? What is it?
EM:Â My grandmother once told me, âYou should offer praise in public, and offer gentle criticism in private.â She said a lot that shaped the way I approach the world, but I think about that particular suggestion a lot.
â˘â˘â˘
Learn more about all our authorsâcheck out the rest of our Meet the Author series!
Have you picked up your copy of Responsive Web Design yet? Complete the set when you pair it with The New CSS Layout and save 10% (15% when you buy paperbacks & ebooks)!
Â