Ethan Marcotte: Responsive Content Design – Episode 132

Podcast: Play in new window | Download

Subscribe: Apple Podcasts | Google Podcasts | Stitcher | TuneIn | RSS

About a dozen years ago, as designers grappled with the need to serve similar experiences to both desktop and mobile computer users, Ethan Marcotte developed the practice of responsive web design.

I think we’re at an analogous juncture now in content design. The need to serve similar content experiences across a variety of channels, devices, and touchpoints – and in a variety of contexts, like personalization – reveals the need for more flexible and adaptive content-design practices and systems.

Responsive web design was adopted almost immediately and remains relevant and important today. “Responsive content design” is just my way of describing a strategic practice that many others (hello, Rahel, Noz, Val, Cruce, Ann, Scott, et al.) have already articulated and developed in different ways.

It was fun and instructive to noodle on this topic with Ethan.

We talked about:

• the origin story of responsive web design
• how content was a first-class citizen in his early responsive web design work
• Ethan’s take on accessibility: “a sign of a job done right”
• a reminder that even in developed countries a lot of people are still “accessing the internet is over a spotty network connection on a mobile device”
• how to account for non-visual media like chatbot content in design systems
• how to make design systems not necessarily responsive, but certainly flexible
• the importance of having design principles drive design-systems decisions
• how every design org has a design system whether they call it that or not

Ethan’s Bio

Ethan Marcotte works at the intersection of design and front-end development, to help organizations design and build sites and services that can be accessed by everyone, everywhere. Notably, he introduced the world to responsive web design.

Video

Here’s the video version of our conversation:

Podcast intro transcript

This is the Content Strategy Insights podcast, episode number 132. I usually prepare pretty thoroughly for these interviews. This episode is a little different. I had scheduled a Zoom chat with Ethan Marcotte to noodle on an idea that had recently occurred to me about “responsive content design.” As we started our conversation, we agreed that it might be worth recording. It definitely was. As usual, Ethan was a fount of insights and ideas about designing great experiences and building systems that support their creation.

Interview transcript

Larry:
Hey everyone. Welcome to a special episode of the Content Strategy Insights podcast. I woke up a few weeks ago with this crazy idea in my head and I said, “I know a guy who might be able to help me noodle on this.” So, I’m talking today with Ethan Marcotte. You might remember Ethan. He started this thing called responsive web design. What was, 11 or 12 years ago now? Is that-

Ethan:
Yeah, yeah, back in the Stone Age, I think. Yeah, that sounds about right. Yeah.

Larry:
Well, and the reason I wanted to talk to you about this, because it seems like we’re at some maybe analogous juncture. Back then, I think it was mobile and just the need to have designs work on different devices and in different contexts. There’s stuff going on in the content world now with personalization and the need for omnichannel strategies and these kinds of things that are just… Anyhow, when I woke up with that idea of responsive content design, I think that’s what was going on. I honestly have no idea what I was thinking about. But anyhow, I just wanted to noodle on that with you. So, maybe start, can you tell me a little bit about where responsive web design came from?

Ethan:
I can give you my level best, Larry. But man, it started pretty early on in my career, when I read this really great essay by John Allsopp called A Dao of Web Design. And in it, he was basically talking about how the web as a design medium was kind of at a weird tension point because it was sort of following on from centuries of graphic design in the printed page. He was basically saying, “Here’s this brand new medium, and what we’re trying to do from a design perspective is trying to replicate the constraints of the page.” We’re drawing fixed little boxes on the screen, filling them with content and imagery and stuff like that, but more or less, treating it like it’s an extension of Photoshop or Illustrator.

Ethan:
And so he was basically arguing that the web is this completely flexible design medium. We can’t control when or how somebody’s going to access our content. They could be on a massive monitor or a tiny one. They could have really poor internet connection. And we have to think more flexibly as designers. We have to plan for that flexibility.
But he wrote this back in 2000, I think. The tools that we had for web design were pretty rudimentary. So, when I coined the term, responsive design, it was basically sort of, again, mobile as you said, it was kind of exploding. And so I was just like, we now have the technology to capitalize on this old idea of thinking about the web more flexibly. So, why not think about experiences that could be shown to somebody on desktop or on mobile or any kind of device that they have? And really just think about one flexible experience that can respond to the changing environment that it’s in. So, that’s kind of how it started.

Larry:
It occurs to me now that you were probably thinking about content as part of that, or was that an explicit part of that at all? Or?

Ethan:
I mean, I’m a designer by trade, and I think it wasn’t explicit, in that it wasn’t a big formal part of the article when I coined the term. But it was really something like, we need to stop thinking about mobile users and desktop users as having dramatically different needs by default, simply because they have differently sized screens. We want to share the same information, the same content with anybody.

Ethan:
The first large-scale responsive redesign was the Boston Globes website, which I was a design lead on, part of a large team, but I was involved with it. We pretty much very quickly decided, your readership is coming to your website at multiple points of the day, with different kinds of devices, that they are trying to read articles. They don’t necessarily care about what articles are available to them when they’re on mobile, or they don’t want to track what’s available to them when they’re sitting at their desktop at work. They really just want to have access to the Boston Globe’s information. So, yeah, I mean, content was treated as a first citizen, maybe not in a formal way, but it was basically everyone wants the same information, regardless of the device that they have.

Larry:
Yeah. You’re reminding me now too, I can’t remember exactly when it was, but I’m always surprised at how early it was when NPR did their Create Once, Publish Everywhere (COPE) model. That was in the air at that same time as well. I’ve always been surprised at how little that… I was hoping that would explode, but it really didn’t right away. But responsive web design did explode. That just became the thing.

Ethan:
Yeah. Yeah, I think so. And it’s interesting because I definitely remember, maybe I’ve been hanging out with Karen McGrane too much, but I feel like the COPE model was something that was talked a lot about at that time. But folks definitely were pretty excited about responsive design.

Ethan:
I will say that one of the things that was really helpful in conversations, both with the Globe, but every client that I’ve worked with since, is this idea of designing for mobile first. Because I think responsive design was kind of counter to this idea that we have to present a slimmed-down view of our design and our content to folks simply because they’re on a smaller screen.

Ethan:
A very smart band named Luke Wroblewski basically said, “We’re doing that simply because we’re starting from a desktop context and then trying to make everything fit on mobile. Instead, our audiences are becoming more mobile-focused. They’re becoming predominantly mobile-only. So, why not treat mobile as a first-class citizen? Why don’t we start there and think about what’s the information that’s best for the small screen user, and then use that as our foundation?”

Ethan:
So, that at least for me, has always been one of the ingredients of a really successful responsive redesign is thinking about what’s the information that’s most valuable to your users? And working from a mobile context, and then using that to build consensus around how that’s going to look on tablet, on desktop, or any kind of device.

Larry:
All of a sudden, I’m thinking about things like accessibility, that by designing for people who have extra needs, that it’s a better experience for everyone. And it seems like that mobile-first approach may have had something like that. Is that?

Ethan:
Yeah, I think so. I mean, accessibility for me has just been like, it’s a sign of a job done right, I think. It’s really about thinking about… I don’t know, I would say mobile-first and an accessible experience are similar in that you’re trying to think about experiences outside your default view of working from the web. I’ve got a decent laptop and a decent monitor and a decent internet connection. My body can do certain things, and the way that I design a website is kind of informed by all those things.

Ethan:
But the concept of thinking about mobile first is, okay, what if somebody is working with a screen that’s 80% smaller than the one that I have? Or maybe they’re on a spotty network connection. Simply by thinking about those use cases, it’s going to make the experience better for everybody because everyone’s going to benefit from something that’s built to be lightweight and nimble and deliver as fast as possible. Something that’s going to have content that’s tailored to a smaller screen. As you expand out from that, it’s still going to be all very focused and new. So, yeah, I think absolutely, accessibility is sort of part of that in terms of thinking about just a broader range of uses, and it’s going to improve the design for everybody.

Larry:
Yeah. As you were talking also, maybe also think about just the kind of shift from over the years, especially in the content world, many if not most of us, come out of some kind of publishing background, and we’re just about pushing information out there and having it formatted and thinking about it. I think in the world of UX, it’s much more about task accomplished, but it’s just getting the info you need to do whatever it is you want to do in that moment. And it seems like that could be, was that an organizing scheme in your responsive web design work?

Ethan:
No, that’s a great question, Larry. I mean, measurement’s a tough question. It’s not something that was a big focus because at the time, it was just banging rocks together, trying to get this idea out. Because I think since then, so many other folks have really improved on the original article. There was a lot of research done at the time, sort of discussing this idea of the mobile user. We just had different device use cases, that there are tablet needs and desktop needs or mobile needs, and folks basically said, “We’re talking to our users, we’re actually running a significant amount of testing and it doesn’t really play out.”

Ethan:
So, I think it was really, for a lot of folks, responsive design was just kind of a relatively inexpensive way to design an experience that’s device-agnostic. You could very easily start from a desktop context and start hiding stuff as it gets down to smaller screens and still have a responsive website. But I think from a UX perspective, that’s going to be a subpar experience because again, by and large, audiences want the same information regardless of where they are.

Larry:
Yeah, no, that makes a huge amount of sense. It’s an argument for human-centered design. Just start with what are you trying to do? Where are you at? How can I help you?

Ethan:
Absolutely, yeah. Absolutely.

Larry:
And we’ll just create the experience that does that for you.

Ethan:
Yeah, yeah, definitely. Definitely. Yeah. I mean, we’re seeing so many discoveries in the last five to 10 years about mobile-only populations, and especially those of us who might be in a Western context, or you and I are talking in the United States, there’s sort of a temptation to think of mobile-only users as being in these far-flung lands, but there’s huge swaths of population in the United States that their only means of accessing the internet is over a spotty network connection on a mobile device. So, the fact that we’re not focusing on that, I think is a big UX opportunity that folks can really capitalize on.

Larry:
No, you’re reminding me of my first, I didn’t articulate it that way at the time, but I remember back in the late ’90s arguing with somebody about accessibility and like, “Hey, why would you turn away X percent of your audience just because they don’t have a fancy iPhone and a good Wi-Fi connection?” That’s an interesting one because you are right, as the web grows, we’ve been successful. But part of that success is we have to serve a whole bunch of different people, people all over Africa with just phones, maybe not even smartphones, but just text experiences and things like that. That seems, and I guess that’s kind of what I was thinking about with the responsiveness. You want to respond to all of your customers.

Larry:
But another thing that occurs to me too is that, whereas back then, 10 to 15 years ago, “mobile first” was sort of a good paradigm to organize things around. Nowadays, it seems like maybe “conversation first” might be a reasonable paradigm to build things around. I think of not just chatbots and voice assistants and other voice interfaces, but it just seems like the web is getting more conversational. I don’t know how you make conversation responsive and scale-ey. Have you thought about that? Or?

Ethan:
Man, I haven’t. That’s a little bit outside my bailiwick. I will say that in recent years, as I’ve been doing more design systems works with organization, both in my design practice and then since founding a consultancy with Karen McGrane and Jeff Eaton, we’ve been looking at how these organizations get their information out there. And design systems are absolutely one part of that.

Ethan:
But I think a lot of organizations have actually started thinking about some of these questions about how they formalize design around non-visual media, like conversation or chatbots? What kind of conversational patterns do we need to plan for and design around? What kinds of modes of interaction do we want to capture around a conversation, regardless of whether it’s predominantly oral, just over voice, or whether it’s going to be in a typed context on a mobile device? So, yeah, I think it’s a huge opportunity for folks to kind of think about how design, good design, can inform those experiences as well.

Larry:
Yeah, and I’ve been thinking, it’s interesting thinking about it from a content perspective. Because when I think about content, it’s just driving me nuts that I can’t dig into these big NLP-driven conversation machines and see what’s going on with the content in there. It’s very machine-learning- and NLP-driven. But at the same time, when you’re delivering content like that, there’s still the need to align with your brand voice and tone and to use the same language. Just all those things that content strategists are concerned with. And I guess the point of that, I think maybe the point of that is that there’s this, with the increasing decoupled-ness of, I’m starting to think of content as a thing we do independently, that to support everything from a good old-fashioned desktop web browser and a tablet and a phone, but also a voice assistant or a kiosk in a store, all those things. Does that evoke anything for you?

Ethan:
That really does resonate, Larry. I think one of the things that Jeff Eaton is always very good about talking about in our workshops is just some of the underlying concepts that underpin a company’s publishing system. So, for a design system, what are the nouns and verbs you’re sort of thinking about as you’re designing these patterns? What is the purpose of this component? What is it going to help you achieve as a business? What is it going to help the user achieve? What is its kind of, I guess, organizational role in a broader interface? What is its purpose, basically? I think that absolutely applies to some of the interfaces you’re talking about, regardless of whether it’s a visual component or an audio-based one, I think it still needs to tie back into some sort of underlying meaning. I think that’s absolutely a really critical organizing principle.

Larry:
When you talk about organizing principles and that kind of stuff, you are also one of the pioneers in design systems work and are doing a lot of that currently. And it seems like, I’m just, again, thinking out loud here that I wonder if we’re going to have to wait another 10 years for the content management systems I’m dreaming of because it took 10 years to get to design systems that are ensconcing the stuff that you conceived of. Maybe we’re just going to have to be patient. What do you think?

Ethan:
I mean, yeah, it’s very possible. I mean, I think design systems in general, just speaking from where I’m sitting, they’re in an interesting state of flux because I think up until now, most organizations sort of think of as a design system as this tightly-controlled, centrally managed library of interface components and design patterns that the rest of the organization subscribes to. In recent years, organizations are starting to realize that that tight control doesn’t necessarily scale across a wider organization. That instead, you really need to start thinking about, okay, what are the shared foundations that we can deploy globally? And then maybe thinking about systems that can support other systems.
One line of business might have specific design needs that they just need to organize their own design system around, which is then still informed by that central set of brand standards or foundational design patterns. So, there’s at least, there’s a conversation happening right now about systems that can bend and flex in more useful ways rather than thinking about, okay, this tight level of almost software-centric control may not necessarily actually give you the flexibility you need as an organization. So, it’s been really interesting to see that conversation happen and that shift start to happen.

Larry:
And you just exploded my brain with some real meta-ness around responsive design-system design. Sorry.

Ethan:
Yeah. Yeah. It’s a sign of quality. You can slap the responsive adjective on something. It’s definitely now a little bit spicier than it was before, but I don’t think it’s responsive design systems so much. It’s just organizations recognizing that they need a little bit more room for experimentation and room for growth, because ultimately these systems do need to bend and flex, rather than simply thinking about them as big software releases. I mean, that model may work for some organizations, but for others, where one line of business might have a dramatically different market than another, they need to operate a little bit more autonomously. And I think it’s really interesting to pair a governing model for a design system with a specific organization. Like I said, it’s been cool to see that conversation happening.

Larry:
As you talk about that, I’m reminded that there are no two organizations that are remotely identical.

Ethan:
Right, right.

Larry:
So, that need to just… And that’s not really responsive. That’s just the way the world is. But I guess the whole point of my podcast is about to democratize content strategy and content practice and content-design practice. It’s like maybe best practices is a thing, but maybe it’s just more about figuring out how to develop the practices that are going to work for you in your organization. And you’ve done way more consulting than I have. Does that mesh with your work and a bunch of different orgs?

Ethan:
Yeah, it absolutely resonates, Larry. One of the conversations that we try to have with organizations who are at some sort of transition point with their design system or their publishing systems in general, is just kind of talk to them about the principles they bring to their work. So, for me, that might be a set of design principles that an organization could then use to think about, how do we talk about design as an organization? How do we know if the feature that we’re shipping or the interface component that we’re releasing, how do we know if that measures up to the measure of quality we demand as an organization? What is the design principle that we’re sort of using to evaluate our work? I think that having those guiding principles in place are really helpful for organizations who need kind of a compass as they start embarking on a broader roadmap or they start iterating on their design system because it’s a good way to build that vocabulary internally to figure out. And how do we talk about the quality of what we’re doing? I think it’s incredibly useful.

Larry:
Yeah, no, I love that, the way you articulate that as a principles-based thing. I think some organizations ensconce those principles in things like governance mechanism things and things like that. Some places, I think it’s just culture that guides that.

Ethan:
Good point.

Larry:
Does that make sense? And I’m just trying to think of the implications that… Well, I mean that the implications of that are just all over the place for all of us in design and content.

Ethan:
Yeah. Yeah, I think that’s a great point. One of the things I’ve liked saying to organizations in the past is they’re starting to create a design system, and I think it’s helpful to sort of point out that they already have a design system today. That’s a set of products. They have interfaces. There’s a set of design standards and brand standards. Those things may not necessarily be defined or explicit or captured somewhere, but that’s still a system. You have all of these interlocking parts that have relationships to each other, and understanding where those different contexts are and how they play together and why they work together is really helpful as you start to formalize some of those processes. Yeah, absolutely. That makes a lot of sense, thinking about where things are now and talking about them a little bit more explicitly is really helpful.

Larry:
And as you’re saying that, I’m reminded of how emergent and discover-ey so much of this stuff is that… I think something you just said reminded me of the notion of ensconcing this stuff as a system or governance policies or whatever, that you’re, again, depending on the organization you’re in, it’s either, some places are game for dictatorial or not dictatorial, but more prescriptive kind of schemes, and others, you used the word subscription earlier. I think often of design systems is like they’re either often either adopted or governed. But I think subscription is a great way to think about it because it’s like, “Hey, I created this neat system. Do you want to subscribe to it?” Is that kind of how you’re thinking about that?

Ethan:
Yeah, yeah. I love that, Larry. Yeah, I really like that a lot because I think every design system that I’ve worked on, there’s this notion of, like, consumers, the folks that are working with the system, they’re shipping products based on the system, that they are basically subscribing to the central system for updates. Then there’s also a layer of contributors as well who are managing the system, extending the system. And in some cases, I mean, those two classes might overlap. You might have folks that are working with the system, but also feeding contributions back up to the system based on market needs or audience needs or what have you. Again, understanding where those two different groups are and how they relate to each other and who’s in those groups helps build a better system in general. So, yeah, that makes a lot of sense.

Larry:
Yeah. Systems as matchmaking mechanisms that are as kind of… Well, no. Well, Ethan, hey, I’m going to go ahead and just stop recording on this because this was just for folks who are watching or if we end up airing this, Ethan and I decided we just wanted to chat about this. We thought, “Hey, let’s capture it and see if it works as a podcast episode.” So, you may or may not see this in the wild, but thanks for indulging me in this experiment, Ethan.

Ethan:
Thank you, Larry. It was great talking with you, as always.