RWD Podcast Episode #19 : Ethan Marcotte

Transcript

Justin Avery: Hey everyone, and welcome to another addition of Responsive Design Weekly Podcast. It’s episode eighteen. My name’s Justin Avery, and I’m the host and the curator of Responsive Design Weekly Newsletter, a weekly newsletter all about responsive design surprisingly enough. This week’s sponsor is the Responsive Design Workshops. If you go to responsivewebdesign.com there’s workshops being run at the moment, so if you’re ready for responsive it’s not just layout anymore a responsive redesign will raise challenges within your current design, development, and publishing process.

The coolest thing about the particular workshop is that you get two really cool people come to speak to you. One is Karen McGrane who wrote the Content Strategy for Mobile, a book apart book, and also the infamous Mr. Ethan Marcotte who wrote the book which kicked off the newsletter and this podcast as well. If you’ve been listening to the last couple of editions you will have pieced together that the sponsor of the week has something to do with the guest of the week as well. I’d also like to welcome along our very special guest this week Mr. Ethan Marcotte, Ethan welcome.

Ethan Marcotte: Justin, it’s good to be here sir. How are you?

Justin Avery: I’m very well. I’m very well, and how are you?

Ethan Marcotte: Good, busy week a little tired, but nothing some caffeine can’t fix.

Justin Avery: Exactly, well I’m doing the exact same thing. It’s a little bit later here at night, but I thought a nice coffee as a nightcap for me would be nice.

Ethan Marcotte: Very nice. Very nice.

Justin Avery: Now, it’s going to be very rare there’s not going to be many people listening to this that won’t know who you are and a little bit of your background, but maybe just talk about how you got into the whole web design thing. Where did you start off? Where did you come through the ranks, and what are you up to these days?

Ethan Marcotte: Yeah, all good questions. When I figure out what I’m doing these days I’ll let you know, but … [02:00] My name’s Ethan Marcotte, I’m an independent designer based in Boston. I got into web design entirely by accident frankly. I finished up my undergraduate studies at university. I was a literature major, and I was thinking about going on to basically read a doctorate at some point, but anyway I decided to take a few years off before school, and fell into this whole web design thing by accident. I’d been doing some amateur web design in college basically, and basically got a studio job right after work, or after school to just figure out if this is an industry that’d be interesting to work in. I fell in love with it frankly, so I guess I’m ten or fifteen years between taking a few years off before graduate school.

the web was just this great medium that I could just experiment with. It wasn’t about words or visuals, it was really about bringing the two together in this more interactive way.

Justin Avery: That’s nuts. It’s strange, I was speaking to Aaron (Gustafson) in the last episode as well, and I didn’t know he was a journalist on the way through. Is there something that’s tying these literary majors and journalism experts to come into web design?

Ethan Marcotte: That’s great, I don’t know. That’s a great question. My first studio job was remarkable, because there wasn’t any place to study web design at the time. This is in the early days of the 2000s, so most of the people I was working with had just fallen to the web for other industries I was working with. Former writers, fine artists, photographers, somebody who’d architecture pretty extensively, so the web for me has always been about this really great cross disciplinary view of building websites I think. That just really resonated with me, so I guess I’m also one of the folks who just stumbled into it.

Justin Avery: You say that you call yourself an independent web designer as well… Did you have any formal design training? Let’s say like a couple of [04:00] people who get into design come from a graphic design background, but with a literary (background). Did you just learn on the job, or did you do some side things as well?

I’ve always had a love of graphic design, and the love of communicating visually.

Ethan Marcotte: Yeah, I think I’m more or less self-taught, which I think you could probably tell by looking at my portfolio. I think I really started … I’ve always had a love of graphic design, and the love of communicating visually. I got my hands on a copy of Photoshop when I was in college, and really just fell in love with it. Just being able to tell stories in a more visual, more composed fashion was always appealing to me, and then the web was just this great medium that I could just experiment with. It wasn’t about words or visuals, it was really about bringing the two together in this more interactive way. It really just stuck with me.

Justin Avery: Okay. Now, one of the things that I’m doing with each of the guests is, and I’ll ask you this at the end of our chat today, is that the previous guest can ask a question of the next guest as well. Steven (Hay) had a question for you.

Ethan Marcotte: Uh-oh.

Justin Avery: What he put was, you came up with the three tenants of responsive design, the fluid grids, fluid media, and media queries, (probably don’t) have to remind you about that, but these three tenants made responsive web design a simple technical exercise. At the beginning this seemed like technical instructions … Well, it was more like technical instructions than a philosophy or a way of thinking. His question for you is, has the definition of responsive design changed, and if so how has it changed, and if not what is the reason it hasn’t changed?

Ethan Marcotte: Yeah, that’s a good question. I know there’ve been people asking if this is something that needs to be revisited, and I guess for me there’s a distinction between layout and design anyway [06:00] right? Design is more about the process. What’s that wonderful Rand quote, the method of bringing form and content together? It’s really about the questions we ask ourselves during the course of a project. Just in terms of responsive layout, I think that honestly at the end of the day, flexible layouts, media queries are really the only prerequisites to building a responsive design. Anything else on top of that I think is really at the discretion of the designer.

You could build a responsive site that’s completely inaccessible right? Like it requires JavaScript, and if the user can’t download it or they can’t execute it then that’s just on them. You can build a 20MB responsive design that’s going to be incredibly hard to download over even the richest broadband connections, but it’s still going to be responsive from a layout standpoint, but I think there’s maybe a larger discussion about well-crafted responsive design that’s starting to happen. Which has been really great to see the emphasis on performance that’s been creeping into the conversation a little bit more lately. Scott Jehl’s got his book on responsible responsive design. Talking about how we can build these really beautiful, really flexible designs in a more sustainable, more lightweight fashion.

keeping it focused on just those three ingredients in some ways lowers the barrier to entry to making responsive designs

At least for me I think the fluid grids, fluid media, and media queries that’s the … That’s just the baseline, and then I think the interpretation about what else needs to be brought into that responsive design is at the discretion of the designer or the developer.

Justin Avery: Like a per project kind of thing.

Ethan Marcotte: Yeah, exactly. It’s more like … I think of it more like some of our early discussions around what constitutes web standards right? We decided at some point that we were going to really be focused on HTML CSS [08:00] and DOM scripting. There’s a much broader range of web standards out there, but at least for right now for the purposes of that discussion we were having at the time it was let’s focus on these three things. It’s really up to anybody what they bring to the table after that. I don’t know, I think at least for me keeping it focused on just those three ingredients in some ways lowers the barrier to entry to making responsive designs, because really you could pile anything on top of that after that.

Justin Avery: Well it’s … Just talking like that is lowering the barrier to entry. It might be … Could be the answer to this question, but I was speaking also in the last episode to Aaron Gustafson. He was talking about how the web has continued to evolve, and so there’s always changes in developments in our industry because we move so fast right? It’s the quickest developing industry ever. We’re saying here that things … It started with tables, and we moved to CSS, and there was this big [who-ha 09:04] at CSS, and then AJAX was another big thing which just took the web community by storm. I think the last thing that landed was responsive design, and it feels like that one thing fundamentally … Like those other things had fundamentally shaped the way that we build websites now.

There’s been a lot of other things which have come up before and after that, but it hasn’t just turned the web on the head, which I think responsive design has. While brilliant in its simplicity, why do you think this approach has had such a profound effect? Was there a groundswell of things that needed changing, or …

Ethan Marcotte: Yeah, I don’t know. I think that … I remain perpetually amazed and terrified at the response the original article got, frankly. I met a deadline, and I wasn’t expecting anything like the excitement that had generated. [10:00] I’m incredibly … I am straight up at the end of the day amazed and humbled by just how popular responsive design is in general, but I think if I hadn’t written that article I think somebody would have at some point. Frankly because, I think we at the time we were so focused on this new problem of mobile right? That has been popping up. We’d been ignoring mobile as an entity for years, and then the iPhone hit, and then things snowballed from there. It wasn’t something we could push off any longer.

That’s a broad oversimplification obviously, but I think it was clear to me and I think a lot of other people that this idea of building separate mobile and desktop websites wasn’t going to be sustainable in the long term. This is back in 2009, 2010, before the iPad even existed, so tablet wasn’t something that we were paying serious attention to even then. I think it’s just that the web is always going to resist that temptation to silo it into specific arenas right? There’s not a purely mobile web, or a purely desktop web, or a purely tablet web. I think by default the web wants to exist on all of those places, and you can definitely design and build experiences that are maybe more tailored to specific device classes, but I think at the end of the day this promise of designing more flexibly is something that we’ve been talking about since John Allsopps A Dao of Web Design back in 2000.

It was really about designing about the ebb and flow of things. The web isn’t about a fixed width and height, it’s about being completely flexible. Being aware of and subservient to how the user wants to actually view that content. I think it’s only recently, until we got flexible grids and media queries together that we could act on that promise of actually shaping that flexibility a [12:00] little bit more effectively. I think in another couple months somebody would have written something like responsive design, because I think we needed a way to talk about the flexibility of the web as a strength rather than as something that needed to be limited. So we could really start thinking about how our content and how our designs needed to flow across frankly an infinite range of screen resolution and devices. Yeah, I think I was just maybe the first one to strike, and like I said I’m just …

Justin Avery: Strike while the iron was hot.

Ethan Marcotte: Yeah, or something. Yeah.

Justin Avery: We had spoke about … A little bit earlier about layouts and designs being different, and also the responsive layouts as well. Recently at the Responsive Day Out, which I was lucky to catch you talk for the second time this year, Rachel Andrew was talking about grids, and the new spec around that. Some people have asked me around what’s the difference between Flexbox and the grid for the layouts, and how does this affect responsive design. I don’t really have an answer at the moment. It’s new to me as well, have you had much experience or worked with the grid layout stuff before?

Ethan Marcotte: Not extensively. I’ve been monitoring template and grid layout for years. I’ve just been so excited about it generally, but it still feels a little too early to use on a client’s site or on a production design. To be honest, Rachel Andrew knows … She’s forgotten more about those specs than I’m ever going to know. She’s really studied those, and can speak way more authoritatively than I could, but I think generally Flexbox and grid we’ve been relying on frankly, floats and positioning for all of our layouts now for so long. They work incredibly well for what they are, but there’s so much more we could potentially do with layout. [14:00]

I’ve been really excited to look at Flexbox and grids. Specifically because it’s … They give us a lot of the control that we need from each of … From floats and positioning, but they’re so much stronger and so much more resilient. We can get the source independence of absolute positioning, but still have some contextual awareness in our layouts. Anyway, in terms of the difference between the two, at least as I understand them, broadly speaking Flexbox is really ideal for individual modules, and controlling the flow and layout of pieces of content within each one of those modules. Really a basic example would be a photo caption pair, so that you could maybe at certain breakpoints or certain vertical breakpoints control which one of those flows to the top, at different ranges.

Grid is really for that like macro level layout, for what we consider the page right? You could really determine, okay well this specific content module needs to exist in this particular part of the grid. There’s a really beautiful way of describing your layouts in CSS using the grid layout modules. I’m real excited to start seeing more browsers use it, but at least right now I think it’s only available in Chrome Nightly.

Justin Avery: Yeah, and it’s mainly being … Well it was originally mainly being driven by Microsoft as well wasn’t it?

Ethan Marcotte: Yeah, I think that they wrote the spec initially, and then I think the syntax as the … [crosstalk 15:34] and again, this is more of a … Yeah, yeah I think it’s just once other people started working on it then they refined it a little bit. Yeah, I think IE has an implementation of grid layout, but I believe it’s not quite close to the existing spec.

Justin Avery: I mentioned that I’d lucky to catch you twice at Response Day Out and at Beyond Tellerrand, and although it was a similar talk, [16:00] I think it’s a testament to how good the talk is, is that the second time I saw it I took a whole bunch of other things away from it, and I just think that …

Ethan Marcotte: Oh it is.

Justin Avery: … the first one it just took a while to play around in my head and actually sink in, and work out what I can actually do with it, but part of the talk … I don’t want you to run through the talk again, but you talk about being lazy and not putting … Well, being lazy, but you’re actually doing a lot more. You’re laying all of these complexities upon a basic approach. Is that something that you’re focusing more and more about, or is something you’ve always looked at?

Ethan Marcotte: Yeah, I think so. Well, the talk is really about thinking about laziness as a response to all the complexity that we deal with, and it’s a little tongue and cheek. I’m talking about …

Justin Avery: It’s not lazy at all what you go through. (laughs)

Ethan Marcotte: Well, I guess some … You could argue that it is, but the talk starts with a quote from Khalil Gibran who … and it’s a beautiful line, but it’s something along the lines of our anxiety does not come from thinking about the future but from wanting to control it. When we’re looking at the fact that we’ve got all these new device classes that are hitting the marketplace, including some we’ve never really thought about before like wearable browsers. We’re dealing with the fact that the web just as a network that we use to deploy our work is so much slower, and maybe more volatile than we like to think about.

our anxiety does not come from thinking about the future but from wanting to control it

We’ve got all these challenges in our work on a daily basis, so how can we maybe not feel some of that anxiety that Gibran is talking about, and actually try to think about not controlling the web as much, as just maybe trying to shape it. Provide some parameters for it. Let go, I guess, a little bit of that need to control the future. Anyway, it’s a bit of a ramble about how that [18:00] desire to do a little bit less has been an influencing some of my work, but it really wraps up with progressive enhancement in general. Which is a little bit of a technical, I guess, mindset right? Thinking that every browser and every device has access to your design, even though the visual experience or the interactive experience might be tailored to the capabilities of the device or the browser.

This is … even the biggest responsive redesigns happening right now, like the Guardian and the BBC, they’re all banking on this. The reason they do that is so they don’t have manage some sort of massive browser and device database, but they can really just focus on designing some broad experienced tiers that address basically all the devices that are going to be accessing their content. I guess, for me at least, it’s been really helpful to start thinking about progressive enhancement, and maybe building lighter weight layout frameworks as ways to hopefully keep my designs and my interfaces a little bit more future proof. Maybe not trying to perfectly manage the web, but really just try to let go a little bit more.

Justin Avery: Speaking of frameworks, there’s always a contentious issue around do you use them more or do you not. Do you see any benefits around having things like the Bootstrap or Foundation, things like that in people’s workflow or out there at all, or is it something which people should steer clear of?

Ethan Marcotte: No, I think frameworks are amazing frankly. I say this in the talk, and I think that they’re an invaluable tool for the right purposes. For example, they’re incredibly valuable for learning more about web design. Especially if you’re trying to learn about responsive design, and just how to manage layouts for the first time in a more adaptive [20:00] fashion I think they’re a great entry point. I use them in my own practice. When I’m trying to talk about layout ideas with clients, they’re a great way to just grab some code off the shelf. Here’s what a grid structure could look like, maybe we need to reorder the content in this way, does this feel right to you? It’s at least in that purpose, it’s great throwaway code.

I think it can be valuable in a production environment absolutely. Especially if you’re dealing with a larger team, and that could take some of the ambiguity out of that, but where I start to start wonder if there’s more limitations there is just even thinking about how they structure grids in general. With a lot of presentational class name in the markup. That’s still very page centric right? It’s still, here’s our ideal version of the grid. It’s usually eight to twelve columns …

Justin Avery: Yeah.

Ethan Marcotte: … and then we’re going to sort of in the markup articulate how that needs to adapt at certain breakpoints. That feels a little heavy to me, because we do have, and again not to bore anyone with the talk, but we do have all these great tools in CSS. You mentioned Flexbox and grid layout, even stuff like nth-child for example. We have all these great ways to managing our layouts at a level higher. I wonder if maybe we should be taking more advantage of that. Yeah, I think frameworks are absolutely beautiful, but I think that at the same time defaulting to them, and this is true of really any kind of approach, but just picking it up because everyone uses it could be potentially limiting in its own way.

Dave Rupert at Paravel, has this wonderful line about how he things about every project that he works on, as he’s building a tiny Bootstrap for that one client.

Justin Avery: Yeah.

Ethan Marcotte: Building a framework for the design [22:00] that you’re actually working on, and that’s not always a luxury people have, but I think it’s a really powerful way of thinking about the work that we do I think. That could be from an HTML CSS standpoint, or that could be from a designing a visual system for a new site. Think about this as a custom framework, not necessarily that’s being maintained by a community. Anyway, soap boxing.

Justin Avery: (laughs) No, everyone loves a good soap box, especially when it comes from authority. You get a ton of recommendations, or maybe not recommendations but Tweets probably both to BEEP and to RWD about, “Hey, check out my awesome new site we just delivered.” You must just get tons of them. When you go and check those sites out is there anything which you see over and over again, which you cringe and go, “Oh, I wish they didn’t do this,” or are there errors in people’s developments of responsive design sites these days that you think should be avoided I suppose?

Ethan Marcotte: It’s a great question. I see plenty of errors in my own work frankly, so I’m not going to criticize anyone else. (laughs)

Justin Avery: I’m not asking you to name names, just in general.

Ethan Marcotte: No, no. Yeah.

Justin Avery: Or criticize yourself, what are you doing wrong Ethan? (laughs)

Ethan Marcotte: Oh [crosstalk 23:26].

Justin Avery: Where are you going wrong?

People just sharing their work, and sharing it with me it’s really great frankly. It’s one of the best parts of my day

Ethan Marcotte: You said we only have an hour. I don’t know if we … Well, my mother said ..(laughs). No, I think … We talked a little bit about the definition of responsive design, and the RWD account Twitter, which I still can’t look at that user name and think rear wheel drive, but anyway. The Responsive Web Design Twitter account it’s really amazing. People just sharing their work, and sharing it with me it’s really great frankly. [24:00] It’s one of the best parts of my day. I think what tends to … When I get a link basically what I’m checking for is I’m checking to see if aesthetically speaking if I’m impacted by it, or if the content’s really amazing, there’s some emotional response there.

I also just basically at the end of day for also is this a flexible layout, and does he use media queries. If it’s a masonry driven layout, or if it’s a couple fixed with layouts that are shuttled back and forth with media queries, it’s still a beautiful site, and it’s still a wonderful adaptive layout, but may it’s not a responsive site. Maybe it doesn’t qualify, so anyway, but that’s what I meant earlier by keeping the barrier to entry low. I don’t do extensive device testing on every link that I’m sent.

Justin Avery: Yeah.

Ethan Marcotte: I don’t fire up the network tab, and say well, oh your homepage is over seven hundred kilobytes, sorry I can’t link to this. It’s really about this is a responsive layout, and this is a beautiful or a moving piece of design, I’d to actually share this with other people. Invariably, and this is both a challenging and a good thing, is you’ll get a lot of responses from like, “This doesn’t work on my Nexus 5,” or “This homepage is four megabytes in weight,” or something like that.

Justin Avery: This has killed my data plan for the month or …

Ethan Marcotte: Yeah, yeah which is a very valid concern, and so they’re sending them to me rather than to the site owners. Which I feel maybe is a little bit of a missed opportunity to actually share this with the people that could maybe do something about it. I think that those point to two things that I think just generally as an industry, I think we’re still … We’re still trying to understand better. I feel that we’re [26:00] on the device compatibility front we’re just now understanding that maybe not everybody’s on the latest android or IOS. Maybe some folks are using Apple Mini, or that they’re using one of … There was this report in Wired a couple months ago about how Erickson was basically saying that the most popular smartphone of the world is still running android 2.3. So, you thought IE6 was challenging, we’ve got much bigger problems …

Justin Avery: Does …

Ethan Marcotte: … but anyway … Oh sorry.

Justin Avery: Was going to say there’s an amazing presentation. I think you link to it actually, about if someone says they’re designing for a responsive design for an android browser just point them to this presentation.

Ethan Marcotte: Yeah, androids fragmentation is its defining feature.

Justin Avery: It’s insane.

Ethan Marcotte: Yeah, there’s nowhere that … The presentation is something of … There’s no one single android basically, and there’s this great … One of my favorite Tweets. Actually, if I type in android in my location bar, because I’ve referenced it so many times, there’s this Tweet where somebody took two different … A photo of two different android devices running the exact same ID of the OS. The same build ID, and they both say that they support Webfonts, but one of them is just completely not, because they’ve been forked by a carrier, or somebody had modified it along the way. Anyway, which is … Again, android is a wonderful beautiful platform, but at the same time I think people stop …

Getting back to the device compatibility point it’s just because this works on my device doesn’t necessarily mean that it’s going to work more broadly. A device compatibility, and then the other one is, like I said before, performance. How can we start thinking about bandwidth and load times from the beginning of the design process. Rather than trying to think [28:00] of this as a technical problem that needs to be stapled on at the end. Which is challenging I think, and we’re still trying to figure that out.

Justin Avery: Is this something that you do with your work that you’re doing at the moment?

Ethan Marcotte: Yeah, yeah. I actually had a really great conference call earlier today about setting a performance budget in place for a site. I think that this notion of a performance budget has been a really great tool in general. It was … It came to my attention on a Clearleft Blog about a year and a half ago, and folks like Tim Kadlec have really been doing a great job keeping performance and responsive designs brought together. Also, the folks at Filament Group, but yeah the performance budget is a great way of starting … At the beginning of a project saying as a team, this is what constitutes a well performing design. The BBCs performance budget was that every page on the site should be usable within ten seconds on a sub-3G data connection. Which sounds punishing frankly. If folks are on 2G connections …

Justin Avery: It’s tough.

Ethan Marcotte: Yeah it’s tough, but it’s a goal that they agreed upon at the outset, and that shapes the design right? That shapes the content that they’re actually introducing into the design, and it shapes the new features that they’re building. When you have that lens at the outset it improves the product. It improves the sites that we build. It improves the interfaces, because performance and user satisfaction are so tightly bound together that the earlier we can start having those conversations I think the better off our products are going to be frankly.

Justin Avery: Yeah, I always loved the story of how YouTube went from I think it was a one megabyte player down to something around 100K.

Ethan Marcotte: Yeah.

Justin Avery: They saw all the response times go up.

Ethan Marcotte: Yeah.

Justin Avery: It was because they were able to … They … widens the accessible [30:00] market, because people in countries who had sub-3G connections, or areas that had sub-3G connections could now access the content.

Ethan Marcotte: Yeah.

Justin Avery: That’s kind of, I suppose, what BBC got in or trying to achieve there, is to take that content to the masses.

Ethan Marcotte: Yeah, I know absolutely. It’s a beautiful story. I think it was Kris Zacharias wrote about it about a year and a half ago, and they did the math. I think when they got that 100K prototype out in the wild it was taking two minutes to load, which basically meant that the old one meg version of the page was taking twenty minutes to load on these slower connections. He’s got this line in there about if you can keep your client side codes small and lightweight, you can open your product up to new markets, and I think there’s something beautiful about that.

Justin Avery: Nice. One of the … You do … Aside from the client work that you’re doing now. I spoke about the Responsive Design Workshops at the beginning. What’s … Without, again without naming names of people that you’ve gone to speak to, what are some of the areas that you see larger corporations lacking in, and when you’re giving them advise and talking them through how to approach these problems, what’s the general thing that people are doing incorrectly, I suppose most of all, or where do you start them off?

Ethan Marcotte: That’s a great question. I think that … It’s interesting, because I think, and this is true for independent designers and developers as well, I think that the more responsive work that I do, and the more responsive work that other people do, I think that they quickly realize the technical problems aren’t the big ones right? Like FluidGrids, Fluid Images, and Media Queries there’s some competency you need to build to actually work with them, but it’s not like at the end of the day those are all that difficult to work with. Where things start to get complicated is when you [32:00] are collaborating with a designer, or collaborating with a developer.

Maybe you don’t actually interface directly ever right? Maybe you’re just sending emails back and forth, so how are you actually designing a responsive site if you’re not actually building it? Are you using Photoshop? Are you using Illustrator? How do you actually communicate to somebody who’s going to be implementing your work how that design should adapt and respond. Generally speaking, work flow I think in figuring out how to work more responsibly and more flexibly, or even if you just put responsive design aside. I think just the fact that we’ve moved beyond the desktop, and we’ve moved beyond this idea that our designs are only ever going to be experienced in this one fixed view, has made a lot of things more challenging.

Trying to figure out how we can work more nimbly. How we can stop thinking about design as being finished once we get sign off on comps. In terms of process there’s a lot of different models for that going around right now. We’ve had folks Brad Frost and Dan Mall advocating for, or thinking about the design of the more discrete components of our UI, and building up this catalog of patterns that we can reuse to then build up to larger pages. When I worked on the Boston Globe it was … We had these desktop specific designs in fixed comps that were signed off on, and then the challenge was okay well how do we actually build the design that the client can actually see how it’s going to respond.

Then it was basically more about building a prototype that we could rapidly iterate over, but working alongside the designers who’d gotten us up to that point. I think just generally speaking, we’ve got these different device classes and different browsing contexts that we have to be focused on, and it’s really … I think a lot of people [34:00] are just realizing the old ways of working. Just thinking about that waterfall linear approach to design is maybe not what we needed it to be for the web in general, and maybe we need an alternative.

Justin Avery: So more of the advanced techniques the less technical, and more about the workflow about working with people in this …

Ethan Marcotte: Yeah.

Justin Avery: … that’s the hard bit I suppose.

Ethan Marcotte: I would totally agree. The CSS that we use on a daily basis is I think secondary to figuring out how we communicate how these designs are going to work right? If I sent you a Photoshop document for a new page and asked you to build it, that document doesn’t tell you not just how the layouts going to adapt, but okay well what happens if someone’s on a Blackberry device from five years ago. What if they don’t have JavaScript? What if they don’t have a touch base interface, or what if they do? We don’t have I guess a web native design tool right now, and there are some people that are trying to work around that, but I think at least right now we have to solve some of these problems with a better process, and collaborating a little bit more closely.

A lot of the workshops that we do at some of these corporate clients is really about teaching people how to think about designing for mobile first rather than as an afterthought, and how that influences the design process from that point forward.

Justin Avery: If you’re approaching a design yourself, do you still jump into Photoshop every now and then? You still have that passion for it?

Ethan Marcotte: Oh yeah. Well, passion and Photoshop are …

Justin Avery: So, yes you still do jump in.

Ethan Marcotte: Yeah, I do. I definitely do, and think that … That’s not to say it’s the best way, but it’s the best way for me I think. Everyone has the tool that’s going to be best for them, and at least for me, I still need to do a lot of that early exploration and sketching in something like Photoshop. [36:00]

Justin Avery: Will you …

Ethan Marcotte: But …

Justin Avery: Will you … Sorry … Will you sketch the mobile first approach with a vision of what the desktop will look like, or do you just focus? Do you try and put that out of your mind, and just go no, we’ll do mobile first and then once that’s done we can jump in the browser, and that’s when the larger screen sizes will start coming?

Ethan Marcotte: Yeah, that’s a great question, because the thing is about my process is keeps getting weirder and weirder on every project that I work on. It’s not … It’s still changing, because I’ll do something, and it may or may not necessarily work all that well, or more often than not it’ll … What works for one client may not necessarily be the best approach for another. Anyway, but generally speaking I’ll try to have some discussions about layout before I actually get into Photoshop, because Photoshop does have a lot of overhead associated with it. That might be doing some responsive wire frames, or maybe it’s working with a client on some content sorting exercises so we can actually talk about breakpoints more broadly just by moving postings around on a wall.

Justin Avery: Yeah.

Ethan Marcotte: But then yeah, I think a lot of … Just in terms of thinking about the actual design, it still does tend to start in Photoshop. I tend to start with the most complex layout. I still try to think about the wide screen first just because it helps me get a view of everything that [crosstalk 37:34] I’m going to be working with.

Justin Avery: Yeah.

I’ll often have a mockup of what the small screen view might look like, or maybe I’ll just move it straight into HTML and CSS, and try to start trying to figure out how things could maybe adapt in different ways

Ethan Marcotte: Yeah, but that said, I don’t try to finish it there. I really try to move quickly into something more responsive as quickly as possible. I’ll often have a mockup of what the small screen view might look like, or maybe I’ll just move it straight into HTML and CSS, and try to start trying to figure out how things could maybe [38:00] adapt in different ways. Then sort of Pogo Stick back and forth between templates and Photoshop as much as I need to. That’s helpful for me, but like I said, I don’t think anybody has really figured out the one true way to work responsively right now. I think we’re all just trying figure out here’s the best way that works for me, or here’s the best way that works for my team.

Justin Avery: Makes you the most creative. Gets the job done.

Ethan Marcotte: Yeah, exactly.

Justin Avery: The best possible way, yeah.

Ethan Marcotte: Yeah, I work with so many organizations where designers and developers might be in different continents. How do you actually communicate design requirements to somebody who might be receiving their design in Jira tickets that are issued to them in their inbox? That by itself doesn’t necessarily work, but maybe there’s some extra workflow that would be best for that particular situation.

Justin Avery: Yeah. That’s really good to know though. If you had quite a few discussions with designers and stuff about the best approach, and yeah it’s good to hear that it’s not the same for everyone. There isn’t a be all end all, one size fits all.

Ethan Marcotte: Yeah, I definitely don’t speak with any authority other than mine. I have no idea what I’m doing.

Justin Avery: Nor do the rest of us. We’re kind of out time, there’s two more things that I just wanted to ask of you. They’re both a little bit fun. One is something which a friend of mine, Chris Burnell asked me, which I thought was really quite clever. If you could sum up the future of responsive web design with a single GIF what would it be?

Ethan Marcotte: Oh wow.

Justin Avery: Now, you can have some time to think about that, and possibly just send it through, and I’ll add that GIF to the show notes if you don’t have one to hand.

Ethan Marcotte: Oh man, [40:00] you know what I think I might have a good one for you actually. All right, I’m going to just chat you this really quickly.

Justin Avery: All right, send that through. I don’t think I should try and … Maybe not.

Ethan Marcotte: No, probably not.

Justin Avery: I’ll put it in, I won’t try … We’ll leave everyone hanging until I … Yeah, that is a good one. That is a good one.

Ethan Marcotte: It works for so many situations.

Justin Avery: It does. [crosstalk 40:25] It does, and I can … That is the future of everything really. Thanks for that. The other one, as well as you had the question from Steven earlier, is for our next guest, what is one question that I can ask our next guest on the podcast?

Ethan Marcotte: Does it have to be related to responsive design?

Justin Avery: Doesn’t have to be. It can be just about anything.

Ethan Marcotte: Favorite Star Wars movie go.

Justin Avery: Favorite Star Wars movie okay. Does it have to be necessarily any … Can go across the six?

Ethan Marcotte: Well, then we get into a discussion about whether or not those were actually films in the prequels, but yeah we’ll say that the [crosstalk 41:07].

Justin Avery: Leave the CGIs out.

Ethan Marcotte: Right, right. Yeah, no, no, we’ll keep it liberal. We’ll say any of the six films.

Justin Avery: All right. We’ll go with that then, and see how that happens.

Ethan Marcotte: Perfect.

Justin Avery: Thank you very much for your time today. Is there any … Are you writing any new books? Are you speaking soon? Are you out and about? [crosstalk 41:27]

Ethan Marcotte: Yeah, no I’m definitely out and about. I’m working on some writing projects, but I think the … You mentioned the Responsive Design Workshops. If you keep your eye on responsivewebdesign.com we’ve got some new stuff that are going to be … that’s going to be launching there pretty soon, but otherwise I’m speaking at a couple events over the next few months, and you can find me on Twitter at BEEP or at RWD, and I’d love to chat with any of your listeners there.

Justin Avery: Excellent. All right, well thank you very much for joining us. [42:00] I hope everyone learned something new today, I certainly did, and tune in again for our next podcast. Thanks very much Ethan.

Ethan Marcotte: Thank you Justin this was a real honor.

Justin Avery: Cheers. Thanks. Bye.

Ethan Marcotte: Bye.