**IVAN STEGIC: **Hey everyone, you’re listening to The TEN7 Podcast where we get together every fortnight, and sometimes more often, to talk about technology, business and the humans in it. I’m your host, Ivan Stegic.

My guest today is Ethan Marcotte, an independent web designer, writer, and speaker. He coined the term “responsive web design” in a talk given at An Event Apart in Seattle in April of 2010. And I’d argue the web has never been the same since then. Ethan says that “his practice involves helping companies make beautiful things that work everywhere.” And I just love that sentiment.

Welcome to the show, Ethan. It’s so nice to have you on the show.

**ETHAN MARCOTTE: **Ivan. Thank you for having me. It’s a real pleasure to be here.

**IVAN: **Let’s start out by talking a little bit about where you are in the world right now. Where are you joining us from? What do you see outside your window?

**ETHAN: **Oh, okay, geographically. I’m thinking existentially or something.

**IVAN: **Oh, we could talk about that, too if you’d like. [laughing]

**ETHAN: **[laughing] No. I’m based in Somerville, Massachusetts, just outside of Boston. I’ve been here for, wow, about 20 years now. Right outside my window is the beautiful brown house that lives right next to mine. And the weather’s been a little monsooney lately. It’s been raining pretty hard. We had a tropical storm roll through a few days ago, and we’re still dealing with some aftershocks from that. But otherwise, I can see some nice things out my window.

**IVAN: **So, you’re in New England, which I know is where you went to college. Is that where you were born? Whereabout does your life start?

**ETHAN: **Yeah, I was born in New England. I’m from Northern Vermont, originally, from a pretty rural part of a pretty rural state. I spent the first 18 years of my life there before going to school at Middlebury College in Vermont. I haven’t been there in the last year and a half or so due to the circumstances, but it’s someplace that I try to get back and visit with some frequency because it’s just a really beautiful part of the country.

**IVAN: **And that’s, I’m assuming you went to the elementary and high school system in the city that you were growing up in?

**ETHAN: **Yeah. City is a very kind word for it. It was a very small town. It’s a very small town. The part of the country I come from is still very heavily farming focused. A lot of dairy farmers, my grandparents were dairy farmers. There’s not a lot of industry up there. There’s some logging. There’s some grain farming. But I did go to the public school system there. Well, that’s not quite true. My grade school was a small, small, little Catholic school. But then graduated from a high school of about 400 students.

**IVAN: **Intimate.

**ETHAN: **Exactly. Well, it felt big at the time, but by everyone else’s standards it was intimate. Definitely.

**IVAN: **And what did you want to be while you were a child when you were growing up? What did you want to be when you grew up? Fireman?

**ETHAN: **Yeah. Well, sure. No, astronaut and at one point ghostbuster.

**IVAN: **Ghostbuster. [laughing] I wanted to be that too.

**ETHAN: **Exactly.

IVAN: It was so awesome. Who didn’t?

**ETHAN: **I know. I might have seen that movie a few too many times in the theater when it came out. No, I ran the gamut, I think of fairly stereotypical, young American boy, professions from astronaut. I’m sure I wanted to be a Teenage Mutant Ninja Turtle at one point.

But eventually I think the things that I gravitated more toward were writing, that was a big, important, lifeline for me when I was in high school, just having a place to write my own stories, to get ideas down that weren’t constrained by assignments. I could have a place to process things and that was pretty important to me. So, going into high school, at least I had this pretty firm idea that I was going to grow up and be a writer, which is really everyone’s favorite career path, I’m sure.

**IVAN: **Did you keep a journal?

**ETHAN: **I kept a few different journals. Routines and I weren’t necessarily the thing I was best at growing up. But at least when I first started doing it my parents had invested, and this is in the middle of the eighties, there were some of the first folks that I knew of at least where I was growing up who had personal computers.

And so, a lot of the writing that I did was on these big, clunky, old desktop computers. So, there’s probably some five and a quarter inch floppy disks in some drawer somewhere that are just filled with terrible, terrible teenage writing. So, most of my journaling was electronic back then.

**IVAN: **Yeah, I remember those big clunky computers and the five and a quarter inch, and three and a half inch floppies. Oh man.

ETHAN: Absolutely. And Daisy wheel printers.

**IVAN: **Oh yeah. I think I used WordPerfect 5 and saved things to floppy disks. And I think there’s a couple of floppy disks buried in a tin can in the house I grew up in in South Africa somewhere.

**ETHAN: **Amazing.

**IVAN: **Yeah, that brings me way back. So you wanted to be a writer, then I guess, if you went and got a degree in English Lit at Middlebury? Did you go in thinking you were going to be a writer?

**ETHAN: **I did go in thinking I was going to be a writer. And I think I took exactly two creating writing courses, and then a few other, more literature-focused classes. And I think pretty early on, I just realized I really enjoyed reading, and finding my way through somebody else’s work and trying to unravel why somebody wrote something a specific way or trying to understand the context that they were writing in, whether it’s historical or political or artistic, finding out why certain authors maybe write something in response to things that they were experiencing.

There was something about trying to understand the writer’s perspective, and the purpose of a text that, at least back then I thought, was really exciting. And so that’s, that’s sort of why the transition happened for me. I’m sure at the time as an 18 year old growing up in college who thinks he knows everything, I probably thought there was probably more of a chance of getting a job after school if I continued on with graduate studies and maybe thought about teaching.

And for most of college that was kind of my plan, to finish up undergrad and get a degree and maybe get a doctorate somewhere, but at least at the time I didn’t see following this path of trying to understand why certain things had been written in the way that they were. I didn’t see that as necessarily being mutually exclusive with continuing to be a writer if I wanted to. And it was just something that was really exciting to me at the time, so I decided to run after it.

**IVAN: **And what was your first job out of college after you did graduate?

**ETHAN: **Yeah. So, [laughing] my first job out of college was working for a tiny little dot com just outside of New York City. The reason I did that was by the time I got to senior year, I was pretty burned out on academics. And I was starting to look ahead and start to think about, Okay, well, if I did want to treat this as a career, what does that look like? And I’d been getting more involved in the department at that time, and just realizing that there’s not necessarily a promise of any kind of security that comes with this.

There has to be real fire in you to really dedicate the rest of your life to that kind of study. My thesis advisor, who’s this amazing woman named Marion Wells, really got me through that period. She said something that just really stuck with me which is, *Just take a year off from school. You don’t have to make this decision right now. Put the books away for a year and see if you miss them. *

I’d never really been given the space to do something like that before.

And I think that advice, moving away from a thing to see if there’s any kind of signal there that you might actually be missing it, that’s something I’ve come back to over and over again. So, yeah, I decided to put the books away for a year. Twenty plus years into putting the books away to see if I missed them, and I guess I haven’t yet. So, I worked for little dot com, basically. I’ve been doing some web design on the side, got a copy of Photoshop somehow and I’ve been building web pages for some organizations, and for some tiny, tiny little clients in college, and I figured I’d see if I could try to get a job working on this internet thing I’d been hearing more and more about.

**IVAN: **And so, Marion Wells gave you permission to put the books away, and you did, and then you became a lead designer. I think you were at Harvard for a long time. How does someone who goes from English Lit become a lead designer at a department at Harvard?

**ETHAN: **Yeah. So I was at Harvard for a few years. I did about a year outside of New York, and then I moved up to Boston for a studio job. And then this was about the time that in the early 2000s, there was a pretty significant industry crash, and the consulting studio that I was working for was basically starting to go through layoffs, and I was seeing more and more of my friends go away. I figured I might as well try a different industry and ended up getting a job at Harvard doing some web design for basically some educational products that were used at the university.

I was there for a few years, and I was the lead designer on a couple software teams, partly by the merit of the fact that I was the only designer on those teams. I worked with some really wonderful folks there and getting a chance to work on some of the first honest to goodness “web applications” that I’d really ever used on a regular basis, was really kind of helpful for me as a designer, because working prior to that point on a lot of brochure, heavy sites, really relatively static sites, and fairly complicated, sizable ones, but having to deal with something that could think about different user states, the different ways in which people need to think about processing information. It was really educational in a lot of ways.

**IVAN: **It feels like there was a period in the evolution of the web where, and right at the beginning, all we were really doing is listening to print designers say, Take this brochure and put it on the web. We just need to make it digital. It was okay of running a business to start, when you’re trying to make ends meet, and when you’re trying to build something. But you very quickly get to a point where, Oh, man, I really wish it was some interactivity here, it was a little bit more complex. And people were thinking about the user experience.

**ETHAN: **Totally, totally. Yeah.

**IVAN: **Did you have that same experience early on? When did that happen for you?

**ETHAN: **I’m glad you said that Ivan. I remember one of the first small company clients I worked with out of college. I remember them writing something down on a post-it note. This was somebody, I think they might have been in construction or some trade, and this is for their business. I remember them writing something down on a post-it note and handing it to me and just asking me to put that on their home screen.

It should be that easy, right? It should be something as simple as, *Okay, I have this idea and I want to put it on this internet thing I keep hearing about. *It’s sadly never been that easy, but I love that image of, All right, we should be able to perfectly translate this and put it exactly in the spot.

But I guess that transition you mentioned, I guess it happened in a couple different ways early on. One is, I mentioned that Harvard job, and that was the first time I’d worked on an application on an ongoing basis where communities, a community of learners or students who were working with us and reporting in ways in which the application was failing them. And, I’d worked on web applications before, I’d worked on large scale content sites before, but this is the first time I really had that feedback loop of, the decisions that we make on this product actually have some sort of impact on people and that design really, ultimately is a service job.

And that was helpful for me. But I think the other part too, in my studio job shortly after we moved to Boston, was about the time that I came across John Allsopp’s A Dao of Web Design. It’s one of those articles that if your listeners haven’t read it, man, I know I can’t give folks homework, but it’s one of those things that I just recommend to everybody, because I think it’s still one of the most like relevant pieces of writing about the web as a design medium today, because he is talking about that division between the printed page and the web, and saying that these are effectively completely different media that we need to design for, and that, at least when he was writing, he was arguing that we were treating the web as a printed piece of paper. We would design some dimensions in a canvas in Photoshop, and then we’d fill that canvas with stuff, and then we go about perfectly translating that picture of a web page into HTML and CSS. Well, maybe not CSS back then.

But he was basically saying that we need to think about this as a completely flexible medium, basically. That this is something that can learn from print, but shouldn’t mimic it and that by treating it as the printed page, we’re effectively limiting its capabilities and its strengths. And that just really resonated with me, because it just showed me that there’s a completely different way of thinking about design for the web that not a lot of folks are practicing.

**IVAN: **I hear what you’re saying, and I remember all the graphic designers that were trying to very quickly retool their skills, so that they could remain relevant to design for the web. And it was really tough to do that, especially if you had been doing graphic design for 20-30 years prior to that. And all that print work is drying up. I’m so glad you mentioned John Alsop, because I was just looking at his Twitter profile the other day, and I pulled it up again, and it says, great grandfather of RWD, and I couldn’t figure out what that meant. [laughing]

**ETHAN: **I saw he added that.

**IVAN: **Let’s take our listeners to what that actually means. You coined the phrase responsive web design, and we’ll get to where that came from, in just a sec. But yeah, why does it say that in his profile?

**ETHAN: **Yeah. In a lot of ways, John is right, because the first talk that I did where I coined the term responsive web design was titled, A Dow of Web Design. As somebody who’s a fan of John’s article, I was trying to resonate with that title because what he’s arguing is that the web has to be designed for adaptability. He’s not talking about responsive design as such. He’s not talking about flexible layouts necessarily, or media queries, because the tools that we had to design web pages back when John was writing were so limited, comparatively to what we have today.

But that idea of thinking about treating the design of the web is something that ultimately is controlled by the people who are accessing it. And that could be the size of the screen, the kind of browser they use, the kind of assistive technology they use.

That’s such an inversion of the model of the graphic designer, as someone who dictates the experience to the user. And that, at least for me, is what’s so revolutionary about John’s piece, is that we need to let go of that control. And I think that in doing so we can basically leverage the strength of the web to be as accessible as possible, no matter wherever or wherever you happen to be, regardless of the screen you happen to be using to access my work.

**IVAN: **It’s so empowering of the user, and really focuses in on the user’s experience and so early on. His article that you referenced has been around for a while. And I love the idea that there’s this complete inversion that, The graphic designer isn’t telling you what’s cool, the graphic designer’s just putting out the content in a way that anyone can access it, whether it’s a screen reader, or a modern browser. That’s just great. Let’s talk about that talk you gave at Event Apart in Seattle in 2010.

That was before you published the blog post that basically started everything. And the talk was influenced by this article from John.

**ETHAN: **Yeah. And it was influenced by that article because my career had been influenced by that article. I’d been a fan of creating non-fixed width layouts, flexible layouts or I think fluid layouts we call them pretty much since I read that, because it seemed like an interesting technical challenge, it seemed like a really interesting design challenge, thinking about ways in which we can create designs that are more resilient and more adaptable.

But that said, trying to do that in the early 2000s was pretty difficult because ultimately one of the many reasons that flexible layouts weren’t super popular is that if you’re on a very widescreen, things start to feel a little bit ropey or disconnected, if you’re on a very tiny screen columns can feel a little bit cramped.

And so, folks took a lot of comfort in that idea of creating a design that was always a specific width, in part because it afforded them some illusion of control, that they could basically say if you have this minimum screen resolution, then our design is going to look wonderful. But the problem is that eventually mobile devices came along and broke that in half.

That is part of what went into that original talk, because I’ve been doing more and more work around that time, on sites that had a separate mobile website. And this is a fairly common pattern back then, right? Because clients would have the full website that they designed that was for the desktop web. But then they started to realize, *Oh no, more and more of my users are actually coming to this site on mobile devices and we haven’t accounted for that. *We assumed everyone’s going to have a fairly comfortably sized screen, and they’re always going to be interacting with a mouse or something like that.

Getting asked on more and more contracts to do a standalone mobile website, or more frequently in the contracts that would specify an iPhone website. Well on principle, it felt like a weird reversal of how universal the web was supposed to be. It’s like, why can’t I access the same information or the same content on any device that I happen to use? I wasn’t sure what the end game of that fragmentation was supposed to look like. Because what’s the next device that we’re going to have to start designing for? iPads didn’t exist back then, but was I going to be doing a handspring-only website or blackberry- only website? If we thought about this as a flexible medium that could adapt more intelligently, that seems like a much more powerful and more sustainable approach, ultimately.

**IVAN: **I agree. And do you remember before the m-dot sites there were wap sites, w-a-p sites?

**ETHAN: **Oh, my goodness. Yes.

**IVAN: **It felt like m-dot was just a better version of a wap site? I don’t think it was sustainable. I think maybe part of the irony is that the iPhone came out with mobile Safari, and could actually display a desktop site, and then you had to double tap to actually zoom in. I remember seeing that for the first time and thinking, holy cow, you can get the real web on a mobile phone now? Amazing.

**ETHAN: **Absolutely. I think in all fairness, there were really capable mobile browsers that predated the iPhone. The technology had been improving. But I think it took, especially Western markets, seeing the iPhone and seeing it load up the homepage of the New York Times. That was a splash of cold water in a lot of folks that were designing in our markets.

I say this a lot, but I do remain surprised and humbled at the reception that the article got, because I really think that the reception that it did get just pointed to the fact that if I hadn’t settled on the idea, I think somebody else would have. Because I think there was this broad understanding that the idea wasn’t sustainable, that our current ways of working just weren’t going to serve us well, for more than a few years of the mobile web or whatever came next.

**IVAN: **Also, you gave it a name, you labeled it. And people understood what that was. What’s the story behind the words you chose? Responsive web design. I know that there’s a story, that it didn’t just come to you. You must have toiled over this.

**ETHAN: **Yeah, it was a bit of a process. I had agreed to write this talk for an Event Apart. I’d finished up a client project and that was the first time that I’d created these really complex, fluid, grid based layouts and I’d come up with sort of a unique technique for doing that. Around that time, I’d started learning about media queries, thanks to an article in lesser part, written by Craig Hockenberry. And that was the first time that I realized that these two things could actually go together, I could create really interesting, flexible layouts that didn’t have an ideal width or ideal shape.

But then I could still change them in useful ways, depending on certain conditions. And back then it was really just the width or height of the screen, but I could come up with something that was closer to what John was proposing back in A Dow Web Design. So that was roughly the technique, but I had no idea what to call it. And my wife Elizabeth gets a lot of credit for this because she was visiting some family down in New York City and visiting the Highline, which is a restored section of above ground train tracks that are beautifully landscaped and beautifully renovated and beautifully designed.

There was some seating in certain sections of the Highline that basically sit on tracks. They almost look like small, little railway tracks. My imagination got really fired up about that, because it was this really cool model of creating a space and then inviting the users of that space to rewrite it in new ways that were useful for them. So, being able to literally move seating around in a public area was, I don’t know, I hadn’t really seen anything like that before.

So, I started reading more about that, and then I started learning about this concept of responsive architecture. Well, actually it started with a book called Interactive Architecture that I read, and it talked about this idea of the relationship between a space and a user of the space as a kind of conversation, where both of them inform each other in ways that are useful. And I started reading more about interactive architecture and then I started finding out that in some circles, it’s called responsive architecture and I loved that because it really just reinforced that idea of a conversation.

So, I can create a design that is delivered to you, Ivan, as a user, and it’s going to respond to the changing shape of your browser window, or if your device’s display, to present information in a way that’s hopefully as usable and as meaningful to you as it can be, given the amount of space that it has to work with.

**IVAN: **That’s awesome. It all makes sense when you describe it like that. And I’m so glad your wife had that experience at the Highline.

**ETHAN: **I’m grateful to her for a lot of things. And that’s definitely one of them.

**IVAN: **So, it wasn’t just that this article was published, right? It was sort of the timing that you had, because it isn’t enough for you to call it responsive web design. You sort of have to have all the other pieces in place. So, your labeling was one thing, but there are W3C standards that had to be in place, CSS 3 and media queries and that was very early on and still evolving. Browsers had to support it. Was there any particular event in the evolution where you could say, and maybe point to, that’s what pushed this kind of design into mass adoption?

**ETHAN: **That’s a great question. I think it’s hard to point to just one thing. I wrote the article and then there was this flurry of activity around it that I really wasn’t expecting. I firmly believe, I met a publishing deadline, and then everything that kind of happened after that was due to the credit of the community. One of the first responsive designs that I remember seeing that wasn’t one of my early prototypes was John Hicks, who’s a designer and illustrator in the UK. He designed the original Firefox logo, and he redesigned his personal website to be responsive, and it was beautiful work.

John’s a wonderful designer and his site was and is beautiful. But I think that once he did that, and there may have been others, but this is the one that I remember, but as these designers started getting excited about this idea and publishing responsive work, that built more excitement around the idea and it proved that it could be done. And more folks started experimenting with what could be done with this idea on their websites.

But that didn’t necessarily translate it to the next step, which is that mass adoption you mentioned. I think the next step, at least on that path was back in 2011 I worked on the responsive redesign at the Boston Globe. I think that was at the time, I believe, the first large scale responsive website. And I think that showed that no organization wants to be the first anything, right? Like, the first flash website, the first CSS-based redesign.

Taking that first step, I think takes a lot of bravery and the Globe, at least, because it was a new website at the time, and the fact that a very significant portion of their readership was accessing their work on mobile devices, it made sense for them to launch this new site with responsive design. That also made it easier for a lot of other organizations of their size to be like, Oh, this actually works at scale. So, I think that definitely helped as well.

**IVAN: **I don’t even remember the web before responsive design, quite honestly.

**ETHAN: **Yeah, it was a dark period, Ivan. You know? [laughing]

**IVAN: **[laughing] And there’s this idea of Mobile First. That is about the same time or maybe later? It has to have been after responsive design became a thing, right? Where do you locate that?

**ETHAN: **Yeah, Mobile First, as I encountered it, predates responsive design a little bit. I may not have encountered it until afterwards. But Luke Wroblewski, who’s at Google now, wrote this blog entry, and I think it was back in 2009, where he coined the phrase Mobile First. Like John’s article, I think it’s still an incredibly impressing piece of writing about the web. And Luke’s writing at a time when the iPhone is almost basically hot off the presses, and he’s basically arguing that we can’t keep treating mobile as an afterthought.

So, we can’t keep designing these desktop based products, and then think about what the mobile experience is going to be. He’s basically arguing we need to invert that because mobile traffic is exploding, mobile devices have all these new capabilities and maybe most importantly, for me at least, we’re designing for screens that are significantly smaller than what we’re used to.

So if we can start with mobile, and figure out what really matters to our interfaces, then that’s going to improve the experience for everybody. So anyway, that predates responsive design slightly, but it may not have been until after I came out with the article that I came across it. I think it’s still a critical piece of design thinking even today.

**IVAN: **Could you say his last name again, because I have seen his name so many times, and have never tried to say it and I know exactly who you’re talking about. He’s got that green astronaut avatar that he uses.

**ETHAN: **That’s right. Yeah, exactly. He’s lukew.com or @lukew on Twitter, but I believe his last name is pronounced Wroblewski. That’s how I’ve said it and maybe he’s been waiting 20 years to tell me how wrong I’ve been getting it? But Luke’s an incredibly sharp and incisive designer, I’ve always really respected the way that he approaches complex problems. He wrote a fantastic book on form design, and his book Mobile First I think, really fantastic.

**IVAN: **Yes. I might have to reach out to him and see if we can get them on the podcast.

**ETHAN: **Can strongly recommend.

IVAN: What would you change about responsive web design now that it might be too late?

**ETHAN: **That’s a great question. I don’t know. So, in the article, I just said that responsive design has three ingredients. It starts with a flexible, or fluid grid as its foundation. It has flexible images and media that work inside of those fluid layouts or flexible layouts. And then, there’s media queries, that little bit of pixie dust that allows us to articulate how these things change and adapt. So it’s really just a three-step process.

The reason I did that is because I wanted the definition to be as broad as possible. I didn’t want it to be super prescriptive and have 15 different steps you needed to follow to make a responsive design.

I wanted to keep it as accessible as possible. But in part, because of that, there’s a whole range of things you can do with that ingredient list. You can make anything but a mobile first responsive design. You can make something that’s targeted primarily for wider screens, and then you still think about the mobile experience as an afterthought. You can make something that’s completely inaccessible, you can make something that’s much too heavy to be downloaded over somebody’s data plan.

But at least for me, that’s not a distinction between what’s responsive and what’s not, that’s a discussion around what constitutes good responsive design, versus what might need some improvement or refinement.

So I don’t know, recently, there’s been some new tools that have come out, like container queries, is something that’s being worked on actively right now that I’ve been clamoring for, for a long, long time. So rather than looking at the characteristics of the device or browser that’s rendering your design and then adapting it accordingly with media queries, container queries are going to let us say, Okay, how much space do I have to work with inside this part of my design, and then I can adapt elements inside that area accordingly?

So basically, if this particular teaser component is going to be rendered at around 400 pixels, draw it this way. If it’s going to be 200 pixels render it this way. And that, for me, at least, our designs have gotten more componenty and more modular. That’s the kind of design I’ve been doing more of anyway, and this is a massive ergonomic improvement over the way that I do that kind of work.

But, I wrote about this recently, I don’t think if you created a responsive design that didn’t use any media queries, but only used container queries, is that still a responsive design? I think so. Some of your listeners might have different approaches, but at the end of the day I think that definition still holds up pretty well. I might tack container queries onto it, but I like the fact that it’s not prescriptive. It’s prescriptive enough, I guess, that it’s three steps and then you’re good to go.

**IVAN: **I think I would agree with you. I go back to what you said about responsive architecture and the tenant that I think is underlying all of the switches, empowering the user by being responsive to the user. I think if you include container queries in there, I think that still fits the definition.

**ETHAN: **Yeah. And there’s so many wonderful tools out there now for listening to the user. There are queries that we can use in our CSS to detect whether or not the users asked us to disable animations, which can trigger certain motion sensitivities in our users. And I think that’s an incredibly important thing to listen to. But I wouldn’t necessarily include that, for example, in a definition of what constitutes a responsive design. Do I think that makes for a good responsive design? Absolutely. But I don’t think that is necessarily table stakes. But I do think it’s important.

**IVAN: **Now, about a year ago you started a company in the middle of a pandemic.

**ETHAN: **[laughing] Great timing.

**IVAN: **Great timing. [laughing] So you called it Autogram, and you started it with Karen McGrane and Jeff Eaton who I think left Lullabot to start the company. And I love this description that I saw of Autogram. It says here, You started it to work on big tangly problems involving content management and design systems. That sounds like an awfully big problem to solve. But those are the best kind of problems, I think.

**ETHAN: **Working with Jeff and Karen, two people I’ve had a chance to work with a lot in the past. They’re wonderful folks and I’m so glad I got the chance to sit in the slack room and talk about some of the stuff with them.

**IVAN: **Tell me about how it all started. What’s the origin story? What’s the itch you and your two co-founders we’re trying to scratch?

**ETHAN: **Yeah, so it probably goes back a few years now. So, in the last few years more and more of my work has been less about working on responsive redesigns, and more in helping teams and organizations do that work more effectively, internally. So basically, helping the folks that are doing the work, execute on that work a little bit better than they could before or helping them work through some organizational bottlenecks.

But in super recent years, I’d say the last three or four years, as design systems have really come into prominence, that’s been more and more of a focus in my work. I remember talking with Karen and Jeff in a Slack at the time, about some of the challenges that I was seeing on teams that were dealing with design systems and how it wasn’t necessarily improving the way that they were working.

It was making it in many ways a lot harder to collaborate with different parts of their team or different parts of their organization. It was kind of fractally increasing the complexity of some of the products that they were working on, just in terms of the technical infrastructure they needed to work with some of these systems. And how the ways in which some of these systems were structured was actually making it harder for some of these people to see the impact of the changes they were proposing in their products.

So, trying to make a change to one specific component, without being able to see how that’s going to ripple out through other brands that reference that component or other products that use variations on that component.

And so, none of these are technical problems only. They really have to do a lot with how these teams are structured, how the organizations are structured, and how the design system itself might be amplifying some of those pain points or reinforcing them. And so, I was talking about this with Karen McGrane and Jeff Eaton who have been working in the content strategy space for so long and helping people think about the messages they’re trying to communicate. How to structure content effectively and to work with that content effectively. And basically, a lot of the problems that I was describing weren’t new, and their problems that they’ve been dealing with at scale for quite some time.

But because design systems are relatively new, it’s kind of like a new silo, or a new manifestation, I guess, with some of these old, old issues. And so, because we were seeing so much overlap in the work that we were doing, we figured it might make sense to, *Hey, suggest that these are actually very united problems that design systems and content management systems actually need to be thought about as a holistic set of issues, *and talked about together.

So that’s kind of where Autogram started, is thinking about the ways in which people are approaching the publishing workflows, approaching their content management or design systems and trying to help them articulate ways in which they can help them do that work better.

**IVAN: **Do you describe yourself as a design agency or a content strategy agency? Or consultancy?

**ETHAN: **I would say a consultancy. Absolutely. Coming into a company and being hired to either advise them on a project, they might have something that’s underway already, and they’re looking for somebody who has perspective around content management or design systems, help them identify challenges they might face a little bit further down the road, give them some suggestions on things they might want to revisit. And think about some of the longer term impacts of some of the things they’re thinking through.

**IVAN: **Could I hire you as a company who might have landed a new client that we’re embarking on a new redesign with? Or would you want to be part of the original pitch to that project? I’m trying to understand where in the process Autogram fits in.

**ETHAN: **Well, we are less than a year into Autogram’s history, so we are in many ways, I think, figuring that out. I would say that we’ve been working with clients at different stages of the life cycle. We are working with companies that are trying to figure out how to select a content management system that’s going to actually meet their needs. And so, working with them to build a map of their organization, and think about the ways in which they work currently, and figure out a set of requirements that they need to start thinking about, that they can then bring to a vendor to, to think about that.

It could be a company that’s got an existing design system, and they’ve identified some ways in which it’s impeding their ability to shift changes, or to work across design and engineering, and coming in and recommending some ways to help them streamline those issues. I enjoy making a website as much as the next person. That’s one of my favorite things to do. I would say that we’ve been doing less hands-on design work in the last year, but if the right client came along, I’m sure we’d definitely talk to them.

**IVAN: **I might have to call you Ethan.

**ETHAN: **I will talk about design systems any day, and I will listen to Jeff and Karen talk about content strategy and content architecture, any old day of the week. So, we’d love to have that call.

**IVAN: **Okay, awesome. I want to nerd out for a little bit and talk about the name you chose, Autogram. I’m going to read what an autogram is and then you can tell me how it applies. So, the definition of an audiogram is a sentence that describes itself in the sense of providing an inventory of its own characters.

**ETHAN: **Right.

**IVAN: **So, how do you create a sentence that does that is what I want to know? [laughing] Because it’s like recursive and you can’t do it ahead of time. It’s blowing my mind. Tell me about it.

**ETHAN: **It’s perfect. Jeff Eaton is one of the smartest people I’ve ever met, and so is Karen McGrane. So, Jeff is the one who uncovered this idea of an autogram, and if your listeners look up what an audiogram is, you’ll find a bunch of examples where it’s basically a sentence that is describing its inventory, like you said. So, something like this sentence contains only three A’s, three C’s, two Ds, 25 E’s, and so on, and so forth until it gets to the end. And by the time you get to the end of that sentence, you realize everything you’ve read perfectly encapsulates what you just read.

**IVAN: **[laughing] I love it.

**ETHAN: **Impossible to write right? And this is the thing that I think our clients who are in the middle of some of these big tangly systems related challenges, is they approach a lot of these problems as like, Well, I will create a design system to provide more consistency across my products, and that’s going to help us do this product work more effectively. But when you’re actually in the middle of creating that design system, or defining some sort of content architecture, it’s hard for you to see the end. It’s hard for you to actually see the full scope of what it is that you’re creating. So, I think it’s our goal, at least without Autogram, to provide that broader perspective and hopefully come up with a sentence that by the end of the project, at least better describes what’s inside it.

**IVAN: **What a great name for a company. Well done.

**ETHAN: **Thank you. I can take no credit. That’s all Eaton. That’s one of my favorite things.

IVAN: It’s awesome. As we wrap up, I wanted to ask you what are you reading right now? What are you looking forward to coming up? There’s still some bits of the summer left. Would love to hear what your headspace is in right now.

**ETHAN: **I’ve got a few books going. I’ve gotten into audiobooks in the last few years for when I’m out outside exercising and that’s been nice. Right now, I’m listening to the Ninth House by Leigh Bardugo. I’m about halfway through, I’m not sure what I think about it yet, but it’s sort of like a grimy version of Harry Potter. It takes place at Yale. There’s all sorts of occult things. It’s interesting so far.

And then I’m reading a book by Jane McAlevey, who’s a labor and union scholar, and it’s a fantastic book called A Collective Bargain, sort of arguing how unions are kind of at the core of a healthy democracy. It’s very well written, it’s very short. That’s probably the best thing I’ve read recently. And otherwise, I’m kind of waiting for the next entry in this trilogy called The Locked Tomb. Two of my favorite books are Getting the Ninth and Harrow the Ninth that I’ve kind of devoured and reread over the last few years. There’s another one coming out early next year. I hope it’s early next year, that I’m just really excited about called Alecto the Ninth. So I can’t wait for that one.

**IVAN: **Wonderful. Well, it’s been glorious speaking with you. I feel like I could talk to you for the rest of the day.

**ETHAN: **Likewise.

**IVAN: **But we do have to end the episodes. Thank you so much for spending your time with me. It’s just been awesome chatting with you.

**ETHAN: **Likewise, Ivan. This has been a real joy. Thanks for having me on the show.

**IVAN: **You bet. Ethan Marcotte is an independent web designer, writer and speaker and coined the term responsive web design. You can find him online at www.ethanmarcotte.com on Twitter as @beep. And do visit Autogram at autogram.is.

You’ve been listening to the TEN7 podcast. Find us online at ten7.com/podcast. And if you have a second do send us a message, we love hearing from you. Our email address is [email protected]. Until next time, this is Ivan Stegic. Thanks for listening.

Credits

This is Episode 123 of The TEN7 Podcast. It was recorded on July 14, 2021 and first published on July 21, 2021. Podcast length is 48 minutes. Transcription by Roxanne Chumacas. Summary, highlights and editing by Brian Lucas. Music by Lexfunk. Produced by Jonathan Freed.

Please rate our podcast! Doing so helps spread the word about the show. Just pull it up in the Podcasts app and scroll all the way down, hit the stars and you’re done! Thank you.