Episode Transcript

Ethan:

Hi, this is a responsive web design podcast, where we interview the people who make responsive designs happen. I’m your host, Ethan Marcotte.

Karen:

And I’m your other host, Karen McGrane.

Ethan:

And this week, well, giddy doesn’t quite cut it to describe just how happy we are to be speaking with Ryan Essmaker and Brad Smith from The Great Discontent. Guys, welcome.

Brad:

Thank you for having us.

Ryan:

Yeah, thanks.

Ethan:

Yeah, of course. So Ryan, Brad, why don’t you guys just introduce yourselves, tell us a little bit about The Great Discontent, and tell us a little bit about how responsive design plays into it.

Ryan:

Well, The Great Discontent is—well, it started as an interview series over four years ago online only, and since then we’ve branched out into print and film. But the gist of it is we’ve been featuring creatives from all different disciplines and professions—artists, designers, musicians, all of the above—and telling their stories about how they got started, and focusing on questions about creativity and risk and what not.

Ethan:

That’s great. And Brad, what about you? What’s your role in all of this?

Brad:

My role is I joined Ryan and Tina as a partner just about ten months ago, and it was at that point that we formed Wayward Wild, which is the parent company for TGD. And I kind of operate on the business level for TGD, handling publishing and business-level items, as well as beginning to grow Wayward Wild into more of a brand incubator.

Karen:

But before we get started, I’d like to say a few words about our sponsor, Harvest. I have to make a confession: I hate, hate, hate tracking my time. It always makes me feel like Fred Flintstone chiseling out his time boulder before he slides down that dinosaur’s back so he can go home. But using Harvest doesn’t feel like punching a time clock. Harvest is a beautifully designed tool that lets you track your time on client projects, start a timer from a web browser or mobile device, and it even lets you send invoices when your time tracking is complete. If you’re a responsible business professional you should be keeping tabs on which clients and projects are making you money—and the way to do that is through careful time management using Harvest. So check out Harvest today. Go to getharvest.com and start tracking your time. They’ll give you a thirty day free trial. When that’s up, enter the code RESPONSIVE at checkout and you’ll save 50% on your first month. Don’t hate tracking your time. Get Harvest.

Ethan:

That’s great. I know both of you guys personally and I’ve been a longtime reader and fan of TGD. It was one of my favorite responsive sites when it first launched; and the new redesign, I think it’s stunning, frankly. I’d love to hear a little more maybe about that origin story. Even in its humble beginnings, Ryan, how did you guys make the decision to go responsive initially? Did you have any concerns about it as a methodology? What was interesting and challenging to you about going responsive?

Ryan:

Well, prior to releasing TGD, I had my own small little design and development studio in Michigan, and I was doing everything, web standards, and it was actually your article in A List Apart, which was—gosh, was that, like, 2010 maybe? 2011?

That helped us connect with the design and the web community, which gave us a really good kickstart, because thankfully everyone really seemed to embrace it and they enjoyed it, so it gave us an instant community.

Ethan:

Yeah, 2010, I think, yeah.

Ryan:

I was a little bit late to the game but I read that article and it kind of changed the game for me as far as development and design for the web. I was actually really bored doing web design and development on these static-width sites, and I remember reading the article that you published and I was like, “Oh man, this is really exciting,” and so ever since then I started really tinkering with it. And I think it was in about January 2011 I started working on the site. Tina and I had wanted to do a magazine for the longest time, for several years, and we finally buckled down and we were like, “Alright, we’re going to do this as a web magazine because it’s much easier than a print magazine to get started.”

From the get-go, I knew this had to be something that was responsive because I wanted it to be a really great reading experience. And so, I spent months doing iterations while doing client work, so it was just a little passion project on the side. I probably designed and scrapped four different iterations before we finally landed on what was published in August of 2011. But for us, it was really just a matter of trying to create the best reading experience, and also doing something a little bit different, which at the time I don’t think many people were doing these crazy-width hero images or a lot of long-form responsive text. So yeah, I think that helped us connect with the design and the web community, which gave us a really good kickstart, because thankfully everyone really seemed to embrace it and they enjoyed it, so it gave us an instant community, which was really awesome.

We don’t tailor things too much more for mobile than we do for desktop other than the fact that we’re trying to make it a cohesive and great reading experience on both platforms.

Karen:

How do you talk about the different needs or potential needs of mobile users versus desktop users? Sometimes when we talk to publishers, there’s this sense that people want to optimize for a particular platform or maybe do dayparting so that they’re hitting different readers at different times of day on different devices. How do you talk about that?

Ryan:

For us, it’s about making it a cohesive experience for both desktop and the web. Like, we’ve never really tried to optimize the experience for one or the other, but to make the both coexist in a way that worked well on both platforms. For us, there’s really not too much of a difference and we don’t tailor things too much more for mobile than we do for desktop other than the fact that we’re trying to make it a cohesive and great reading experience on both platforms.

When we were designing the print magazine for its initial release last year, there was a lot of thought about trying to create a design system between both print and the web.

Ethan:

So Ryan, you mentioned something about a cohesive experience and I just wanted to follow up on that, because in many ways TGD was not just a web-first publication, it was kind of a responsive-first publication. And as you guys have branched out into print, into film, how did you think about designing a look that could basically work with those different channels?

Ryan:

Well, when we were designing the print magazine for its initial release last year, there was a lot of thought about trying to create a design system between both print and the web. And then later on just this past year in kind of a second iteration of the redesign, we also wanted to bring in the film components and just basically create a wrapper or a house, that all those things could live together. But it was actually a really challenging experience, with the print magazine and working on the redesign of the site, to kind of make something that works for both of them. It was really challenging, but it was also really cool because the web’s come a long way over the past four years since we initially launched it to where we could do a lot more responsively, and go even bigger and stuff like that, than we could before. So in some ways it was easier, but it was also really challenging to kind of create a wrapper or a design system for both that would complement each other.

I’ll still kind of start in a desktop format, which is what I kind of deem to be the most ideal format to play around in.

Karen:

One of the things that I love about The Great Discontent is how well you have maintained the visual hierarchy across all of the different screen sizes. I’m really curious, how does that come into your design discussions? How do you talk about and make decisions about what you prioritize on different screens?

Ryan:

I think it’s just part of the design experience. Since I got into responsive design, I’ve kind of spent a lot more time designing in the browser versus in Photoshop. All the different screen sizes kind of inform each other. I’ll still kind of start in a desktop format, which is what I kind of deem to be the most ideal format to play around in.

But then when I’m working on the different screen sizes and the breakpoints, a lot of times the design will be affected, or just the design system as a whole, be informed by the different screen sizes. So it’s really just a part of the design process that responsive design gives us, especially being able to design in-browser and just kind of fuss with stuff as you’re going along. There’s very little things that we hide, if anything, between mobile and desktop.

One thing that I’ve been watching is the difference between our long-form and our short-form interviews. We actually have a higher readership on mobile for the longer interviews.

Brad:

And that might certainly evolve as we grow and begin to have more audio mediums and video mediums and what not in TGD. But for right now, our sole product is a long-form written interview. And something that we’ve noticed—as every company has noticed with mobile readership—but one thing that I’ve been watching is the difference between our long-form and our short-form interviews. We actually have a higher readership on mobile for the longer interviews. I think a lot of that has to do with the fact that we’re dropping a lot of meat and potatoes in these interviews and they can take twenty to twenty-five minutes to consume. I think a lot of people are looking at those and realizing that they don’t want to sit at their desktop and read that for twenty-five minutes, they would rather consume it on a mobile device, if that’d be in a browser while they’re on the train or laying on the couch at night on the iPad. So it’s really interesting in just trying to keep the two cohesive, because we have one product and that is a long-form interview, and the type and the layout and the format is really the only important thing.

Ethan:

Could you tell me a little bit more, just like a day in the life of Wayward Wild? How do you guys actually work together and collaborate? I know you’re a small publisher, but you’ve got a beautiful product. When you’re thinking about whether it’s the design of a new product or a new feature, how do you guys actually work together and collaborate? Has responsive design and thinking about more screens kind of changed the way that you work?

Ryan:

I don’t know if it’s necessarily changed the way that we work. Prior to last year, it was just me and Tina working on this, and before that it was just kind of on the side. Tina would handle the majority of the editorial stuff and then I would handle the design and creative side of things. There’s definitely some back and forth as far as sharing screens and things like that, and being like, “Hey, what do you think of this?” and you can immediately interact with it. But as far as responsive design totally impacting that, I wouldn’t say that it’s a huge part of it.

Photoshop just winds up being a very short-term sketch pad and then we hop into the browser and do the rest there.

Ethan:

Just to follow up with that: Ryan, I was actually kind of surprised to hear that you’ve moved away from Photoshop as much as you have because, especially the new design, it just feels composed in a lot of ways. Would you say that most of the applications and tools you’re using are really just live editing in the browser, or are you doing any prototyping or any kind of graphic mock-up work these days?

Ryan:

I do a little bit, but they wind up just being sketches and sometimes more like wireframes. But I’ll kind of go into it with an idea in my head and mess around with it in-browser. But there might be some times where I’ll sketch a little bit in Photoshop or on a piece of paper as far as what I’m thinking. But it’s almost faster for me to kind of get in and—and like I said, all the different screen sizes impact the design, so if I’m thinking, “Oh, this would look really amazing on the desktop or on a large screen,” when I get into it, it maybe doesn’t work quite as well or there might be some particular challenges with serving images or whatever where that kind of impacts a lot of stuff. So yeah, Photoshop just winds up being a very short-term sketch pad and then we hop into the browser and do the rest there.

The actual layout of the interviews has always been something that we’ve done each week by hand and just based off of previous templates or snippets of code that I’ve developed over the years.

Karen:

Talk to me a little bit about your publishing system. Do you have a content management system? And if you do, how do all of the different objects that you create associated with each interview, the pull quotes and the media elements, how do you manage those on the back-end?

Ryan:

That’s pretty much all kind of by hand. I’d love it if there was a system to be able to lay out long-form interviews like that with the quotes and the different types of media. But as far as I know, there’s nothing that really does it that well. So that part of the layout has just been by hand over the years. We do use Statamic. Previously it was ExpressionEngine just to kind of gather the articles together and present it on the site. But the actual layout of the interviews has always been something that we’ve done each week by hand and just based off of previous templates or snippets of code that I’ve developed over the years.

Ethan:

How much of the design of the site would you say is being refined? Do you find that once you release a new module or a new part of a design, like once it’s actually live and in the wild, you might actually get some feedback on it and need to rework it? I’d just be curious to hear if any elements of the design have been kind of reworked since they’ve gotten out into the wild, and if so, why?

Ryan:

Not so much with the interviews themselves. Like when we first launched it at the very beginning, people didn’t quite understand that you needed to scroll down and things like that to get past the hero image or the type at the beginning. So initially we had some stuff like a little “scroll down” or a “look down here” kind of thing. But that was pretty short-term just because it wasn’t a widely accepted user experience. But since then, like with the interviews, there’s not so much that we’ve refined or tweaked other than maybe fixing the occasional bug.

With the launch of the new site and having an actual homepage now, not just the newest article, there was some stuff with the overlays where I refined that. Like when we first launched it, it went almost completely white when you hovered over it, and since the blocks of content were so large it didn’t really allow you to see the images unless you didn’t have your cursor over it. So we modified that a little bit and made it to where it wasn’t as opaque, and I think that kind of made it a better experience. But other than small things like that here and there, there’s not a ton of stuff that I felt we really had to address.

Brad:

Yeah, there’s been minor tweaks to the interviews as long as I’ve been reading The Great Discontent and then being part of it for the past nine months. But the biggest change was launching the new site, which, in fact, is just a homepage; moving away from the style of the newest interview is in the spotlight and everything else is just kind of buried in the archives page to feeling more like a publication and using some of these 160 older interviews to bring life back to them and give them a placement on the homepage. More of creating a kind of exploration instead of just a “click here to look at the archive.”

The actual layout system is pretty solid as far as translating from mobile to desktop, so there’s not a lot of ongoing testing with that.

Karen:

How do you review the work that you’re doing, your design work, in the context of different devices? As you’re discussing, “Okay, is this working for us?” what different devices do you have or how do you discuss things? I’d be really curious to know if that’s changed now that you also are looking at things in print.

Ryan:

I wouldn’t say so much it’s changed since looking at things in print. When I was designing stuff initially and with the redesign, there was a lot of testing on iOS devices and Android just to make sure that it was a good experience all around and there weren’t any bugs in it. And I used to do a lot more of that when the browsers weren’t so capable. But now there’s not as much—I might occasionally open up iOS Simulator or the iPad and just kind of check to make sure things are okay. The actual layout system hasn’t changed a whole lot. It’s been refined and improved over the years, but it’s pretty solid as far as translating from mobile to desktop, so there’s not a lot of ongoing testing with that.

With this redesign, we spent a lot of time making sure that we were implementing responsive images in a way that was manageable and also improved the speed.

Ethan:

Maybe just to follow up on that: side note, I was up in Vermont this past weekend and was doing some prep work for the interview and brought up the site on a very shaky internet connection, and I was surprised, for a site that’s as visually rich as The Great Discontent has always been but definitely is in the new redesign, it also came up really fast. I guess I’d be interested to hear, as you’re viewing these designs in the context of all these different devices, is performance a focus for you guys? Is the speed of the site something you’re design for?

Ryan:

Oh, absolutely. That was a big part of the redesign because—especially with the homepage and it being a ton of images, and there’s always been a lot of images in the interviews, but we’ve made everything a lot bigger and now you’ve got retina screens to account for and things like that. With this redesign, we spent a lot of time making sure that we were implementing responsive images in a way that was manageable and also improved the speed. So it’s really great to hear that being on a slow internet connection last weekend, that it loaded pretty fast, because that was a huge concern for us and something that we’re always monitoring and trying to improve.

The biggest part to me, is finding out what are people reading, where are they reading, and how long are they spending reading?

Karen:

Talk to me a little more broadly about how you measure the success of this work. How do you look at your analytics data, or do you at all? How do you know if the site is working?

Brad:

Success for me, moreover, coming from the “What are people consuming while they’re there?”: a lot of it is time spent on-site. Because, again, going back to the fact that for the most part TGD online is one product and that is the long-form interview, and that’s probably the biggest part to me, is finding out what are people reading, where are they reading, and how long are they spending reading? Are they spending enough time there to get through the article in one sitting or are they coming back and being part of three different views and reading it in chunks?

Responsive is hard, don’t do it! Whoever wrote that article four years ago should not have written it!

Ethan:

Brad, Ryan, I’ve got to say, it’s been a real honor having you guys on the podcast. Just to kind of close things out, I’d love to hear if you happen to have any advice for any of our listeners who might be in the process of starting a responsive redesign. Ryan, over the last couple of years, what are some things that you’ve learned that you might’ve thought about differently, and Brad, what are some of the things you’re kind of excited about?

Ryan:

For me, one of the things that’s made responsive design enjoyable and also pretty quick to do is kind of being a hybrid designer/developer. So, I would encourage teams, if you they’re building a team or hiring people, that there are people on the team that are leading it or are a large part of it that can do both of those things, because I think that it’s easier to make fast decisions and good decisions if you have people like that on the team.

Other than that, I would say spend a lot of time doing your research on responsive images because that is probably going to be one of the large pain points that you’re going to deal with. But thankfully it’s come a long ways over the past couple of years. So, definitely spend a lot of time making sure that you’re serving the right images to the right devices as best as you possibly can.

Do you have anything Brad? [laughs]

Ethan:

Hi, Brad.

Brad:

Hi.

Ryan:

Crickets.

Brad:

You can just totally edit me out of this whole thing.

Ethan:

No no, no no.

Brad:

[laughs] Yeah, for the most part, I would echo Ryan. I really didn’t have anything new to offer there.

Ryan:

I feel like it should’ve been more exciting… [laughs] “Responsive design is fun! Do it!”

Karen:

We were hoping for some, like, angry, like, “No, that’s wrong!” But, okay.

Ryan:

[laughs] “Responsive is hard, don’t do it! Whoever wrote that article four years ago should not have written it!”

Karen:

[laughs] That guy was a jerk.

Ryan:

Total jerk.

Ethan:

I can validate everything you guys are saying.

Ryan:

[laughs]

Karen:

[laughs] Well Ryan, Brad, thank you so much for taking time to talk with us on the show. This has been really interesting and you have such a beautiful website, a beautiful product, that it’s really heartening for us and for our listeners to be able to see what you can do with responsive design. So, thank you.

Ryan:

Thank you.

Brad:

Thank you so much.

Ethan:

Thanks to everyone for listening to this episode of a Responsive Web Design podcast. And thanks also to our sponsor, Harvest. Go to getharvest.com and start tracking your time, painlessly, today.

If your company wants to go responsive but you need help getting started, we offer a two-day onsite workshop to help you make it happen. We also offer these workshops to the public, so please go to responsivewebdesign.com and see when we’ll be in a city near you.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every podcast episode at responsivewebdesign.com.

Thanks for listening, and we’ll be back next week.