S02E07: Real Life Responsive Design

This is a transcription of episode 7, season 2 of the boagworld podcast: Real Life Responsive Design.

Paul Boag: Hello and welcome to Boagworld.com which is a podcast about web design stuff.

Marcus Lillington: You can’t say that.

Paul: Can I not start.

Marcus: Alright.

Paul: Hello and welcome to BoagWorld.com. The podcast for those involved in designing and running websites on a daily basis. My name is Paul Boag.

Marcus: My name is Marcus Lillington.

Leigh Howells: Are you going to introduce me?

Paul: No. You just did.

Leigh: My name is Leigh Howell.

Marcus: Everyone knows you, Lee.

Leigh: Do they?

Marcus: Yeah.

Leigh: Am I a regular now?

Paul: Yes.

Marcus: Absolutely.

Paul: On Twitter that’s @Leigh.

Leigh: Are you trying to get me followers again?

Paul: Yeah. I know you feel special when people follow you.

Leigh: Yeah. Follow, follow, follow.

Paul: Although you tell rude stories about me most of the time.

Leigh: When do I ever do that?

Paul: Every time a bunch of people follow you because I’ve said something you immediately start showing off by telling horrible things about me.

Leigh: It’s fun though. It’s so easy.

Marcus: Showing pictures of you with hair.

Paul: Oh, yeah, he did that.

Leigh: I just recycle that one every six months.

Marcus: People go, “Oooh.”

Leigh: Flip it horizontally and it’s a new picture.

Paul: So there you go. So here we are.

Marcus: Are you going to get me more followers, Paul?

Paul: You’ve got a really obscure Twitter. What is it? Marcus which is M-A-R-C-U-S. A lot of people still call you Marc.

Marcus: Yeah.

Paul: Sometimes they spell Marcus with a K in the middle. That’s just weird.

Marcus: That is how I think some Europeans spell it.

Paul: Ah. It is always Europeans that spell it like that. That’s interesting. It’s @Marcus67, isn’t it?

Marcus: Yeah.

Paul: The year of your birth.

Marcus: Marcus Lillington is such a long word. That would use up my 144 characters.

Paul: Exactly.

Marcus: I just went with 67 because I was feeling uninspired that day.

Leigh: And little did you know how long it was going to last and how big it would all become.

Marcus: Yeah, that’s the other thing. You think, “Oh, no one is ever going to use this.”

Paul: You got in early and got Leigh.

Marcus: Yeah which I didn’t really think about.

Paul: I was seeing so early I could have got Paul. I meant to search for Paul. No, I’ll go with Boag. What was I thinking?

Marcus: I get so many @ replies from other people.

Paul: I suppose it’s a good job then I didn’t go just for Paul.

Leigh: People with hyphenated names like Leigh- and something else. They didn’t put in a hyphen or it strips it out like all these random messages.

Marcus: Oh, okay.

Leigh: It’s interesting.

Paul: So 90% of your followers are either from me or people that followed you by mistake.

Leigh: Who is this person? What’s he all about?

Paul: So Leigh is on the show today because we’re going to be talking about responsive design and as he has actually done some stuff in practice you seem the logical person to have on.

Leigh: Yeah.

Paul: Yes. You’ve done a university. That’s it, isn’t it? So there are a few bits. You’ve done one.

Leigh: Yeah. That’s kind of evolutionary process as well.

Paul: Yeah.

Marcus: It’s all quite new, isn’t it?

Paul: It is new.

Marcus: There hasn’t been time to do that.

Paul: I was criticizing. You don’t need to get all defensive.

Marcus: No, no. I’ve been talking quite a lot lately about the work we’ve done because …

Paul: Well, you are the sales person so you’ve ought to be talking about the work we’ve done to be honest, Marcus.

Marcus: Yeah, maybe that’s why I’ve been doing it. I talked to my mates about it. What are you talking about?

Paul: What are you talking about?

Leigh: Oh, he’s off again.

Paul: Look, II run a garage I can’t afford you.

Marcus: I was going to pimp the work. Why not? Let’s do it here.

Paul: You’re going to pimp the work?

Marcus: Yeah.

Paul: On the show?

Marcus: Yeah.

Paul: We’ll get complaints.

Marcus: Well, no. This stuff has been done.

Paul: I wrote about Magento and everyone had a go at me for it sounded like a self-pitch for Headscape. The thing was because I kept referencing other people from Headscape because I didn’t have a clue about Magento.

Marcus: We just recently released two very lovely sites.

Leigh: Oh, they are special. They actually are.

Marcus: One is the Environmental Defense Fund which is EDF.org. I won’t give you the long history about what they’re about, but basically they’re an environmental charity with a little bit of a different way of approaching the work they do. I think that’s very cool. Go and look at them and you can see for yourself.

Paul: Yeah. They’re a cool organization.

Marcus: Very, very lovely design which Ed did. It was kind of early on the response design. It doesn’t go down to mobile widths

Paul: It’s not responsive design. It’s apparently, according to Ethan, who we interviewed later in the show, we now call that – We make up new names all the time. That is adaptive design.

Leigh: Yeah. I’ve heard those two terms being banded together.

Marcus: They’re the same thing.

Paul: But they’re different.

Marcus: Yeah. It’s a good difference.

Paul: It is a good difference which we will explain later in the show.

Marcus: The fact that what I did on the home page where it adapts to the height.

Paul: Well, that’s something different again.

Marcus: That’s ooh.

Paul: That’s something that Ed has brought to the fore. A couple of people have done it, but Ed brought that to the fore. We’re going to call it non-foldy design, non-vertical – I’m no good with names. That’s it. If you can come up with a good name for your technique, then your career is made.

Paul: We’ll call it the Merritt because he’s Ed Merritt. It’s Merritt’s design.

Marcus: Let me explain what it does.

Paul: Okay, go on.

Marcus: And why it happened actually.

Paul: Everybody should know because they’ll know what Merit Design is.

Marcus: As with a lot of designs these days home pages tend to have a big banner on top of them. A bit picture because it’s striking and effective and you can get your message across. So we decided to do this. When we were wire framing it went through the testing fine, but the people at EDF …

Paul: He tends to make a really short thing really long.

Marcus: Shut up. Basically, at EDF we all had small laptops so all we could see was this picture. What about the fold? We’re trying to say, “Oh, there is no fold.”

Paul: There is now. I’ve written an article.

Marcus: Basically, Ed in his great wisdom said, “Oh, well, if it’s a smaller height, I’ll just make the right column butt up next to the picture and it will reduce in size.

Paul: Using the same media queries you used for responsive design.

Marcus: Yeah.

Paul: But it’s responsive vertically rather than horizontal.

Leigh: Yeah, because it’s usually really concentrating on the width, you know, the height.

Paul: Yeah.

Leigh: That’s just another way it can be used.

Paul: Just to complicate matters even further. I think web design is hard enough. Actually, it’s quite impressive Ed’s design. Although it wasn’t responsive in the definition of Ethan, the fact that it was making adaptive vertically and horizontally is pretty impressive for him. He must have made his kind of brain dribble out his ears. It would of me anyway. So there we go.

Marcus: One more.

Paul: God, you’re taking forever.

Marcus: I can’t say, “And I will talk about a couple of things.” And just say one. They’re going to go, “What was the other one? What was the other one?”

Paul: Nobody cares.

Leigh: We’re hanging on every word.

Paul: We love working for charities. It is pretty satisfying working for charities. You actually feel like it matters.

Leigh: You’ve done some good in the world as well. You’re important as a human being.

Paul: Yeah.

Marcus: I’ll be really quick on this. RAFBF.org is a lovely design is responsive

Paul: It’s not actually responsive. It’s adaptive.

Marcus: It’s adaptive.

Paul: Well, let’s explain. We ought to sort out our terminology. I’m going to make the assumption that anybody listening to this has heard of responsive design.

Marcus: Yep.

Paul: Which is a massive mistake. Essentially, and I’m not going to explain responsive design because we’re supposed to be making this accessible to everybody. So responsive design is basically saying as you change the width or height has now been established on your website it responds in order for it to look as good as possible. So when you scale it down something like a mobile device everything reformats itself, navigation changes, position of stuff changes in order to respond to the particular layout you’ve got.

Now the idea is that everything, all the widths and stuff like that, are set in percentages as you begin to scale it in response. At certain key points things reformat entirely. Now adaptive design is very, very similar except everything is in pixels. It’s a fixed width except for certain key points like the iPhone or the width of an iPanel or something like that. It then suddenly adapts and changes its layout. So obviously adaptive design is not quite as good because you have to set fixed points for certain devices while responsive design will work for any device, any size device past, present or in the future. They suddenly release a new iPhone that’s got a new pixel width or whatever.

Marcus: It’s 18 inches wide.

Paul: Yes, or whatever. That would be quite interesting. I would like to see you carrying that around. The good old days.

Marcus: It’s an inch high.

Paul: Yeah, that would be so Apple minded to set new trends. “Yes, we’ve decided small is no longer beautiful.”

Marcus: “Yes, this is absolutely right. I can’t believe we didn’t see this before.”

Leigh: How could we have lived without it?

Paul: We probably won’t be seeing Steve Jobs on the stage presenting to us.

Marcus: It’s rubbish.

Paul: We still think it’s rubbish. Yes, so that’s the difference. I mean, essentially …

Marcus: Can I throw a question in there?

Paul: Yeah. We haven’t started the show yet by the way. I haven’t read a single line off of my notes yet.

Marcus: Yeah, but that’s boring. Responsive design you still set the points where there is a major change, but it’s changing as its going.

Paul: Yeah. It’s changing in jumps. No, responsive design is scaling kind of seamlessly all the way down while adaptive will jump at certain key points.

Marcus: But certain things in responsive might jump as well. You might change the logo width size a certain size.

Paul: A good example is with the University of Essex that you have been doing. You’ve got a situation where – Is that responsive or adaptive.

Leigh: That’s responsive.

Paul: So it scales and scales and scales until it gets to a point where the navigation actually no longer works like that. Then entirely I think we’re going to move the navigation to the bottom or the sub navigation or something.

Marcus: Or something will become a drop down.

Paul: A drop down or something like that.

Marcus: So there has to be …

Leigh: There are jump points.

Paul: Yes.

Marcus: … a particular point when you go from three columns to two.

Paul: Yeah. Otherwise it’s just a fluid website.

Marcus: Yeah.

Paul: It’s more than a fluid website.

Leigh: See the little teeny weeny, weeny three columns because it scaled all the way down.

Marcus: What you actually want to do is remove one of those columns and put it to the bottom or whatever. So it’s a little bit – There is not a huge responsive over adaptive.

Paul: There is actually.

Marcus: With a future argument with the iPhone.

Paul: Yeah. It’s not even just a future argument. What you have to think is with adapt, adapt is great. Ethan talks about this more and more. I don’t want to cover everything in the interview. But essentially the advantage responsive has got is that you’re not having to – How do I explain it? These set points what it’s doing is it’s loading a new CSS file, right?

Marcus: Right.

Paul: That reformats the website. If you were going to go for that, if you’re going to do everything fixed pixels, then you have to do one CSS file for the iPhone and one for the iPad and one for the Android tablet and one for the other Android tablets different resolution and another one for the Android phone, one for the mobile phone. So, in fact, you’re creating loads of CSS files and that’s really difficult to maintain.

What responsive design is just says, “Okay, I’m going to ignore what devices are around and I’m just going to scale everything down.” When that scaling gets uncomfortable then we’ll move things around using a new CSS file and reformat stuff. Then it will continue to scale down until it gets even more uncomfortable and then we’ll move stuff around again.

Marcus: So less CSS files.

Paul: It’s less CSS files.

Leigh: I’d say less because that’s another technology. It really confuses things.

Paul: It’s not relying on any particular device. You’re not designing for a particular device. You’re just designing universally, if that makes sense, for whatever comes along.

Marcus: I challenge that though. You’re not. You’re still making choices at particular widths.

Paul: Yeah, but you’re making it not on the basis of the device. You don’t decide I’m going to change the layout or the width of the iPhone.

Marcus: I’m saying it’s device lead, but …

Leigh: Pixels.

Paul: Yeah.

Marcus: … it’s also multiple CSS files to deliver.

Paul: Yes, there are. The difference is not relying on devices, right?

Marcus: Yes.

Paul: So if a new device comes along, that’s fine. You won’t need to change anything. That’s the principle. So, responsive design is kind of the long term name. Adaptive design is a way of getting there as I discovered when I talked to Ethan. Can I actually go into some kind of show notes now? You just ruined the entire show.

Marcus: I’ve ruined it. I think it was Leigh.

Leigh: Why is it me?

Paul: Why is it Leigh? How come he’s getting the blame? I love the way – You can tell this guy is married and has kids. “Yeah, it was my fault.”

Leigh: Yeah, I did it. Get on with it. I’ve lost the ability to argue anymore.

Paul: So, yeah, I think the point here is, and actually it’s a really good point, is the fact that you read all these articles on responsive design and it seems so straightforward, doesn’t it?

Marcus: It sounds it. Yeah.

Paul: Yeah. In theory it sounds right.

Leigh: It sounds marvelous.

Paul: But what I wanted to do on this show, and I think we’ve already started doing that, is effectively talk about the challenges and the problems. This got me in massive trouble last week when we were talking about accessibility.

Marcus: Yes.

Paul: I’m not going to repeat the process this week. I think it’s really important to just be blatantly honest about the good things and the bad things and talk about some of the challenges and how this works at practice rather than just giving a nice, theoretical point of view. When you try to build responsive sites theoretically it’s all great and wonderful and great. When you try to do it on a real site with real content things get a bit more difficult.

Marcus: You see, that’s because we’ve come to this technique halfway through projects. From now on, if we think about it from the beginning, it’s in our mind.

Paul: Yes. It will be a lot easier.

Marcus: The process will be a different process and the pain will hopefully be less.

Paul: Yes.

Marcus: It’s so easy from now on.

Paul: Yeah. We’ll revisit.

Leigh: It just adds to the huge complexity you have to have in your head when you start looking at the design.

Paul: I was thinking about responsive design in the beginning of Boagworld yet it’s still …

Marcus: Wait, you were? I thought you came to it halfway.

Paul: No, no, no.

Marcus: Paul, Paul, I have a question for you.

Paul: Yeah.

Marcus: Where are you at with the design?

Paul: I’m doing fine. What does that mean? Okay, so a few people think it should have been launched by now, but …

Leigh: But you’re still getting the program through the process with the shows, aren’t you?

Paul: Yeah.

Marcus: That’s the point. You can’t release it until the real show. Da, da, da, da.

Paul: Yeah, exactly.

Marcus: So it’s done. We’re just waiting on …

Paul: No, I’m trying to do it roughly in pace with what we’re doing here.

Marcus: Okay.

Paul: Look, you know damn well I’ve got a lot of other things to do. I don’t get much – You know the last time I worked on BoagWorld was probably three weeks ago.

Marcus: Hmm hm.

Paul: Shut up you bastard. Oh no, we’ve got clean tag and I’ve just sworn. Oh well, I’m sure our listeners will understand and forgive my swearing at you. Right, what were we talking about?

Marcus: I don’t know.

Paul: Oh, yeah… the fact that all the cool kids …

Marcus: I’m embarrassed. I’m ashamed.

Paul: Shut up. So, all the cool kids are in responsive design. That’s what we’re talking about and how we’re all going to do it too. So we use media queries. It’s possible to crack a single website that adapts to pretty much any device. Right. Simple on the face of it. So this seems like a relatively simple technique, but actually it isn’t when you apply it to real projects and real stuff. So Headscape we have been experimenting with responsive design for a while. We’ve already launched to adaptive sites. Those are the ones where we don’t use relative values. We use pixels, but it flips over.

We will certainly be doing more response stuff very soon once the University of Essex stuff comes out. It will be responsive and it’s supposedly next month. So we’ve been working on this. Leigh and myself and Chris Sanderson and Ed has been doing some responsive stuff as well. We’ve kind of come up with a crap load of questions or issues that have come up.

Leigh: Yeah, moments when you think, “Uh, now what?”

Paul: Yeah. So what’s the best way of doing this? So what I’ve done is I wrote out a list of questions and what we did was pose them to Ethan. Ethan Marcott, if you didn’t know, is the guy behind responsive design. Well, I said behind it, but I think he brought together lots of techniques. He fronted it. Yeah. He’s popularized it. There you are. That’s a good word for it. He’s written an excellent book on A Book Apart. The great thing about A Book Apart is they are short. It’s called Responsive Web Design. I highly recommend if you want to know how to use these techniques.

So some of the issues that have come up for us, the first one was that I had read a lot of articles suggesting that you should begin by building for mobile and this mobile first thing which confused the crap out of me. It felt so strange. I couldn’t get the idea of working the mobile first. It just seemed really weird. I couldn’t imagine not starting the desktop version. So I want to talk a little bit about that. I also wanted to talk over this business of where do you start with media queries? When do you start thinking about this kind of stuff and worrying about it?

The logic there was on BoagWorld, I wanted to build the website effectively and then retrofit responsive design onto it afterwards. So I kind of new I had to build with relative values, but I didn’t want to do all the media queries probably until after I’ve launched it just so I could launch quicker. A little bit, right? I want you to talk about benefits, responsive over adaptive, which we’ve already kind of covered.

Marcus: Sure.

Paul: Marcus insisted on ignoring my show. I spent hours preparing.

Marcus: It’s the same as every week.

Paul: You’re not normally so vocal wanting to sell stuff You’ve gone into full salesman way today for some reason.

Marcus: I just get this stuff.

Paul: Are we desperate for work, Marcus? Is that what we’re trying to get to?

Marcus: Not currently.

Paul: I like the way you worded that.

Marcus: Two or three months down the line we’re always desperate.

Paul: Yeah. That is basically. Yeah.

Marcus: No, I think both of those sites that I mentioned earlier …

Paul: Which were those, Marcus?

Marcus: … they felt really good.

Paul: With EDF.org and RAFBF.org. They are good.

Marcus: Excellent work.

Paul: The other question I had was about hiding content for mobile users, which was you and me really, wasn’t it? It was like can we cop out? Everybody advocates or there seems to be this thing at the moment about, you know, you should make all content and functionality available to mobile users. However, I knew that some of this content would be really tricky to get working on a mobile device. I just wanted to hide it away. I wanted Ethan’s permission to do that.

Marcus: He didn’t do that, did he?

Paul: Well, no, he was quite pragmatic actually.

Marcus: Yeah.

Paul: We didn’t get hard and fast yet. It’s alright. You can hide wherever you want.

Marcus: Yeah, it depends.

Paul: No,

Marcus: What does it depend on?

Paul: What whether some of it is appropriate when you get down to like a mobile size application some of it is just – I can’t think of some good examples now.

Marcus: Well, like a gallery, a JavaScript gallery. It’s not really appropriate necessarily on a phone to be working the same way.

Paul: Yeah. But it was – I mean, it’s really woody. It’s really woody. The problem is, I mean, a lot of people you hear a lot of complaints going, “I hate it as an iPhone user when I’m forced to go to a mobile website.” Well, I think the reason that people hate that is because it’s an inferior experience to go into the desktop version. So in theory, yes, you should be showing everything. Some of the problems I was having from purely practical point of view with BoagWorld, the one example I can think of, is that BoagWorld uses the Twitter API to allow you to post right to Twitter. That calls in an iFrame and resizing an iFrame is a bugger to do and formatting the content within the iFrame. So that might not be appropriate on a mobile device anyway because it’s got built in Twitter client you might want to call to.

So it’s adapting the functionality rather than getting rid of it so much. There was some issues we talked around with that. Then finally that bit about iPhone users who complain about being forced to go on the mobile version. We were left wondering if it was a really good idea to get them a cop out in some way. Does that mean I knew in advance there wasn’t going to be any right or wrong answers to these? I just wanted to talk with somebody that had more experience with working on responsive sites for longer. Hence Ethan and you, Leigh, had been doing some stuff with responses. So I thought I would drag you in on the call as well.

Marcus: Do you find yourself now just resizing the browser on everybody’s sites to see what happens and kind of tatting? I’m feeling quite smug when theirs doesn’t and yours does.

Paul: Yeah.

Leigh: Dangerous ground.

Paul: Oh, absolutely. I’m not saying the smugness it justified.

Marcus: It’s always a good way to see what the techniques other people are using as well and say, “Oh, that’s interesting. They’ve done that and that.” Because we’re still kind of feeling our way through all of this.

Paul: Of course. It’s a new technique so, yeah, it’s perfectly acceptable. Anyway, we’ve spent far too long talking. Let’s finally have our interview with Ethan. Hello, Ethan.

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.

Paul: I like Ethan. He’s a nice chap, isn’t he?

Marcus: Yeah, he’s a good guy.

Paul: It was good to have a chat with him. He’s always so helpful. Also, I like him because he’s pragmatic with I guess I am. He didn’t sound, “This must be the way that you do it.” When I talked about adaptive design, for example, he said, “Yeah, that’s a really good starting point, a good way to begin.” He talked about how, you know, that’s great because you can retro fit that to an old website which is really good.

Marcus: It’s like Headscape.

Paul: Yeah, like Headscape. We can easily make that adaptive even though it was built before responsive design came along.

Marcus: Four months ago.

Paul: Alright, it was launched four months ago, but it was started years ago. I know how long it takes us to get anything of our own projects out. Not client projects, Marcus. Obviously we’re very efficient.

Marcus: So let’s just bring you a big spade along to dig huge holes.

Paul: I’ll have to write an article on that about RF Benevolent Fund about – In fact, by the time this comes out it will hopefully be done because I’m going to do it today, about why some projects just go so smoothly like RF Benevolent Fund did, you know, about how it was dependent on the client and nothing to do with us.

Marcus: Are you going to be revisiting certain areas of the design process in your article?

Paul: What? What do you mean? I don’t know what you mean by that.

Marcus: Yeah. Poor Leigh had nothing to do with the project. We were quite forceful.

Paul: No, but it was fun. I’m going to talk about that. Absolutely.

Marcus: Okay.

Paul: So basically what – I do warn clients beforehand, don’t I? I did with Michael, who is a great client. I really enjoyed working with him. I said right up front, I pushed and I asked the question, “Why do you want to do that on the rest of it?” He said, “You can pull the I’m the client card on me if you get fed up with it.” That’s exactly what Michael did.

Marcus: Now he doesn’t talk to him.

Paul: He doesn’t. This article, why are you making me sound so evil?

Marcus: Because it’s good fun.

Paul: I do require a good slap, but I need a good slap to shut me up, don’t I?

Marcus: Yeah, I guess.

Paul: I was fun there. I thought it was great. Right. Yeah. So, Ethan, nice guy. I liked him a lot. So the main thing that I took away is there is no right or wrong approach. As we’ve already said, this is a new technique and we’re exploring all the possibilities. I have to say, I was a little bit – When it came to BoagWorld I was a little bit nervous about having a go with responsive design in fear of not demonstrating best practice and having people like Jeremy Keefe [inaudible 1:02:08]. I always pick on Jeremy. Do you know what he wrote recently, right? Ed’s article I thought, “Well, I wrote it.” But it’s technique about the fold and adapting vertically.

Marcus: Did he comment?

Paul: No, no, he didn’t comment. He just posted to his Delicious feed. He’s got a really good Delicious feed which I highly recommend subscribing to where he kind of links out to really cool articles he finds and he writes a couple lines in the description associated with it. So he linked this article and his response was, “For once Paul has posted something of value.” He did say joking in brackets. Now I can work out with that joking was joking about he only rarely posts something of value or joking that this was of value.

Marcus: I wouldn’t bother reading it actually.

Paul: No. I give as good as I get which is cool. Yeah. So I was a bit nervous about the idea of kind of doing this for fear of getting it wrong or not demonstrating best practices. But best practice is still evolving. So I think we’re all making our – I mean, but I think the technique is absolutely amazing.

Leigh: Very satisfying as well when things start going around ooh.

Paul: It just it works.

Marcus: Right.

Paul: We’ve been talking so long – I mean, I’m looking back because I’m working through the archives of BoagWorld tidying things up for the re-launch. I’ve been talking about mobile web since ’97. Oh, ’97.

Marcus: Yeah. 1976. Yeah.

Paul: Since 2007, 2008 was when I first started talking about it along with other people. It’s not like I came up with anything. It’s just that people like Cameron Moll were talking about and this year is going to be the year of the mobile web and this year is going to be it and so on and so on. It really has now hit seriously. It’s such a big area and you were beginning to think this was going to cost companies a fortune to create separate versions of their website. All this stuff is going to be unmaintainable. It’s going to be really the spot. Then this technique comes along that really hammers it and really solves a lot of the problems, but we’re still kind of evolving it.

No doubt, by the time the new BoagWorld launches, this technique is going to be totally outdated and I would have done it wrong. At least it’s more suited to mobile devices than my previous site was. I think, you know, there are plethora of devices now that are becoming to dominate web usage. I recon they’re going to pass desktop usage next year. It’s the challenge that we’re going to have to address and we’re going to have to deal with. How do they measure through magic pixies that go through the interweb tubes?

Marcus: Because if you measure it by people accessing a site via a mobile device, meaning, compared to someone accessing a site from a desktop device, by just accessing it, that’s going to become more access by a mobile device.

Paul: Yes.

Marcus: That’s a find, but it actually doesn’t mean much. It’s how much time they spend on that site when they get there I think associated with accessing it as well. It should incorporate time spent as well.

Paul: Well, really what matters is whether people complete tasks or not. That’s a metric that’s really hard to know.

Marcus: You could associate that to a certain extent. It would be better if you knew how long people – If you associated time spent as well as just accessing it.

Paul: Yeah, but time spent – I don’t know if I agree with you. Time spent can mean they’re lost on the website or that they’re struggling to complete their task or whatever else. The longer that people spend on the website doesn’t certainly mean the better.

Marcus: I suppose it’s potentially dangerous to say, “Well, the mobile device is being used far more than the desktop devices. Therefore –“ I’m not suggesting we would, but we’re going to spend less time worrying about desktop devices. Whereas, I think if people are spending four time, 10 times the amount of time on a desktop device as they are on the mobile device, then you can argue that it’s still more important.

Paul: I think the argument either way is redundant. I think the message you need to take away from this is that you cannot just think about the desktop anymore. You have to think equally about mobile or you have to think about all the devices in between mobile and the desktop like tablets or even these days things like TV. The number of people that are accessing the websites on their Wii is increasing. I’m not saying it’s significant necessarily yet. But the great thing about responsive is your website will look good on a TV as it would on a mobile, as it would on a desktop, as it would on a widescreen monitor or whatever else. It’s that flexibility that I think is so nice about the technique.

What I like – I mean, but let’s be honest. When it comes to responsive design you aren’t looking at rebuilding your entire front end of your website, the CSS of your website in order to get it to work like that, which is great for new clients that are coming in. I think most of the time now we will be recommending that they build their website responsive. But for existing clients then they’ve got a problem because they’re not in the position where they’re undertaking a redesign of their front end. That’s where I’m quite interested in adaptive design like we’ve done for RF Benevolent Fund where you just said, “Okay, we’ll do a desktop version and we’ll have a switch point when the resolution is under 400 pixels or whatever width and we’ll flip to a mobile version.” That could be retro fitted on to any website.

So that’s why you, Mr. Salesman, needs to be going to all our existing clients and saying, “Why don’t you have an adaptive website as a first step towards responsive?” The other great thing about it is that thinking that you do in the adaptive design, and the process will apply when eventually do a redesign in hopes to make it responsive.

Marcus: You explain it so well there, Paul. I recon you should call them.

Paul: Yeah. I’ll just do everything. That’s my job.

Marcus: I do everything. Yeah.

Paul: I do. One minute I’m working with designers and the next minute I’m selling. I’m just multi-talented.

Marcus: That’s right.

Paul: So here we go.

Marcus: Jack of all trades.

Paul: Yeah. You say Jack of all trades like it’s a bad thing.

Marcus: Master of none.

Paul: Read my article on Smashing magazine in defense of the generalist.

Marcus: He’s pointing his finger at me.

Paul: I am. I’m wagging. Defense of the Generalist. I’m a great fan of that. You’re not even a generalist.

Leigh: You have to be a generalist because only then can you kind of synthesize different bits together.

Marcus: That’s a whole other podcast, Leigh.

Paul: I agree with you. Generally just sitting around the table.

Leigh: We have to defend the generalist position.

Paul: Leigh, we do have a role in the world.

Leigh: I just wanted to mention quickly in an article I read about mobiles in Asian and how we kind of sit in our little bubble here.

Marcus: Oh, yeah.

Leigh: And how about they’re all using these kinds of generic tablets and mobile phones and Opera is the main kind of interphase for everything. That’s just kind of mind boggling. They’re just relying on the web for all this stuff. Responsive technique becomes so important then.

Paul: It does. Yeah. As soon as you start talking about international audience, Asia, they go back to what’s the main thing people actually using on a daily basis. In Asia it is mobile devices. In Africa as well. You know it’s the mobile network. They don’t have broadband. They don’t even have landlines to dial up. It’s mind boggling. Mobile is the thing.

Leigh: Then the iPhones and iPads.

Paul: It’s just shitty little things like in Africa, I mean, Asia there are really cool stuff. Adapting for all these devices is so, so important if you’re international. But even in the U.K. now it’s massively important.

Leigh: And desktops are going to get less prevalent. Tablets are going to be taking off more and more.

Paul: Yeah. I mean, we haven’t even touched a Palm because we’ve been concentrating on responsive design rather than specifically mobile. There is a whole issue about context and about, you know, suddenly people, even if you’re using a laptop, you might be sitting on the sofa on your LAN with the TV blaring and the kids running around your feet, which means your concentration is different. And oooh, one step at a time otherwise your head really would explode with all this stuff. It’s really interesting. This is what I love about the web is that it’s always new challenges and ways you need to think about.

Leigh: It’s always changing and keeping you on your toes.

Paul: Absolutely. So on that really high point we will now ruin it by listening to Marcus’s joke.

Marcus: Oh, yeah. I’m sorry, I switched off.

Paul: Are you still using the same list of jokes?

Marcus: Yeah. I only did one.

Paul: You’re going to keep making this stretch out for as long as possible.

Marcus: These are the famous jokes from the Edinburgh festival ruined by me. This one is from Tim Vine, “Crime in multi-story car parks, it’s wrong on so many levels.”

Paul: Okay, on that note, thank you very much for listening. We will be talking to you again in two weeks’ time where we will be looking at the actual building process and in particular WordPress.