Real Life Responsive Design: Ethan Marcotte | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Wednesday, 14th September, 2011

Real Life Responsive Design: Ethan Marcotte

[S02E07] We have all read articles on responsive design. However, when you put theory into practice things are never as simple as they first appear. Fortunately you can always ask Ethan Marcotte for help!

Season 2:
The estimated time to read this article is 31 minutes
Play

All the cool kids are making their sites responsive these days and with good reason. Through the use of media queries and relative values it is possible to build a single website that adapts to pretty much any device.

Not as simple as it seems.

On the face of it this is a relatively simple technique that requires little extra work. However, if you have tried the technique on a production website (and not just as an experiment) you will know that things aren’t as simple as they seem.

AtHeadscape we have experimented with responsive design for some time and have already launchedone ortwo adaptive sites (sites that use media queries, but not relative values). While working on these and other sites we have discovered how much thought needs to go into the process and how important it is to think ‘responsive’ from day one.

RAFBF

With that in mind, I wanted to know exactly how I was going to approach the boagworld website. Knowing my audience, it was critical that the website worked on as many devices as possible. I also want to be cool so I saw no choice but to go responsive ;-)

Questions about responsive design.

However, although I knew how to build a responsive website I had a number of issues. In particular I had questions about:

  • The idea of mobile first: I had read articles that suggested we should begin by building for mobile. This felt strange and I wanted to understand how this would work in practice. I couldn’t imagine not starting the ‘desktop’ version.
  • When you should start thinking about media queries: Although I understood that things would go much easier if I built with relative values from the outset, I wanted to put off adding media queries until later (possibly even after launch). With that in mind, I wanted to know if this would create any problems I couldn’t foresee.
  • The benefits of responsive over adaptive: Working with percentages is not the easiest of tasks and I wanted to be sure the returns of doing so were worth it. After all there is nothing to stop you using media queries with a site built using pixels.
  • Hiding content from mobile users: There are many who advocate all content/functionality being available on all devices. However, I knew some of the content/features on boagworld would be tricky to add and I wasn’t sure that the work was going to be worth it. I wanted to discuss this with somebody else to get a fresh perspective.
  • iPhone users: I hear many iPhone users complain about being forced to use a mobile version of a website and was left wondering whether this was really a good idea.

Although I knew there were no right or wrong answers to these questions I wanted to chat them over with somebody else. Therefore it made sense to call Ethan Marcotte the man who has popularised responsive design. I also decided to drag Leigh Howells in on the call, as I know he has worked on various responsive websites for Headscape and wanted to have his perspective too.

Ethan's book on responsive web design

My discussion with Ethan.

What follows is a transcript of our conversation:

Ethan: Hey, Paul, how are you?

Paul: Yeah, very well. Good to speak to you. I’ve got Leigh on the line as well.

Leigh: Hello, Ethan.

Ethan: Leigh, it’s a pleasure.

Paul: Leigh is one of the kind of – Well, I don’t know what you are now, Leigh. You kind of do a bit of everything, don’t you?

Leigh: I do like the word consultant. It sounds really clever.

Paul: But you got a lot of hands on coding and design still as well. So he’s a bit of a …

Leigh: I’m still a designer at heart.

Paul: Yeah. So I wanted to get him on the call as well because I think he’s probably going to help us out with some of the elements of the BoagWorld responsive design because he’s been doing some stuff before. I was chatting with the guys at work about the call I was going to do with you. He came up with loads of questions. So I thought, “Well, let’s just get him and get him to join in.” I hope that’s alright.

Ethan: Oh, yeah. It’s brilliant. I’m looking forward to it.

Paul: Brilliant. So this isn’t so much as an interview as kind of a vague ramble is the way that these things normally work.

Ethan: The best kind of ramble.

Paul: Yeah. Essentially, what I’m doing is I’m picking your brains, but dressing it up as an interview, right?

Ethan: Right.

Paul: I’m pretending that really we’re doing an interview for BoagWorld and for the podcast. In actual fact, it’s me getting a bit of free advice from you for me to work on the new BoagWorld website. I hope that’s okay.

Ethan: Yeah. I think I’ll be able to sleep at night. That’s fine.

Paul: So, where to begin really? Of course, both myself and Leigh have read your book. Is it just called Responsive Design? I’m trying to remember the name of it.

Ethan: Yeah, Responsive Web Design. Yep.

Paul: Responsive Web Design which is a great book because it’s short. I always like short.

Leigh: It’s very short. I’ve read it in an evening. I was very pleased with myself. I think, “I read the book.”

Paul: You feel like you’ve achieved something if you can read a whole book. Yeah.

Ethan: That is the best thing about a book. It makes me feel very literate.

Paul: I think we get the principle. I think most people that are listening to this podcast get the principle of responsive design. We understand what enables you to do and how it basically works and the function of it. I kind of want to spare you of going over that yet again. I’m sure you’re kind of sick of talking about it. What I want to dive in, and I think as me and Leigh were talking, more of the kind of things that come up when you actually try and implement this in the real world. Obviously you’ve done this lots and more experience than anybody doing it. It seemed a good idea to kind of pick your brains.

So the first question is I’ve heard this thing go around the web of mobile first. I don’t get that. I don’t get a: what they’re really getting at when they say mobile first and b: why there is this need to start thinking about the mobile version of your site before you think of the desktop version. What’s the thinking behind that? I don’t think I’ve actually heard you say that so I’m just interested to know your thoughts on it.

Ethan: Yeah. Mobile first was I guess Luke Cabluski[SP], The Brain Child. So I’ll be doing a poor man’s job actually trying to encapsulate his argument.

Paul: Okay.

Ethan: He had this fantastic series of blog entries at the end of 2009 talking about the need to rather than thinking about the mobile experience at the end of a larger design project, he was really advocating that should be our starting point for a number of reasons. Obviously, mobile traffic exploded in the past two to three years. The web in many ways has kind of moved passed the desktop. We’re designing for more devices than ever before. So that’s sort of the database justification. I guess the other two points of his argument where that – I mean, these devices offer so many new and exciting capabilities that we can actually incorporate into our designs. We might as well start thinking about those early from geo awareness to touch to just the plain ubiquity of them. So this can actually form a lot of our design thinking.

Finally, and I think the one that’s been most critical for me on any project regardless whether it’s responsive or not, is this concept of focus. Traditionally we’re thinking about designing for the web as kind of framed in the 1024 x 768 world. If we’re thinking about that from sort of the other end of the spectrum where we’re designing for something that’s 80% smaller than that, Lou is basically arguing that this mobile first exercise can really help us focus on what really matters. Rather than thinking about having this huge canvas, this great expanse of white space filled with information, it really focuses us, even just as a thought exercise, to distill the experience down to what really matters.

What he’s sort of arguing from that is that when you actually start scaling up from that baseline, and this is really appearing to me as somebody who is excited about responsive web design, is if we move up to tablets or if we move up to desktops or widescreen, why do we need – If we can establish the consensus early on, these are the most critical elements of our design. Why do we need to complicate things over time? Basically, we can improve the experience across the board by having the discussion early about these are I guess the top tier content, the really key pieces of functionality. Those are sort of the three points is traffic has exploded, new device capabilities and then this concept of focus.

Paul: I mean, it sounds like he’s not suggesting when he says mobile first, he’s not saying mobile before you think about the desktop. It’s almost don’t consider mobile just as an afterthought. Would that be a better way of describing it?

Ethan: Yeah, I think that’s probably fair. I mean, Luke would probably have a better justification.

Paul: I need to talk to him, don’t I? That’s what I need to do.

Leigh: Yeah.

Ethan: Yeah. I’ll give you his home phone number.

Leigh: It’s just starting out with that in mind rather than thinking of it at the end. You just start. It’s another part of the process that you have to bear in mind the whole time you’re starting to design.

Ethan: Exactly. Exactly. I’ve been working with the Boston Globe for the better part of this year. Most of the design was actually sort of very desktop centric when I started. I was sort of brought on more to help with the responsive side of things and kind of the interaction design side like how do we take this thing that’s been designed for 1024 and make it into something that can be viewed on any device in any “context.” So that’s during the design reviews and lot of the quick iterations we came up with.

This concept of mobile, of course, is really helpful for us because we sort of bring the design into kind of a responsive framework. Then a lot of our I guess reviews really focused around matters and content and functionality like if we feel that it’s valuable to have 58 links to feature articles or something in this particular module, that doesn’t feel that great or immersive. It’s not really a pleasurable reading experience on mobile. So that’s kind of a wedge into really interesting discussion about is this really valuable for anyone?

Paul: I was just going to say that’s exactly the kind of conversation that me and Leigh have found ourselves having when we started working on responsive stuff. Leigh, you had a question about what to hide and what not to hide and whether it’s okay to hide, wasn’t it?

Leigh: Yeah. After reading your book, Ethan, the first project I did was a university site. Of course a university site everything is important.

Ethan: Right.

Leigh: A lot of elements on it like there was a mega menu. There were some contracting panels. So it was knowing what wasn’t important and do you take them away or together? Do you just reduce it a bit? There was a lot of decisions I wasn’t expecting which all suddenly made me think, “What do we do here?” This was kind of new territory for me.

Ethan: Yeah. I guess there is not an easy answer for that. I mean, that’s why I think at least for most of my work this mobile first concept has really been about sort of placing content first. We’re trying to get clients I think to a point where they can make a commitment that this content is valuable to any one of our readers kind of wherever they are. There are some beautiful mobile experiences out there. I mean, one of my favorites is Flickr. I probably spend hours a week on that site on my phone. That’s kind of sad, but anyway. It’s a beautifully designed experience on my phone, but there is still like a significant amount of functionality and content that’s not available to me in the mobile context. I can’t see when somebody has added a photo to my favorites or added more meta data. I had a bounce out with a desktop experience there.

I guess like what’s appealing to me anyway is just using the mobile web as kind of a wedge for having those hard questions about is this actually valuable content to people on the desktop versus mobile because there is a lot of overlap in terms of how people want to access that information.

Paul: I mean, that’s a good question. How far do you go in recreating or providing the same content and same functionalities you would do in a kind of desktop environment on the mobile device? For example, there is content on the BoagWorld site where I’m wondering, “Do I really want to replicate all of that on the mobile partly, if I’m honest, because of the technical challenges of doing that and partly because of whether is that really going to be useful to somebody on the mobile device?” I know somebody like Jeremy Keith would say, “We shouldn’t make assumptions about users using mobile devices and we should provide as much as possible.” I wonder whether you kind of saw things in the same way.

Ethan: Well, I guess we’ve been sort of framing the discussion a lot in recent years about mobile versus desktop that we’ve got this picture in our mind perfectly formed about what each of those users are doing. I think recently we’ve been sort of seeing that it’s a lot more nuances than that, astronomically high usage of people using their mobiles on their couch at home on incredible five bandwidth deep periods of focus. That’s not to say that there is not a really compelling use case for designing a mobile specific experience. I think it really depends on the content you’re designing and the audience you’re designing for and also what kind of design opportunities you want to look for. I think if it does get to that point, Leigh was sort of bringing it up, like if phone than let’s hide this content. I’m not sure the justification is strong enough for that. I mean, it would really depend on the site.

For me anyway, it’s sort of interesting to get into, again, like if we’re hiding this from mobile users, what if they do want that content? Why are we hiding it from them? In fact, why are we showing it to the desktop?

Paul: That comes back, Leigh, to the point you were making about iPhone versions of the site, for a better word, and how annoying that can be sometimes.

Leigh: Yeah. It’s sort of like a mega menu. It’s technically applicable and usable in the desktop experience. It’s not really something that translates to an iPhone. It doesn’t fit for a start. How do you arrange it so that like a 960 wide menu full of stuff? It just doesn’t work so you take it away. So you always got to have another way of getting through to all that content. That’s the critical thing.

Ethan: Exactly.

Leigh: You have to hide this thing, but it’s an extra for the desktop version.

Ethan: Yeah. Maybe it’s just like, I mean, you can really sort of think it is like reframing the discussion we always have about access for folks that don’t have JavaScript, for example.

Leigh: Exactly.

Ethan: They can’t see that menu anyway. JavaScript availability has no guarantee on mobile devices anyway. If they can’t see that content anyway, does your site structure actually still make that content accessible? If that menu is the only way of accessing a specific page, then maybe that strategy is not the best one.

Paul: Others that spring to mind are maps and map navigation on mobile devices or galleries are another one. You wonder how to present a set of gallery pictures in a way that’s actually makes it usable and visible? The other thing that I thought was interesting is a number of people who have iPhones, and I know I’m picking on one platform here, but you have an iPhone and actually complain about being presented with the mobile version. Is the case for allowing them to override your media query responsive version of the site and just showing them the same as they get on the desktop? Or do you think that that complaint is coming merely out of the fact that sometimes mobile versions are horrible versions of the desktop so they’re dissatisfied with the experience?

Ethan: Yeah. The later would be my hunch. Obviously, it would probably depend on the site. I think that most of the research that I’ve kind of seen in the field is there is this expectation that if you’re provided with two links, mobile and desktop versions of the site, the desktop is often seen as kind of an escape hatch for any functionality that they can’t actually do in the mobile experience. This is kind of their way out. I mean, that’s, again, coming back to Flickr. I have a beautiful mobile experience, but if I can’t actually perform, I need to go to that richer version of the site.

From a technical standpoint, it’s absolutely possible to give them to sort of like flip all your media queries on in the mobile context. That’s the JavaScript that we need to have, but it’s technically possible. I do wonder if there is that expectation that they like seeing the full layout because they feel that there is content that has been hidden from them.

Paul: I think it’s also you become familiar with the shape, the mental shape of the website. So you know in the bottom right corner you may be used to seeing certain things so you may want to go down there rather than having to search through a kind of a linear, one column right down to the bottom of something.

Ethan: Yeah, that’s totally possible. There has not been a lot of research about expectations. From what I’ve seen people tend to become fairly acquainted, especially when they’re accessing a specific website on multiple devices, they tend to set expectations particular to that device.

Leigh: Yeah. I thought people took that consistence and how there is a kind of inconsistency about these different platforms. You present them in different ways which is inconsistent and whether that’s actually a usability problem or not, I don’t know.

Ethan: Yeah. That’s something we’ve been doing for years before responsive design even came around.

Leigh: Absolutely.

Ethan: If I go to Google on my cell phone, that’s obviously radically different from what my expectations are for the desktop.

Paul: Yeah. I quite like the idea that you had, Leigh, of when you turn into landscape mode. That might be a nice, simple way of changing back to the desktop site if people wanted to on certain devices. That’s an interesting rather than searching for that little link that’s buried somewhere that says switch to desktop site.

Leigh: It kind of feels like undermining the whole principle. Having this alternative idea just seems to be undermining the whole, you know, one solution for all …

Ethan: It’s hard too, I mean, because device resolutions vary so greatly. I mean, there are some fantastic tablets that are just coming out with weird resolutions. There are phones that are actually approaching like what we traditionally think of as tablet screens. It’s hard to sort of assume that iPhone in landscape is going to automatically translate nicely to a desired desktop experience on say a seven inch tablet.

Paul: Yeah.

Ethan: It’s something I think you just really have to kind of bear out against I guess actual user feedback or research.

Paul: I think that raises another really interesting point. One of the objections that I’ve heard people say, and I’ve had somebody say this actually within Headscape, if we use a media queries and we’re saying when it hits different sizes as you kind of go down, it changes the layout, it changes the design, then why all this talk about setting everything as percentages with the maximum width associated with them? Why can’t you just build it in pixels and then when you hit a certain site it reformats? I guess the problem there is that’s fine as long as you got a small number of set sizes you know that it’s going to work. As more and more devices change that’s going to quickly fall down as a method I’m guessing.

Ethan: Yeah, exactly. I talk a little bit about this in various conferences. There is sort of a clear line in my mind between this like larger class of I guess adaptive websites that use some kind of client side technology whether it’s JavaScript or style sheets or straight up media queries that toggle between different fixed width layouts or toggle between different layouts. Then responsive design which is specifically flexible layouts and media queries together. There is no like value judgment implied. I do think that it’s probably true to say that every responsive site is adaptive in some way, but the reverse might not necessarily be true.

InformationArchitects.jp is a beautiful site, but they’re really shuttling between three different fixed width layouts which is fine. I mean, it looks fantastic on their site. I think you’re exactly right, Paul, that we’re sort of supporting just this ridiculous number of input methods and devices and resolutions that we can definitely take that sort of multiple fixed width layout approach, but there are a couple things to consider. One is just like future proofing it, you know, looking down the road. That 320 pixel wide screen is probably pretty quickly going to feel kind of tiny as screens get wider and processes get faster.

I mean, the other thing too is that there has been some interesting stuff happening lately. I know Paul Robert Lloyd at Clearleft and I think Chris Armstrong have been talking a lot about even stepping back a little further from pixel based media queries and actually using m’s where we can tie the media queries to say the measure of a line in our typography.

Paul: Yeah.

Ethan: PaulRobertLloyd.com just redesigned and is a fantastic example of this. It’s a flexible grid with media queries on top of it, but everything sort of spaced out that once the line of content in say a sidebar gets to a certain length it reformats itself or represents itself tying not to the width of the screen or the width of the viewport, but basically what best benefits the content.

Paul: Yeah. It makes a lot of sense in many ways. I mean, I guess in the kind of practical real world with a project that’s got a limited budget and time scales and all the rest of it, I guess a pixel solution is going to be the faster to build first for some designers. It’s not that it’s a wrong option, but it’s not the ideal option depending on circumstances I guess like you say.

Ethan: Yeah. I think it’s a fantastic transitional approach. I do. The other benefit to going flexible is that you’re actually producing less code which is not really the most sexy selling point. Your media queries don’t necessarily have an entirely new page like in them. You can actually use the proportions of a flexible grid to kind of like slightly reformat things over time as your design gets wider and wider.

Paul: I mean, talking of practicalities and reality, I mean, I guess as well we were saying earlier that well you shouldn’t be hiding stuff and you need to be asking if you feel a need to hide it for a mobile device, does it need to be there for the desktop in the first place kind of thing. I mean, there are some practical things where situations arise where it’s just going to be a pain in the ass.

Leigh: Like at work you spend all day on it and it still isn’t going to work.

Paul: I mean, to some degree the thing that always worries me with these conversations, and not just responsive design, is anything from accessibility to whatever that sometimes we talk very theoretically about all of this and the right thing to do and best practice and all the rest of it. It can leave some people feeling so intimidated that so much is involved in it. They just give up and don’t try at all. I sat down and started working on the BoagWorld website and playing around with media queries the first time. I came across something where admittedly I probably didn’t think about it right from the beginning like I should have.

I came across something where I’m using a third party, Twitter actually. I’m putting a Twitter field in and that’s pulled in as an iFrame and it created all kinds of problems of resizing that iFrame. So after a while I just sat there and said, “Well, I don’t think this is the most appropriate way for me to be doing on a mobile device anyway. So why is it here? I’m just going to take it away.” That might not be the most theoretically best practice way of doing it, but it is kind of pragmatic in a situation. I mean, am I being naïve?

Ethan: No. Yeah. I’m a big fan of letting the use of something, you know, actually determine how it’s designed. So that’s why I think as early as possible, especially for a responsive project, it didn’t sort of move out of Photoshop and actually into something that you can actually interact with whether it’s on the desktop or on a tablet or a phone or what have you. It’s like that can actually raise a lot of interesting questions like all these assumptions we had in this like static, fixed width comp may or may not actually play once you’re actually literally touching these things. Yeah. There has definitely been situations where we’ve sort of come across something and not necessarily from like a technical implementation standpoint, although, that can definitely be a thing. We’ll ask ourselves, “What’s the point?”

Paul: Yeah.

Ethan: Yeah. If it makes sense to rip that out, then go to town.

Paul: Oh, you’ve made me feel better. I feel like I’ve got your permission now.

Ethan: Yeah. The gold star is in the mail.

Paul: Yeah. Another thing I’ve kind of – I don’t know whether it’s a practical thing. Well, yeah, I guess it’s a practical thing. Another thing that’s gone through my head as I have been working on BoagWorld is I have been thinking about responsiveness from the very beginning. I’ve made mistakes because this is the first time I’ve built a responsive site really because I don’t do a lot of coding these days. I do mainly consultancy and working with clients on strategy. So I’ve made mistakes that have caused me problems and that’s fine. What I have thought about content, thought about responsiveness and thought about mobile from the very, very beginning of it, I’ve built everything using a flexible grid on the rest of it.

I haven’t yet done media queries. I haven’t got to that stage of implementing the media queries. That’s I think partly because I’m keen to get this site live and get it out. I’m almost going to go back through it afterwards and add in the media query stuff. But because I’ve got the whole structure in place of the flexible grid and the rest of it, I don’t think that’s going to be huge problems. Or, again, am I about to make an enormous mistake there?

Ethan: Oh, you’re in such trouble, Paul. No.

Paul: What’s going to go wrong then?

Ethan: No, no, no. I think you’re in good shape. I mean, what I’ll traditionally do because I’m usually thinking about the design kind of up to the point I’m probably designing something like 960 or 1024 or whatever. So that’s usually where a lot of my comp is kind of set out.

Paul: Okay.

Ethan: That’s usually the first thing that I build is I sort of build the desktop view of the site. That’s kind of the mock ups have been sort of telling me. Then what I’ll do is I’ll kind of go back at the top of my style sheets and I’ll actually start going kind of rule by rule and just sort of picking out the properties that actually have to do with layout.

Paul: Yeah.

Ethan: Then anything that sort of I think is best fit for the top end of the resolution spectrum, right in line, right after that rule I’ll actually just create a media query and then just sort of drop in all those properties that I think are just widescreen only, for example. Then I’ll basically work my way all the way down the style sheet essentially kind of quarantining out anything that’s layout specific. So by the end, there is nothing outside those media queries that has anything to do with something that wouldn’t be accessible to a small screen. So then I go back over the top of the style sheet and I’ll take all those media queries and basically just consolidate them all down at the bottom.

Paul: Right.

Ethan: So then the bulk of my CSS is really just typography. It’s very small screen friendly. So if something doesn’t have media query successful to it or it doesn’t have JavaScript so that it can understand patches for media queries, I’ve still got something that’s accessible universally. Down at the bottom is these break points my media queries are hit, then, yeah, things get a little bit more sexy over time.

Paul: Yeah. I find that what you just said is massively reassuring from a couple of points of view. First, I mean, it’s really interesting to hear how you actually kind of broken things down and how you go through your CSS file and deal with the media queries. That’s really good. The other thing is the fact that you do think about the kind of 960 desktop version first. The more I’ve been reading about responsive design and all of this mobile first and content first I almost think it makes you feel like, “Hang on, I should be thinking about the mobile element first.” That just blew my head trying to think like that. I’m misunderstanding, aren’t I? I’m misunderstanding the point there which is you got to think about mobile in content and different devices from the beginning, but that doesn’t necessarily mean you need to build that first.

Ethan: No, I don’t think necessarily. I think that’s definitely an option. I’ve worked on projects where that’s sort of our starting point. I mean, we’re still in a period of transition, right? I mean, we’re still thinking about how to design beyond the desktop because that is something that’s kind of critical.

Paul: Yeah.

Ethan: So, yeah, I think as our practices get better and our tools get better it’s going to be a little bit easier to start from that smaller end. But we’re still in a point where, you know, our tools are still very much anchored in creating a fixed width canvas first and scaling from there. I think in thinking about the content and thinking about what’s valuable to your mobile users is really the most critical point. Then how we articular the design whether it’s pure HTML and CSS or whether it’s Photoshop or whether it’s some combination of the two, I mean, as long as you’re thinking about content, you started with a flexible foundation, then really the approach from there is going to be a lot easier.

Paul: That reminds me, Leigh, of a question we didn’t write down which was your whole question about what you show the clients and why framing and that side of things.

Leigh: Yeah. Well, two things. I suppose if you already have a website, would you advise against trying to retro fit until the next iteration and you can think about it from the offset? Or is it feasible to retro fit?

Ethan: Yeah, I think so. I mean, I know you guys are probably big Dribble users probably. Dan Cederholm really recently had a great post on Simple Bits about what they ended up doing was they wanted to make Dribble accessible to mobile users. So they ended up just creating kind of an adaptive style sheet for small screens, which is completely flexible and it looks great on a phone, but basically still using the same HTML, but introducing another media query to sort of create those alternative styles. He basically saw that as a really great first step toward maybe something that’s more fluid, more responsive or maybe just incorporating a couple other fixed width media queries, whatever, but I definitely think there are a lot of really viable approaches.

Okay, we can’t tackle this really huge problem. We can probably just sort of just carve off this smaller spot and then hopefully over time budgets permit and then we can have a larger discussion about what needs to happen. I don’t think it needs to necessarily be an all or nothing thing. I think that if you’re obviously starting a new site or at the very least if you have a flexible foundation, you’re going to be much better.

Leigh: I’m thinking about clients who might certainly latch on to this saying that the idea of mobile and they hear about responsive design that suddenly they want their site to do it as well.

Ethan: Yeah.

Leigh: It’s already happened. We’ve got to kind of find a solution. About the sort of planning from the outset, the only way to wire framing for the desktop site, but we haven’t really done wire framing for how the mobile experience may look. That’s something that we are kind of thinking. We need to start doing. It’s going to be a different experience. At the moment the client isn’t really getting much input. It’s just like what seems to be the best solution.

Ethan: Yeah, yeah.

Leigh: It wasn’t really a question, was there?

Paul: No, there wasn’t really. I mean, I guess you can turn it into a question and say, Ethan, what do you do with this? It sounds like the work that you were doing with the Boston Globe, you were presenting mock ups and wire frames and all of that for the different size mobile devices. Is that right?

Ethan: Not really.

Paul: Oh.

Ethan: Yeah, not as such, but kind of a unique piece this project. I sort of came in when there has been a significant amount of work already done on the design and the IA side of things. Essentially, the client had been approving desktop centric designs. The work from there was just kind of moving the designs into a responsive framework. Then those are essentially our new design deliverables. We’re not working in PSD’s and we’re not presenting different fixed width wire frames and different devices. It’s really about are design reviews were usually dumping or putting the work that we’ve done up to that point on a whole host of devices dumping them in the middle of a table and then starting a conversation.

Paul: Right.

Ethan: We kind of highlight some of the new work, some of the potential problems that we see in the design, some of the opportunities where we might want to enhance things for certain devices. So it’s really just about moving away from those fixed width designs as early as possible as sort of the big, I don’t know …

Leigh: Yeah. So they’re not getting used to seeing that one set design. They’re actually getting used to seeing a whole kind of set of how it can look in different devices.

Ethan: Yeah, exactly.

Leigh: Flavor.

Ethan: Yeah, exactly. Exactly. I mean, it would be really interesting like, yeah, if I could work on a project that sort of started right from the beginning in terms of that kind of responsive mindset like thinking about the content questions, the IA questions really from the outside rather than kind of adapting the design and development process into this kind of hybrid thing, which worked really well for us. But we were tackling a lot of the content related questions during the design phase, which, again, maybe that’s something we always need to do. I can’t really speak with authority for what like the IA phase would look like for a responsive project.

Paul: Fair enough. Like you said earlier, this is all so new and so early that I think we’re kind of discovering best practice. I think that’s the fear, isn’t it, that a lot of people out there have is, “Oh, am I doing it right? Is this the way to do it?” The answer is there is no wrong or right way with discovering this as we go along, aren’t we really?

Ethan: Yeah, absolutely. I mean, it really is. It’s just thinking about like beyond the desktop in general. It really does feel like, I don’t know, when web standards started to kick in. I really see that I feel like we’re having a larger conversation right now about how just generally work online. So a lot of these content questions I think are really valid because we’ve got used to and kind of maybe a little complacent for designing specific context. Now we’ve got this sort of other thing kind of coming in from stage left about how do you actually take this content and make it valuable to somebody who is on a mobile phone or a tablet or anything?

Paul: I mean, that’s what makes web design exciting is the fact that it happens every now and again.

Ethan: Yeah. It’s so much better than being bored. I mean, I sort of said this at the end of my book, but I really just see this as like I try to share some stories about working on the Globe without talking directly about the Globe just in the hopes that as more people start doing this we can actually start bouncing ideas off of each other. Yeah, like you said, Paul, there is no right way to do it yet because, yeah, we don’t have enough people doing it quite yet.

Paul: I mean, that’s brilliant. I think that’s a really good point to end really. If you’re listening to this don’t be afraid to get stuck. You are going to make mistakes as you go along. We all are and I’ve certainly made mistakes on BoagWorld. I know, Leigh, you’ve had some problems with the university website that you made. Just when you think you’ve finished or you’ve kind of got your handle on it, then someone comes along and says, “Well, hang on a minute. We’re using all of the real estate having the navigation and the logo branding at the top. We ought to move it more to the bottom.” Then you think, “Oh no, I’ve done it all wrong and I’ve got to start again.”

Leigh: That’s exactly what happened. Your site I was wondering what page I was on because the screen is full of navigation. Yeah.

Paul: Duh.

Leigh: The ways of changing the navigation depending on the device to make real estate. That’s the next kind of problem.

Paul: Yeah. It just goes on forever. Yeah.

Ethan: Yeah. Well, it’s better than being bored.

Paul: Absolutely. I like that. The strap line for this show. I think it might have to be the title of the show, it’s better than being bored.

Ethan: The media call.

Paul: Yeah. Okay, thank you so much for your time, Ethan. It’s been massively helpful. Yeah. We’ll let you know what the results are when we’re done.

Ethan: That sounds great. I can’t wait to see it. Take care.

Paul: Take care.

Leigh: It’s great to talk to you. Thanks so much.

Ethan: Thanks guys.

As you will have seen Ethan was incredibly helpful. The main thing I took away is there are no right or wrong approaches. This is a new technique and we are all still exploring the possibilities. I was nervous about ‘having a go’ with responsive design for fear of not demonstrating best practice. However, best practice is still evolving.

A technique you would be foolish to ignore.

No doubt by the time the new boagworld website launches the techniques I use will be out of date. However, it will at least be more suited to multiple devices than my previous site. What I am sure of is we cannot afford to ignore the plethora of devices that now dominate web usage. This is a challenge that is only going to get more pronounced and now is the time to discuss it. Fortunately, it doesn’t need to involve a complete redesign of your site. It is easy to retrofit adaptive design (e.g. design that switches layout at specific pixel viewport sizes) to your existing site. Although not perfect, this is a good starting point.

Click here for a complete transcript of this week’s show.

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.