Episode 132 of The SitePoint Podcast is now available! This week our regular interview host Louis Simoneau (@rssaddict) interviews Ethan Marcotte (@beep or @rwd) the designer widely credited with originating the term Responsive Design. He was also part of the team to put this into action for the first time on what could be called a ‘mainstream’ site, The Boston Globe.
You can download this episode as a standalone MP3 file. Here’s the link:
SitePoint Podcast #132: The Boston Globe Goes Responsive with Ethan Marcotte(MP3, 37:34, 36.1MB)
Episode Summary
Louis and Ethan get to grips with how the Boston Globe design job came about, how the idea of Responsive Design appeared and the question “is everything that’s not responsive simply behind the times?”.
Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/132.
Interview Transcript
Louis: Hello and welcome to another episode of the SitePoint Podcast. This week on the show an interview with a special guest; regular listeners to the SitePoint Podcast will have noticed that over the past few months, say, we’ve focused quite a lot in a lot of our episodes on the general concept of Responsive Web Design, so it’s a great pleasure to have on the show today a person who many would claim is the originator of that concept, Ethan Marcotte, hi and welcome to the show, Ethan.
Ethan: Thank you so much for having me.
Louis: Absolutely it’s a pleasure. The idea for having you on the show has been sort of in the back of my mind for some time, and it was brought sort of in the forefront recently by the redesign of the Boston Globe website which we discussed on a recent panel show. How have you been going, Ethan?
Ethan: Good, good. It’s been kind of a crazy month, launched a little website like you said, and yeah immediately thereafter went on a very belated honeymoon with my wife, so I’m kind of jetlagged and tired and a little bit of a flu, but otherwise yeah just really good to be back and online.
Louis: How belated of a honeymoon?
Ethan: We’re having our two-year anniversary this Monday actually.
Louis: Alright, well, you get around to it eventually.
Ethan: I am so good at time management (laughter).
Louis: Like I said, I’ll get to talking about the Boston Globe redesign later because that’s the main reason I wanted to have you on the show.
Ethan: Sure.
Louis: But maybe just back peddle a little bit, talk about Responsive Design in general, it’s something we’ve been touching on a lot on the show, it’s kind of become the topic of the day in the circles of web design and development over the past let’s say a year. And this all sort of stems out of an article that you wrote for A List Apart, when was that about two years ago, right?
Ethan: Yeah, May of last year actually.
Louis: Oh, so not even that long.
Ethan: No, not too much. I think I coined the term April of last year at An Event Apart in Seattle, and then kind of followed it up with an article about a month later.
Louis: Right. The obvious question that springs to mind is a question you probably get asked a lot, is the degree of let’s say acceptance that the idea is found in the web design community, and the degree to which people have been willing to play around with it, implement it, we’ve seen frameworks adopt it, galleries on the Internet; does any of this come as a great surprise to you or when you came up with it did you think, oh, this is gonna be the next big thing or what was the –?
Ethan: (Laughs) Um, I’m still kind of astonished by how much people are really excited about it I guess. Yeah, it was just something I’ve always been passionate about, being a little bit more I guess I don’t know, flexible, stupid term, but yeah with my purchase design anyway, and it was something that I was kind of just excited about combining flexible layouts and media queries. So, that and in it just seemed to be — we seemed to be hitting a point where especially at the time where I was writing it a lot of our approaches for designing across different devices or different quote/unquote contexts definitely felt like it was getting pretty fragmented. That’s not to say that there’s anything wrong with device specific design, I think there’s a fantastic business case or fantastic argument to have there, but at the time anyway it definitely felt like that was kind of the default like everyone had their sort of m. sites or their WebKit dot sites or redirecting iPhone users and kind of ignoring everyone else. So, you know it was just kind of a — putting another option on the table, kind of an alternative, so the fact that a lot of people have kind of run with it is really heartening, I mean they’ve done things with it that I never would have imagined. So, yeah, it’s kind of exciting.
Louis: Definitely. When you first saw let’s say the addition of more sophisticated media queries to the CSS specs, was it something that immediately leapt into your mind like, oh wait, I think we can do something clever with screen size or did that have to kind of brew for a while?
Ethan: I don’t know, I mean that’s a great question, I think I’d actually just finished up a mobile specific website for — I was working at Happy Cog at the time and a couple months earlier I had finished up an event site for a South-by-Southwest party they were hosting, and part of that was actually designing kind of an event experience around it. And for the night of the event there was actually going to be some sort of like live voting app that was going to be accessible to people in the audience and, you know, so there was this need to kind of create this mobile specific experience. And so I was reading a lot of kind of great articles at the time about how to do that because I’d been so focused on the desktop at the time, and yeah, I think it just kind of came out of that; I had John Allsopp’s A Dao of Web Design up in one tab and then some great stuff on media queries in the other, and I kind of really feel like that’s sort of where it happened, you know we have all these great tools to kind of build a little bit more flexibly but all these constraints we keep introducing in the medium, I don’t know, it kind of feels like we can design to the flexibility of the Web as a strength rather than a, I don’t know, some sort of limitation or characteristic that we need to work around.
Louis: Yeah, absolutely. I guess that brings up another question I had which is do you feel like there’s been any kind of misunderstanding of the direction that you went initially with the idea of Responsive Web Design? What I mean to say by that it seems to have been taken as a sort of this is the way to just bridge the gap between mobile and large screens. So if you look at your initial example in the article on A List Apart and various other examples like that, they’re very fluid designs that sort of just look very good at a variety of widths, and a lot of people have followed on from that and it seems like it’s more like it’s a fixed width layout and then another fixed width layout and there’s just a cutoff between the two. Do you feel like it’s not quite what you were meaning or is that just a different way of doing the same thing?
Ethan: I mean it’s definitely a different way of designing beyond the desktop. I think media queries are an incredibly powerful tool for that. For me I’ve been sort of talking a little bit about this recently but like I kind of think that there’s like this larger class of quote/unquote adaptive designs that use some sort of front end technology whether it’s JavaScript, whether it’s style sheet switchers, whether it’s media queries to sort of change the layout depending on some parameters on the client side. And then responsive design has always been for me specifically the union of flexible layouts and media queries, so I like to keep those two terms kind of distinct, and that’s not to imply any kind of judgment, like one of my favorite adaptive sites is probably informationarchitects.jp, it’s a beautiful site with fantastic content, the designs lovely, but they’re sort of shuttling between three distinct fixed width layouts and that’s fine. (Laughs) I think it’s kind of up to the designer and the site owner to figure out what’s the best fit for their comfort level, for their content and you know just because it’s not responsive doesn’t mean it’s not beautiful, so that’s kind of where I fall. So the Globe I think is, you know, a good example of traditional like definition of a Responsive Design, it’s a completely fluid grid with kind of an upper ceiling attached to it, you know, with a maximum width applied because — and that was more of a time constraint than anything else, but the actual foundation is flexible even if media queries weren’t available to it you know the content will kind of fill the screen accordingly, so yeah, that’s kind of where I sort of draw the line in my mind, but there’s no like judgment implied there.
Louis: Yeah. One of the things you brought up about the Globe site is that, as you said, there’s an upper ceiling to the flexibility, so there’s a point past which you won’t reshuffle the content any further because it’s at a sort of reasonably maximum width.
Ethan: Yeah.
Louis: That’s something which keeps occurring to me as I look at responsive web design, the focus seems to be on how do we take these sort of desktop-centric sites that we’ve been designing for the past ten years and make them fit on iPads and smaller screens.
Ethan: Yep.
Louis: But I think anyone will have had the experience where you come across an 800 pixel fixed width website on your 24inch cinema display.
Ethan: (Laughs) Yeah, totally.
Louis: And like, whoa, this is an incredibly poor use of space.
Ethan: Sure.
Louis: And it seems like not a lot of people have taken it in that direction, in the direction of like now we’ve got more space how do we fill that out?
Ethan: Yeah, totally, I mean I think that there’s definitely like I think there’s a number of people that sort of find responsive design attractive because they sort of see it as kind of a shortcut to being mobile friendly, and at the end of the say it could definitely be used as such, you know, you could kind of cram this desktop specific design into a tinier screen using a flexible layout media query, that’s totally awesome. But for the Globe, I mean — and I talk a lot about this in the book without actually talking about the project, but basically a large part of the design process for us was taking these very desktop-centric designs and then kind of letting the use of the design inform the rest of the design process, like actually moving from comps into a responsive template framework, you know, basically pouring all the content in, pouring all the images in and then actually using devices and browsers and actual live interaction with the design as part of our design reviews from that point forward, so we could actually have a lot of great discussions about sort of using Luke Wroblewski’s Mobile First concept as sort of a wedge for does this content — does this module with 58 links in it actually have any value to our mobile users, if not, what value does that have to any of our readers, you know; does this actually belong on the page. And that’s not to say that there’s like an easy binary there, but it’s really about taking a hard look at the content we’re designing and making sure that — making a commitment to it, kind of across every context, across every device. I mean the front end technology’s there to kind of make the design fit on any screen, but it’s really you know if you can start the project with a hard look at the content you’re designing and asking yourself whether it’s really valuable I think the overall experience is going to be much better for all your readers.
Louis: Yeah. You mentioned in there the idea of design comps, and I guess that’s something that’s interesting in terms of these very flexible layouts and include a number of different ways of organizing the content on the screen. Does it pose a big challenge in terms of the traditional workflow of design where you’d usually have sort of a Photoshop comp that is this is what the site will look like?
Ethan: Right.
Louis: And then just pass that along to the stakeholders, the decision makers, and they can say yes this is what we want the site to look like, whereas when you’re doing Responsive Design there’s either, as we said earlier, there can be three or four different fixed layouts or there can be sort of an infinite gradient of different ways the content can be arranged on the screen; how do you present that and how does it affect the workflow of design?
Ethan: Yeah, no, I mean that’s a fantastic question. So for the Globe specifically I mean there’s a fair amount of creative work done by the time I came on the scene, and when Filament Group, who’s actually my client for the project, and I sort of met with the Globe they’d already done a number of sort of desktop specific designs for certain sections of the site and kind of had an understanding of like this is kind of our catalog of all these brand assets and all the functionality that we need to include. So one of the first discussions we kind of had with them were we tried to sort of position the comps as kind of like, okay, here’s a catalog of our understanding of what we think the design needs to be, you know, kind of like here’s our best guess of how this design is gonna work responsively because it’s not feasible for us to kind of comp out say how the homepage is gonna look on tablet and on phone across all these different resolution ranges, across different orientations, so it mostly about, okay, we’re going to be moving into HTML CSS prototyping really quickly and continue to basically vet these design assumptions, you know, live in the browser. So, that allowed up to kind of like iterate over certain components that didn’t necessarily work all that well initially when we sort of ported them into all these different screens and fine-tune the content, but it also helped us be a little bit more I guess agile by — and I don’t mean like capital A methodology agile, but like —
Louis: (Laughs)
Ethan: Which I’m told is a thing (laughter). Yeah, I keep presenting this sort of like more iterative workflow when I’m talking about responsive design and everyone’s like have you guys heard of agile methodology, that’s not something I have a lot of formal training in, but we sort of settle on this hybrid process where like the design and development teams will basically be working really closely together throughout the process, and one half of the table would be sort of articulating design recommendations in Photoshop and in Illustrator, and the others would be designing in HTML and CSS, but both are sort of making I guess recommendations for how the design needs to evolve, and then they just kind of need to be I guess vetted in as like a unified group.
Louis: Do you find yourself doing a larger share of design work and design thinking directly in the browser now than you did say a few years ago?
Ethan: Oh, yeah, even a year ago. I don’t know, this waterfall process is, you know, that’s every shop that I’ve worked in has used some variation of it, and the Globe was definitely like the biggest departure for me, you know; what do you mean we’re not gonna get a signoff on the comps and then produce them? (Laughter) So it was — I mean it was nice to be a little bit more flexible about how we were working because, I don’t know, the example I keep coming back to is the masthead on the Globe is — it might not look like it but it’s probably one of the more complicated parts of the whole design. I don’t know, we made some initial visual recommendations in the CSS about how the content that was sort of specked out at the desktop level could actually adapt itself to the different breakpoints and we weren’t really happy with it. So we kind of when we had our design review we kind of called this out as an area of the design that might actually need some more love, and everyone kind of agreed that what we’d built sucked. So basically what happened was you know it was a really good exercise for us to sort of treat the prototypes in a scenario where we could fail quickly with design, but we’re always asking ourselves like does anything need more art direction, does it need more further visual refinement, and so kind of the design half of the team decamped and came up with these fantastic sketches about what the masthead would look like at 480 pixels or 600 pixels or something like that, so we could implement from there but you know if we hadn’t kind of identified that as a really complex area of the layout, and we iterated over this like about a dozen times pretty quickly because we were just sort of like always, okay, let’s see if this works, we’ll move into HTML and CSS, move things back, you know sort of refine from there.
Louis: Right. Coming back to something you said earlier, you mentioned that you were brought on sort of late in the project, there was an amount of design that had already been done.
Ethan: Hmm-mm.
Louis: Did the agency that was hired to do the job and then went out and hired you, had they had it in their mind that they were going to do a Responsive Design and that’s why they came to you or how did that work out exactly?
Ethan: That’s a fantastic question. So Upstatement was the design firm in Boston, they do incredible work and they were really great to work with throughout the process. But the Globe was pretty committed I think fairly early on to this notion of we need to get our content out there to as kind of like a broad audience as possible, so there was always going to be some sort of like multi-device component in there, by the time Filament Group got involved, they were the ones who were going to be actually doing a large amount of the production work, and they brought me along, I think the expectation was already there in part thanks to Filament that this was going to be kind of a responsive framework but they still needed to kind of proceed internally with building consensus around a specific look for the site. So, I mean and the design is fairly straightforward, and I haven’t really worked with a comp yet that hasn’t actually I guess lent itself to some sort of responsive approach, it’s kind of like the discussions you have after that point like if you are sort of thinking primarily from a desktop context then there are all sorts of questions that pop up about content, about how the design’s going to be, how the experience is going to adapt to different devices and you know those are going to change from project to project.
Louis: There’s a couple things interesting about this project in particular, most notably a lot of people have come out and sort of pointed to it as a sort of watershed moment for the concept of Responsive Web Design because up until this point most of the sites we’ve seen using these techniques have been either small agency sites or personal blogs of web designers, places where people are free to experiment.
Ethan: Right.
Louis: But in terms of a major site with a lot of visibility going down this route, people have made the comparison to I think it was ESPN.com when the shift away from table based layouts to CSS based layouts was happening.
Ethan: Hmm, okay.
Louis: Does it feel that way to you or are you aware of other projects out there that are high visibility and have done this already?
Ethan: I definitely wasn’t thinking of it that way when I was working on it (laughter). I mean like the Wired News redesign and ESPN, you know those are — I mean those are fantastic moments in our industry. I think like for me working on a site of this scale was kind of exciting regardless of whether it was gonna be responsive or not, so that was kind of cool. But I think — I mean the thing that was really gratifying about it was just like it kind of felt like the basic like front end components of like again like a flexible grid, flexible media and media queries, like seeing them work on a site of this scale was pretty exciting just from like a nerd designer geek standpoint, but the real learning process was more around the process standpoint, like getting a design team involved and actually just sort of breaking down that design development barrier and trying to collaborate a little bit more iteratively on something. So, yeah, I don’t know, I mean like the question of scale is an interesting one, but like at the end of the day I hope, you know, maybe it will make people easier to sort of make the self a Responsive Design because I know there are a lot of people that are really interested in it, but you know maybe like when we were sort of making the CSS versus tables arguments, you know, everyone’s sort of waiting for somebody to dip their toe in the water first; I don’t know, maybe the Globe will make that pitch a little easier, you know.
Louis: Right. And even having an example that you can show to people that isn’t sort of a very small agency site or personal blog, that look this is a mainstream site and look at what happens when I drag the window around (laughter).
Ethan: Yeah, yeah, totally. I mean the dragging the window thing around is interesting because I mean like I think of that as mainly like a prototyping tool, right, I mean you know I think the flexible layout’s a critical foundation for Responsive Design, like I said, but at the end of the day you’re designing for specific devices, specific resolution ranges and, yeah, I love doing the browser window thing but that’s sort of like a secondary benefit to me.
Louis: Yeah, oh, of course, it’s definitely something that only designers looking at the site will do.
Ethan: Yeah.
Louis: I interviewed a couple of weeks ago Chris Coyier for the show.
Ethan: Oh, awesome.
Louis: And he’d just done his redesign of his site, and he’s just put transitions on all of the positions of his elements.
Ethan: I know it’s —
Louis: I know it’s fantastic. When we were talking about the Globe redesign actually that’s one of the things that came up on the panel show two weeks ago, like oh yeah this is really cool but the search box doesn’t whiz around when I move it.
Ethan: Yeah, yeah. I heard that show and I realized we lost a reader that day, but, (laughter) yeah, well have to drop that into a future version.
Louis: You know the dragging the window around we can mock it all we want but it’s the first thing that we do nowadays when going to a site. A couple more things I wanted to ask about the Globe and then maybe I’ll come back and talk about another question that’s just come into my mind a bit later.
Ethan: Sure.
Louis: One of the things that’s interesting for a site this size is, to me anyway, would be the sort of technical challenges behind dealing with performance I guess, because something that people bring up when they talk about responsive design for mobile versus dedicated mobile sites is that unless it’s done very carefully you can wind up loading a lot of resources on a mobile device that don’t end up getting used.
Ethan: Yeah, yep.
Louis: And, you know, larger images than are strictly speaking necessary, larger style sheets, content that might be set to display none. Were there any particular challenges related to the site in your work or how did you guys approach that when working on this site?
Ethan: That’s probably another half hour discussion right there (laughter). But I got to give a lot of credit to I mean the folks at Filament Group for a lot of the really heavy technical lifting on the site, I mean most of my work was kind of on the — mostly on the design side of things, like a lot of the layout heavy work and then figuring out the process, but folks like Scott Jehl and Mat Marquis, Todd, Patty and Maggie at Filament Group, like they all did a fantastic job coming up with some great solutions for that kind of code-tax problem that you mentioned. I mean there’s a significant amount of work in trying to keep the upfront download as light as possible, so the initial JavaScript package and the initial style sheet package are very, very light; if you’re on a JavaScript free device or you don’t understand media queries you’re not going to be downloading anything else other than content basically, and then there’s a lot of sort of feature based testing that happens from there to sort of determine what assets are going to be appropriate to your experience, like are you on a touch base display, if so then you’re going to get some libraries that kind of enhance the design intelligently so that it’s a little bit more immersive, but otherwise we’re not going to penalize anybody else. You know, that’s some fairly basic dynamic JavaScript and CSS insertion, so we started off using YepNope at one point and I think we ended up just using much more lightweight just custom loader in the end, but that was sort of Scott Jehl’s baby, who I really think is kind of responsible for everything brilliant about JavaScript that I’m using lately (laughter). Yeah, so that was one of the things and, yeah, we just tried to come up with a lightweight JavaScript vocabulary so that we could sort of identify like some characteristics about your device and then kind of marry that to, okay, well here’s the code that’s actually going to be relevant to you, and then try to keep all the cruft hidden from users that weren’t going to be benefitting from it. From the content side of things I mean we really tried to avoid that display none question, and that’s why we tried to have a lot of discussions throughout the design process about is this actually valuable content to our mobile users. Because, again, saddling people with content they weren’t going to be benefitting from was something we were really trying to avoid. One of the things that really did come out of the project, or a couple of things, but the responsive images script, or Scott Jehl’s responsive images script was really one of the things that kind of came out early, kind of a way to I guess be a little bit more intelligent about how many image pixels were pushing down to our readers. You can’t draw a correlation between the size of a screen and the amount of bandwidth available to it, but the script was kind of a nice way of saying like, okay, well if your screen’s above a certain resolution threshold we’re going to serve up this higher res version of a specific image, if it’s below that threshold then you know you’re going to get this mobile image by default; that’s an approach we’re always — we’re refining or we’ve refined a number of times throughout the project, and I think that some people have been doing some interesting work on researching like browser pre-loaders recently and maybe the client side solution’s not going to be tenable in the long run, but at the time it was definitely like this is kind of our best solution and a lot of people have kind of run with that and kind of improved on it. So, yeah, I don’t know, it was just basically like — it was a really fun project and it was really fun to watch Filament Group work and kind of, I don’t know, crush problems with their giant brains (laughter). I was just a CSS and design monkey for the most part but, yeah, it was a lot of fun.
Louis: That is kind of interesting, though, it does bring up the question that it seems like all of these things are great ideas and they’re fantastic ways of overcoming these technical challenges.
Ethan: Hmm-mm.
Louis: And it does bring up to mind when you say, oh, what you did with CSS and design; does it feel to you like what used to be involved in making a website was just that and all these other technical challenges are sort of added on and made the discipline a lot more complicated and perhaps raised the barrier to entry?
Ethan: Yeah.
Louis: This kind of work is really, really hard for sort of an individual to do.
Ethan: Right. Well, yeah, yeah, I see what you’re saying.
Louis: Again, I’m not making this argument I’m just sort of wondering what your thoughts are on that?
Ethan: Oh, I know you’re picking a fight, Louis (laughter). But, no, that’s a fantastic point, I mean I was thinking. I guess for me it’s like you know if this wasn’t a responsive site, like if this was just a regular fixed width 960 centered site, I mean I think that these are things that would still have been valuable like this really intelligent asset loading I think would have been a key for a site of this size. I mean I think you know I kind of feel like recently we’ve sort of tried to move past this whole notion of like progressive enhancement, you know the sort of serving the content to everybody but being intelligent about how we enhance stuff from that baseline. And I really think that especially for a responsive project but really for any project like being smart about what you’re serving and to whom can be really valuable, so it’s not just sort of like a, you know, the simple like low experience versus high experience, I mean you know I could really see this — some of the stuff that I learned from the Globe being a nice framework for some of my other client work, so yeah I kind of feel like a lot of the stuff that came out of it is just sort of like, I don’t know, it sounds a little high and mighty but it really seems like basic good sense for web design in general. You know, I don’t think we were doing anything revolutionary, it’s just kind of like being, you know, smart about what we were serving up and to whom; if you view the site on like an ancient Blackberry you’re going to get a very basic experience and a lot of hopefully good content, but if you’re on an iPhone or an iPad or the new Amazon Fire you’re going to get a much richer experience and, yeah, hopefully it’s just going to feel right.
Louis: Yeah. It’s also very early in the game for a lot of these techniques, so as people develop either frameworks or just sets of good —
Ethan: Oh, totally.
Louis: — scripts that are easy to adapt and start using it’s going to become I guess more accessible for the wider profession to sort of jump on board with this kind of idea.
Ethan: Yeah, I mean there are a lot of great tools out there right now, and I know the guys at Paravel have been just building a ton of great stuff lately, like FitVids.js, I’m not sure if you’ve seen that.
Louis: Yeah, we actually brought it up on the show two weeks ago I think.
Ethan: Oh, yeah, well Chris Coyier was involved with that, and Paravel also came out with that FitText plugin because Trent Walton likes those big headlines on his blog, but these are fantastic tools that I think like they make some of these things that make flexible design, regardless of whether it’s responsive or not, feel kind of, I don’t know, insurmountable; so, I don’t know, I’m kind of excited to sort of see like all of this stuff kind of coming out and, yeah, just really excited to see what comes up next.
Louis: Hmm, yeah. One more thing about the Globe, and I’m interested in picking your brain on this.
Ethan: Sure.
Louis: So, one of the things, putting aside sort of entirely the fact that it’s a Responsive Design, that’s interesting about it is it’s sort of a — it’s a paid content gateway, right, so they’ve taken the approach of, you know, it’s not an ad supported free site but rather paid content. And I guess one of the points that a lot of people made about it is that the responsive nature of the design can kind of serve as a sell for that because there’s a lot of newspapers out there doing iPad apps that are paid, and then their website is ad supported. And in this case I guess the logic behind it would have been we can do this once and charge for it because it will be as good on an iPad as an iPad app or as good on the iPhone as an iPhone app.
Ethan: Yeah, I mean I don’t have any great insight into kind of the business decisions on the paywall side of things, I mean I sort of found out the paywall rules on launch day along with everyone else.
Louis: (Laughs)
Ethan: Well, I mean the broad access was always sort of like the Globe was really invested in that, so, but in terms of like how that was going to sort of like — I mean a lot of their marketing messaging since launch has been sort of around that, like it’s been kind of weird being on the subway in Boston and seeing these posters that have like Bostonglobe.comand then there’s like a picture of six devices there, you know, all showing the content, which is cool but disconcerting (laughter). So, yeah, but in terms of the business decisions you know the Globe would be a better entity to answer that than I would be. About advertising specifically I mean that’s actually something I spent a lot of time working on in terms of just coming up with a decent front end implementation for the ads that they did have, and because there was this requirement that if they had an ad property sort of slotted into I guess the C column on desktop they wanted to be able to sort of promote that visibly like pretty high up in the design as the viewport got smaller, so we sort of jumped through a couple of interesting hoops to kind of make that happen. But the thing that I found is like not a lot of ad networks are really thinking beyond the desktop right now, you know some of them sort of treat mobile and desktop as two different products, and there’s not really an elegant way that I’ve seen yet to sort of like have an ad property in the page but then like I guess enhance up from a mobile version or enhance an ad for touch, you know it’s very much like a one size fits all, like this ad kind of slots in here and every screen is going to kind of get that. So, I don’t know, I think that could be kind of an interesting opportunity for somebody to work on.
Louis: Yeah, it’s still something that’s I guess not taken as seriously as perhaps it should be. You see a lot of sort of the dedicated mobile sites without ads altogether when the full version does have ads just because I don’t know what to do with this (laughter). You’ve got to think that that’s what the thinking is, right, like we’re just going to make a mobile version and we can’t afford to serve up ads or we don’t know where to put them so we’ll just not put them there.
Ethan: Right. Yeah, that’s a great question.
Louis: And then, furthermore, looking at the Boston Globe, for example, if you’re looking at it on a mobile device the ads are still there, but clicking through those ads brings you to 960 fixed width with Flash animations and giant forms with 30 fields in them.
Ethan: (Laughs) right, right.
Louis: Which is obviously not good for the advertiser, right, I mean if people aren’t thinking in the mindset of, look, if this is going to be served through mobile devices the content we’re giving these people, the sell that we’re giving these people, has to be suited to that device as well.
Ethan: Yeah, totally, and it’s not — and I don’t mean to sort of suggest it’s an easy like, oh, well we’re just going to stamp in this JavaScript and the problem will be solved, like it’s definitely a big content question, like you know if I’m buying an ad campaign like do I need to start thinking about okay well I need like, I don’t know, a mobile spot, a tablet spot, a desktop spot, a widescreen spot, like how do these — you know, what kind of production overhead does that entail; it’s a big problem and I think that you know if somebody could come up with a way to kind of make that feel solvable that would be huge because mobile advertising’s obviously kind of exploded recently, and if we can come up with a more cross-device way of serving, I don’t know, I can’t believe I’m talking about advertising (laughter), yeah, it would make our jobs as designers a lot easier I think.
Louis: Our content is largely supported by advertising in most cases.
Ethan: Sure, yeah.
Louis: There are a few exceptions like this one. And it’s something as technology develops on the Web maybe there’s bits of it that lag and that can have an effect on how things play out.
Ethan: Yeah.
Louis: You know just to give another example, a few days ago I found myself — I was walking down the street and I saw a poster for something that was interesting, I can’t remember what it was but it had a QR code on it.
Ethan: Sure.
Louis: So I pull up my barcode scanner app just to showoff the cool gizmos to my girlfriend and scan the code and the page that comes up is woefully inadequate for the mobile device.
Ethan: That’s really interesting, yeah.
Louis: And it’s being promoted through a QR code and I can’t even read the thing.
Ethan: Wow.
Louis: So there’s clearly a disconnect here on a lot of levels with the proliferation of devices.
Ethan: Right.
Louis: And I guess over the course — and possibly this particular project will sort of help to bridge that because it’s bringing it in to more of a mainstream culture world.
Ethan: Hmm, yeah, we’ll see. Like I said, it’s a huge problem; it’d be really cool if somebody could solve it, especially in a way that we’re not dealing with JavaScript that was written in 1997, so yeah it would be pretty awesome.
Louis: Something I wanted to ask you earlier, and let’s just come back to that, a few people have sort of come out and said — I want to say Jeffery Zeldman was the first person I saw say something to the effect of if you’re not doing Responsive Web Design nowadays you’re not a web designer you’re doing something else.
Ethan: Okay.
Louis: I might be mis-attributing that quote, I’ve also I think I’ve seen people like Jeremy Keith and Andy Clark say things that are very similar in tone, and I wanted to know how you feel about that sort of bringing up when we were talking about you load up a page and you start dragging the window around to see how it responds to different sizes is something we all kind of do now, and you know, I was wondering if you feel like it’s part of best practice now; in October 2011 when you go to a website, a brand new website, and it’s not designed responsively you feel a little bit like, ah, you feel like what you would have felt like seeing an all Flash site in 2005, you know.
Ethan: Right, right. Well, I might but that’s just because I live a very sad existence (laughter). But, no, I mean I think like Jeremy Keith and I both had like posts that kind of came out like a day or two apart, kind of weirdly simultaneously a couple months back about I think as a design community we sort of seize on these sort of like black versus white like, I don’t know, mobile versus desktop, these sort of like binary poles, and for a while there was this sort of like mobile versus responsive discussion going on. I don’t know, I think one camp sort of felt like Responsive Design was sort of being put forward as a replacement for mobile sites and there were some hurt feelings over that, and I definitely don’t, I’ve never sort of felt that way, like I think that you really kind of need to marry the approach to the content that you’re designing so that, yeah, if there’s a significant amount of overlap between your tablet experience and your mobile experience and your desktop experience then maybe an adaptive or a responsive approach is the right one, but otherwise like you know you really just have to kind of serve the audience that you’re designing to. So, I kind of feel like I don’t know if Responsive Design is a best practice, but I do feel like we’ve gotten to a point where we need to start asking ourselves like how do we start designing for beyond laptop screens, beyond desktop screens, like what is our strategy for doing that, and I think a responsive approach could be the right one for a lot of projects if they’re willing to sort of think about that cross-device experience. I don’t think for the Globe it would have been — like if we sort of reached a point where we were sort of like hiding large swaths of content on the page I would’ve been the first one to say like, look, maybe we need to come up with a different approach here. I kind of feel like — I’ve said this a couple times recently, but like dogma doesn’t pay the bills (laughter). I’m kind of passionate about Responsive Design and I can’t think of any other approach we could’ve done to do the Globe, like just regardless of my biases this was a really fun project to work on, but I really can’t think of any other way we could’ve done this if we hadn’t been, you know, if we hadn’t started with a flexible layout, designed really iteratively and then layered media queries on top of that content that we’ve sort of taken that hard look at, but that’s not to say that it’s necessarily the right approach for every site. So yeah I don’t really have an easy answer here.
Louis: Yeah. Obviously it’s early in the piece as far as these techniques go, but you wouldn’t say that it’s in any way like looking at an all Flash site would’ve been in 2005.
Ethan: Oh, hell no, this sounds entirely too Seinfeldian, but like some of my favorite sites are fixed width, so (laughter), it’s not like you’re a bad person if you design with, I don’t know, a 960 grid and hell or high water not giving up your pixels, I mean I think when we get into discussions like that, like it’s responsive or die or it’s device detection or I don’t know liberty or death or whatever, it’s like we close ourselves off to the really like awesome solution. If we can be a little less dogmatic and be a little bit more thoughtful with how we evaluate the stuff and come up with some actual like criteria for it, like rather than just like me spouting off generally about well, oh, you know if there’s a lot of overlap between contexts, like if we can formalize like in the next year or two like, okay, well x, y and z are in place for this audience for this project then a responsive approach is the wrong one, then we can be a little bit more scientific and a little less religious about this kind of stuff, so that’s kind of what I’m excited about, sort of having this larger discussion about when these things make sense, yeah, I think we’ll all be better off.
Louis: Well, look forward to seeing how this develops.
Ethan: Yeah, me too.
Louis: Thanks so much for coming on the show and talking about this. I’ve been, like I said, since I saw the Boston Globe design came out I definitely wanted to have a chance to chat with you about it. Congratulations on the great work it’s a fantastic site, and I really hope it’s successful and inspires a wave of increased responsiveness.
Ethan: (Laughs) that would be fantastic.
Louis: In major websites.
Ethan: Ah, thanks, Louis, yeah, it’s great to be here.
Louis: Absolutely. If people want to follow you on your blog, on Twitter.
Ethan: Yeah, I’m on Twitter as @Beep, I swear profusely there; I also recently just started a responsive web design Twitter account at @RWD, I hate the acronym but it’s nice and short, and my portfolio is Ethanmarcotte.com, so I’d love to hear from you guys.
Louis: Alright, well, thanks very much again and have a great day.
Ethan: Thanks so much for letting me ramble, I really appreciate it.
Louis: Hey, no worries at all.
And thanks for listening to this week’s episode of the SitePoint Podcast. I’d love to hear what you thought about today’s show, so if you have any thoughts or suggestions just go to sitepoint.com/podcast and you can leave a comment on today’s episode, you can also get any of our previous episodes to download or subscribe to get the show automatically. You can follow SitePoint on Twitter @sitepointdotcom, that’s SitePoint d-o-t-c-o-m, and you can follow me on Twitter @rssaddict. The show this week was produced by Karn Broad and I’m Louis Simoneau. Thanks for listening and bye for now.
Theme music by Mike Mella.
Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.
Louis SimoneauLouis joined SitePoint in 2009 as a technical editor, and has since moved over into a web developer role at Flippa. He enjoys hip-hop, spicy food, and all things geeky.
