10 things to consider when building a responsive site

Paul Boag

This week on the Boagworld show we take a close look at responsive design, and identify ten things you should consider when going responsive.

Paul Boag:
This week on the Boagworld show we take a closer look at responsive design and identifying 10 things you should consider when going responsive.

Add your own suggestions or view the links mentioned in this weeks show.

Hello and welcome to boagworld.com, the podcast for those involved in designing, developing and running websites on a daily basis, and indeed anyone else to fancies listening to it really. Because, I mean, students listen to it and I know a lot of people that don’t work at Web designer tool listen to it, which confuses the crap out of me.

Marcus Lillington:
Really?

Paul Boag:
Yes, seriously.

Marcus Lillington:
Why? Because we’re so entertaining.

Paul Boag:
They’ve got nothing better to do with their lives I think basically. Although…

Marcus Lillington:
You’ve made my day there, Paul.

Paul Boag:
Have I?

Marcus Lillington:
Yes.

Paul Boag:
So just like why? Because that justifies you talking about cricket.

Marcus Lillington:
Yes or anything, being here.

Paul Boag:
Anything that you want to talk about.

Marcus Lillington:
But that’s great. People listening to this who aren’t in web design.

Paul Boag:
Oh, people listen to any old shit.

Marcus Lillington:
Yes, well okay.

Paul Boag:
They got nothing. If you’re in a commute, if you’re driving like an hour and half to work everyday, you will listen to literally anything to make the time pass faster.

Marcus Lillington:
Do you know I never listen to anything on my commute, on the way in?

Paul Boag:
That’s because your commute isn’t that long, is it? How long is your commute?

Marcus Lillington:
35, 40 minutes.

Paul Boag:
What, do you just sit there are dribble in like an old man?

Marcus Lillington:
I kind of chat to myself really. I listen to the radio and music on my way home every time. I’ll just check on the headlines and then I will put some – put a CD or something like that, but on the way in, nothing ever.

Paul Boag:
You – it’s the only way you can be sure of intelligent conversation, isn’t it? Just to talk to yourself?

Marcus Lillington:
Well, my thoughts are, you know, I bring them together.

Paul Boag:
I do know what you mean. Sometimes I do just kind of sit.

Marcus Lillington:
I quite like driving as well. It’s a nice drive.

Paul Boag:
Yes, that’s true. You do have quite a nice drive. No, it’s not, it’s mainly on the M3.

Marcus Lillington:
But that’s a bit rubbish, once I peel off the M3 and start going down through the countryside towards Winchester, it’s very nice.

Paul Boag:
Ah okay, you cut through the countryside to Winchester, fair enough.

Marcus Lillington:
Yes, I don’t go all the way down to the Winchester junction, this is really interesting.

Paul Boag:
This is fascinating.

Marcus Lillington:
For people who don’t even live in Hampshire.

Paul Boag:
Or in Britain.

Marcus Lillington:
Let alone – but, Paul, don’t go all the way down the M3 to the Winchester junction, because you’ll get stuck in awful traffic.

Paul Boag:
Oh, okay. That’s useful to know.

Marcus Lillington:
Take the A33.

Paul Boag:
Top tip from Marcus today.

Marcus Lillington:
Yeah there you go.

Paul Boag:
So I listen to audio books. So we really should have Audible as a sponsor, because I could literally kind of mention 100s of audio books. So that’s what I do. Do you know I never listen to podcasts? So basically both of us make a podcast and neither of us listens to any.

Marcus Lillington:
I don’t think of ever listened to a podcast all the way through. Not even ones where I’ve been guests on other ones.

Paul Boag:
That’s terrible.

Marcus Lillington:
I get bored.

Paul Boag:
Yes, they are. A lot of them are boring. I don’t know why people listen?

Marcus Lillington:
I’d much rather listen to music.

Paul Boag:
Yes, exactly.

Marcus Lillington:
Or a story I suppose although I’m kind of keener on reading stories, but yes …

Paul Boag:
It’s a good way of getting through stories, because I never seem to have enough time at home for stories. There’s always something to do.

Marcus Lillington:
I always think bed time is story time.

Paul Boag:
Bed time?

Marcus Lillington:
Yes.

Paul Boag:
That is true. Sitting in bed at night, reading a story. I’ve started doing that more, so I usually have two on the go. I’ve one which is an Audible story and one that’s a reading one.

Marcus Lillington:
I have different books for different rooms in the house.

Paul Boag:
You don’t.

Marcus Lillington:
I do.

Paul Boag:
That is – I bet you have one for the toilet?

Marcus Lillington:
Of course, that’s – when I say rooms, that’s the room I’m referring to. Rooms I’m referring to.

Paul Boag:
Right. See, I read – when with audiobooks, the good thing to listen to when you’re in the car driving is work related audiobooks. If there’s certain kind of work things you want to get through.

Marcus Lillington:
Yes, which is why people listen to this I guess.

Paul Boag:
What? Because they learn stuff?

Marcus Lillington:
Well, to give …

Paul Boag:
Never.

Marcus Lillington:
… certainly not on this bit of the show.

Paul Boag:
No. But a lot of people fast forward, past this bit, don’t they?

Marcus Lillington:
But as you’ve said, people are in Web design, listen to it. Made my day that has.

Paul Boag:
And a lot of people – the number of people that – I’ve been to conferences, lot of conferences recently, as you may know, and the number of people that come up to me and say, oh I mentioned this last week, I used to listen to your podcast

Marcus Lillington:
Yes.

Paul Boag:
And actually – and that’s a lot of people go on then to say and that’s how I got into Web design professionally.

Marcus Lillington:
Wow!

Paul Boag:
So they were either students or they were just kind of fiddling around with the Web design in the evening. And then that’s how they got in. I would be really interested to see if anybody still does that. If you do, tweet us at @boagworld. Don’t even – I used to say email us, but I know nobody will do that. Takes far. Email feels like far too much work.

Marcus Lillington:
You’ve got a thing about email, email is just another form of communication, quite a useful one.

Paul Boag:
Yes, it’s all right. It’s just you have to pick through all the crap.

Marcus Lillington:
Well, surely this is exactly the same, more so, on Twitter.

Paul Boag:
Oh, yes, yes, well not with mentions, you don’t get too much spam. You get a little bit, but not like you do with email.

Marcus Lillington:
I don’t get that much spam. I’ve just spilt tea everywhere.

Paul Boag:
That’s because you’re not as popular as me.

Marcus Lillington:
What, that I spilt tea?

Paul Boag:
Yes. You know what I meant.

Marcus Lillington:
Yes, it’s true.

Paul Boag:
Now you just don’t – you don’t sign up for as many stupid gadgets and things and ooh, there’s a shiny new bit of software, let me give them all my personal information.

Marcus Lillington:
Yes. No, I don’t do that.

Paul Boag:
You’re sensible basically.

Marcus Lillington:
Mostly.

Paul Boag:
Have you managed to clear up your tea? Do we need to stop recording?

Marcus Lillington:
No, no, but we will stop recording in a minute and I’ll deal with it then. It’s not gone all over a keyboard or anything.

Paul Boag:
So it’s not like dripping on your legs or …?

Marcus Lillington:
No, no, it’s just on the desk.

Paul Boag:
Okay.

Marcus Lillington:
I can deal with it in a few minutes time.

Paul Boag:
Can you take a photograph and post it to Twitter?

Marcus Lillington:
No.

Paul Boag:
Because I’m sure people will be interested.

Marcus Lillington:
No.

Paul Boag:
That’s why if you’re a proper Instagrammer, that’s what you’d do.

Marcus Lillington:
But I’m not. I do find though… This is an interesting thing. Well is it? – I found it quite interesting that I’m taking probably – I don’t know a hundred times more photographs than I was 20 years ago. To the point of they’ve become a different thing. They’re like almost like a diary now.

Paul Boag:
Yes, I know. A lot of people do that. That’s not news, Marcus.

Marcus Lillington:
No, but without the realization that it is, the diary is interesting to me. It’s kind of like I’ve always thought you must look at your photographs and categorize them and put them in this pot and the good ones you print and put on the wall, they’ve stopped being that thing and now they’re just…

Paul Boag:
Yes, they do.

Marcus Lillington:
So I’m catching up, Paul.

Paul Boag:
I bet you will sue one of these people that… I can’t remember what I talked about in the show. I don’t care anymore. My brain’s like mush. Did I talk to you about the definition of a digital native compared to a pre-digital person with email?

Marcus Lillington:
It rings a bell. Go on then. I can’t remember.

Paul Boag:
So if you start your email with hello, name of person and end it with you signed off, with you know, Paul or whatever, then apparently that means you’re old school, because you’re basically treating email like letters. While the young hip trendy kids treat it more like a Facebook chat and they won’t – I mean if you think about it, it makes sense. I mean, why do you sign off your email? It’s not like they don’t know who it’s from by the email address.

Marcus Lillington:
It’s polite, Paul.

Paul Boag:
See – yes, but the world’s not polite anymore.

Marcus Lillington:
It can be. We just have to try a little bit harder.

Paul Boag:
Yes, I can’t be bothered with all that. So I never say hello Marcus and I never sign off Paul.

Marcus Lillington:
Yes, you do.

Paul Boag:
Do I?

Marcus Lillington:
Yes.

Paul Boag:
Oh god! Oh, I thought I was hip and trendy.

Marcus Lillington:
No, you’re not.

Paul Boag:
Oh, bollocks. Anyway, what we talking about on this week’s show, Marcus?

Marcus Lillington:
It’s yours sincerely, Paul whatever your middle name is Boag.

Paul Boag:
Yes, I’m very formal.

Marcus Lillington:
Very formal?

Paul Boag:
Yours sincerely Paul Alexander Boag.

Marcus Lillington:
There you go.

Paul Boag:
There. Now I’ve scanned in my signature as well.

Marcus Lillington:
What?

Paul Boag:
Well, you sign it, don’t you? So you have to have a scanned in signature at the bottom of the email.

Marcus Lillington:
That’s going too far.

Paul Boag:
Is that – that step too far?

Marcus Lillington:
Yes, that’s a step too far. Just sort of like thanks Marcus, that’s okay I think.

Paul Boag:
I used to put cheers.

Marcus Lillington:
Yes, sometimes I do, it depends who I’m talking too.

Paul Boag:
Cheers just sounds crap. I just – I’m not doing anymore, because I want to pretend to be hip and trendy.

Marcus Lillington:
Okay.

Paul Boag:
So we’re talking about – yes this week …

Marcus Lillington:
Yeah, what are we talking about Paul?

Paul Boag:
We’re talking about responsive design, because there’s just not enough been written on that subject.

Marcus Lillington:
Yes, not many people know about it or anything like that.

Paul Boag:
Nobody mentions it. It never comes up. So I think that kind of – the idea of this week’s show is that a lot of clients come to you and say yes, we want our site to be responsive, but there is responsive and then there is responsive, if you know what I mean?

Marcus Lillington:
I do.

Paul Boag:
So there is the kind of you can make a site responsive quite easily, but actually to do it well needs quite a lot of thought and quite a lot of effort. So we’re going to kind of look at the – we’re not going to talk about how to make your site responsive in the kind of using CSS break points and all that kind of stuff. But rather we’re going to talk about the kind of things you need to consider, that kind of go around responsiveness, if that makes sense.

Marcus Lillington:
Yes, I’m – we recently worked with a client where we just did the design work and we delivered responsive templates. And I’ve got to be quite careful here. Basically, the developer in question – claimed to develop responsive Web sites, but they weren’t really.

Paul Boag:
Right.

Marcus Lillington:
It was kind of like they broke on lots of different width, and that kind of thing. So it was yes, so …

Paul Boag:
I suspect that will come up later as we talk about it.

Marcus Lillington:
Okay.

Paul Boag:
Because that’s one of the points.

Marcus Lillington:
But as a warning, yes. Ask what people mean, I guess, too many Web site owners.

Paul Boag:
Yes, yes, absolutely. And kind of dig to the bottom of how far you’re going to go. And I’m not saying see, what gets up my nose sometimes when we talk about – what people write about responses these days is they do make it amazingly complicated and say you needed all of these things for to do it properly. And we do that all the time, make things more and more complicated. I’ve no problem with cheap, quick, and dirty responsiveness if that’s all you can afford and if that’s the right decision for your particular project. But I guess what I’m getting at with this show is to make sure you’re comparing apples with apples. What you’re really offering with responsiveness, is it going to be the same level of responsiveness that someone else might offer for example? So that’s what we’re going to get into.

Marcus Lillington:
Okay. Sounds good.

Paul Boag:
All right. Let’s kick of then with my number one piece of advice about building sites responsively.

Start with your content hierarchy

All right. So, Marcus, you’ve mopped up now, have you? I think the listener need an update in your mopping.

Marcus Lillington:
I’ve mopped up. What I didn’t do earlier is talk about the tea that I’m drinking, which is actually really, really nice.

Paul Boag:
We just said we’re starting the show, off you go again. What brand of tea is it? Americans like – I think they’re cultured if they drink tea. So they probably care …

Marcus Lillington:
Well, it’s a brand I don’t know if you can buy it in the States. Maybe you can… A brand called Teapigs.

Paul Boag:
What?

Marcus Lillington:
Teapigs, yes. Don’t ask me why, but it’s really nice tea. This particular one is called the new Earl Grey and it’s gorgeous. It’s got lavender in and lime and all that kind of stuff as well as real tea. I can’t stand just herbal tea.

Paul Boag:
Yes, I know what you mean.

Marcus Lillington:
Yes, so anyway really nice. So yes, little advert. I wonder if I can get some, can be sponsored by Teapigs, because they’re bloody expensive.

Paul Boag:
Well I tell you what, digg.com for a while was sponsored, when dignation, the dignation podcast was around, it might still be around for all I know, that they were sponsored by a tea company for a while. So there you go.

Marcus Lillington:
There you go.

Paul Boag:
So – but we don’t do sponsorship.

Marcus Lillington:
No, we don’t. Well, maybe we should consider it for certain things.

Paul Boag:
If we really, really, really like it.

Marcus Lillington:
Yes.

Paul Boag:
But then the trouble is, we might be approached by somebody that does – who we know that does something that wants to advertise on the show and we don’t really, really like it and we’d have to piss them off.

Marcus Lillington:
Yes. We have to get around that.

Paul Boag:
Yes, you see.

Marcus Lillington:
That would be tricky.

Paul Boag:
It’s a can of worms. Just think of…

Marcus Lillington:
We would have to lie, Paul. Lying, that’s how we get around it.

Paul Boag:
Well, how do you – oh, we’ve got – our slots are full.

Marcus Lillington:
Yes, exactly. We’d love to, but yep we’re booked up for the next 10 years, sorry.

Paul Boag:
Yes. I think they might notice, if they listen of course. Nobody listens so it doesn’t really matter. Can we get on with the show?

Marcus Lillington:
We can. The show that’s ringing a bell with me.

Paul Boag:
What do you mean ringing a bell?

Marcus Lillington:
I’ve just read the notes for today and I could have sworn we’ve done this show before.

Paul Boag:
Marcus, we’ve done every show before. That doesn’t really narrow it down. Seriously, you think we’ve done this?

Marcus Lillington:
I don’t know. I’m going to have a little …

Paul Boag:
I don’t care. That’s my response.

Marcus Lillington:
Okay.

Paul Boag:
I just don’t care. All right. So number one is start with your content hierarchy. Now if I was particularly pretentious, I would say build content first. But I’ve got a bit of a problem with the idea of building content first, not as a principle, but as an interpretation of that. I think that when you talk about building content first, a lot of people think they have to kind of – perhaps that’s mobile first. They think they have just kind of start with the really strip down minimalistic version. And then, they do the mobile version and they build up to the tablet version and up to the kind of desktop version and then the TV version or whatever.

Marcus Lillington:
We start at the watch now, Paul. Come on, get it right.

Paul Boag:
Oh yes, we start – yes, start with the watch. God that will be fun. But actually I don’t think that you necessarily need to do it like that. For me content first means really kind of a: getting the content that you’re going to be working with, to start with rather than at the end of the process, oh we’ll just pour the content in afterwards.

Marcus Lillington:
Yep.

Paul Boag:
And b: to establish your content hierarchy. In other words, what’s the most important thing, second thing and so on, because when you linearize the content which you normally do when you go mobile, then you want to know what that hierarchy is going to be and you need to think about that from the very beginning rather than think of it as a kind of afterthought.

Marcus Lillington:
Yes, but it’s really – this seems so logical, doesn’t it? But it’s some organizations don’t actually know what they – how to prioritize their content and no matter how much you bully them. I’m speaking from experience here. It’s almost impossible to get that priority there. But as you quite rightly pointed out, if you’re writing code or you’re designing a linear site, you have to make those choices.

Paul Boag:
I think the one argument I always take with clients is that you are prioritizing content, whether you’re aware of it or not. By – even on a normal Web site if you list something alphabetically, there is still something at the beginning of the list. So it has been prioritized. The other attitude I’ve got these days, I’m becoming increasingly bolshy about all of this is, if the client want to do it, I will.

Marcus Lillington:
Well, that’s – yes, that’s what happen.

Paul Boag:
And you know we just make the decision for them. And that’s the way it goes, but I think you need to think that through and make that decision before you start. Now I’m perfectly okay if somebody – and I’ll get in trouble for this, especially with Dan – but I’m perfectly okay if a designer wants to start by designing the desktop version and then do the mobile version, I really don’t care as long as you’ve kind of thought through the prioritization of the content so that as you collapse things down into a mobile, to the mobile look, you know how you’re going to be linearizing it from the beginning. I think it only becomes a problem when you start showing clients a desktop when you haven’t thought about the mobile version and so on. So I think you can – we can sometimes as a community be a bit what’s the word, dogmatic over this kind of stuff and people work – work however you’re comfortable, but make sure that you are aware of – that if you start with your desktop without first considering your content hierarchy, then you’re going to get self into kind of problems irrespective of whether you’re building responsively or not. The first thing you need to do is decide what do you want people to look at first. It’s basic stuff, but it applies particularly to responsive design. Okay, so that’s number one.

Let’s move on to number two.

Don’t presume context

One of the rookie mistakes that people make when it comes to responsive design is to presume context. So oh somebody is using a mobile device therefore they are on a train or at a bus stop or something like that or they’re out and about, therefore the main thing they’re now going to want is contact details and oh, they won’t need this part of the site because that’s not going to be relevant to that context.

Marcus Lillington:
Not true, is it Paul?

Paul Boag:
It’s not true. No, absolutely. In fact …

Marcus Lillington:
Particularly more so and more so it’s becoming not true.

Paul Boag:
Yes. Research done by Google, and I’ll see if I can find a link for the show notes, says that most people are using two or three devices at the same time these days, you can be sitting watching TV fiddling with your mobile phone, that’s not uncommon. And a lot of the times there can be all kinds of different context for devices that don’t make sense. You could be on a train using your laptop, you could be sitting in an airport lounge using your laptop, equally you could be using your mobile device at home, there is no way that you can know what the context is. And so you can’t presume it basically.

Consider bandwidth, but don’t presume

Okay, talking of which the other thing you can’t presume, I’m going to skip around a little bit from the show notes, because it kind of fits better, Marcus just to warn you.

Marcus Lillington:
Okay. You’re confusing me already.

Paul Boag:
I have confused you. Is to consider bandwidth. You can’t presume bandwidth either. So just because someone is using a laptop, doesn’t mean they’re not tethered to their mobile phone, and so using a 3G connection. Equally if somebody’s on a mobile device a: they could be on a 4G connection which is blindingly fast or alternatively they could be at home on Wi-Fi. It’s perfectly possible that somebody with Wi-Fi is on really rubbish dial up or slow broadband while someone on mobile could be on super fast 4G. So …

Marcus Lillington:
I was watching the Gadget Show last night. I don’t normally watch it, but I was flicking about and there was a report from South Korea where a guy was talking about 4G, because they developed 4G in South Korea and he was saying he can download a movie in a taxi out there in 40 seconds, an HD movie in 40 seconds and they’re developing 5G at the moment where you’ll be able to do it in a second.

Paul Boag:
That’s just showing off, isn’t it?

Marcus Lillington:
One second for an HD movie over your phone. That’s pretty unbelievable.

Paul Boag:
But – I mean it kind of does show you the kind of future of broadband and things like that. That I actually – you have to wonder whether most people will end up with any kind of hard line connection going into their house whatsoever.

Marcus Lillington:
Yes, I mean, I’m going to a presentation tomorrow, giving a presentation tomorrow and I’m not bothered about whether their Wi-Fi works or not, it’s in the middle of London, so I can use 4G.

Paul Boag:
Absolutely. And then of course you got developing countries like Africa where they skip the hard line entirely and gone straight to mobile. They’ve not got a hard line network, they just rely on mobile and cell towers and that kind of thing and so that is how people get on line. So – but you do need to think about bandwidth. That doesn’t mean that bandwidth is something you can just ignore, you just can’t presume about it. So when you’re working responsively you do need to think quite heavily about well what if someone is on a rubbish connection, how are we going to deal with that. And of course that’s a particular issue when it comes to things like imagery; are you going to deliver different images to different devices in order to optimize the experience in terms of bandwidth.

But it’s not just even bandwidth – sorry images, you’ve got to think about typography and the amount of typography you’re downloading web fonts can get really quite big. Let alone all the other bits and bobs that end up on our site and the badly optimized calls to the server and all of those kinds of things. So we do need to think a lot about bandwidth when you’re building responsively, because some users will be using crap connections. In fact, to be honest, you can almost take out the word responsively from that. You need to consider bandwidth full stop, whether your site is responsive or not, because you don’t know what connection people are going to be using. And more than that obviously these days Google is pushing hard for you to optimize the speed of your site and it is beginning to affect search engine optimization as well, which is great because that finally gets the client to give a shit about things like performance which they don’t normally do. So that is our number three, consider bandwidth, but don’t presume.

Think responsive from the beginning

This is probably the biggest one.

Marcus Lillington:
Okay.

Paul Boag:
Because this is – if Dan was here, I’m channeling Dan now, all right. But with considerably less swear words which is think responsive from the beginning. Things get very, very complicated if you’re not thinking about how you’re going to build the site responsively right from the very outset of the project. It is possible to retrofit a site and make it responsive, but it will be a painful and expensive process. It is much, much better to consider it as you build the Web site and it’s much, much better still to consider it from the very moment you begin the project. And to be talking about it responsively from the very beginning, especially when you’re showing stuff to the client and getting the client to sign off stuff, make sure that you’re showing them something that does scale and does adapt to different device sizes from the very beginning, because otherwise you’re going to get into all kinds of issues later on of client expectations and simply the amount of time it takes to go, okay, so we’ve got the desktop version, now what are we going to do to make it work on a mobile device. If you design it – so the mobile version and the desktop version simultaneously, you will come up with a design that adapts much better than if you build the desktop version and then go how are we going to scale it down, because it’s just the way of it unfortunately.

Marcus Lillington:
Yes, I mean the right hand column is an excellent example of that. Or any columns but let’s say you’ve done a design where you’ve prioritized – some of the higher priority items have gone into your right hand column and you haven’t thought about where that right hand column is going to go, chances are it’s the bottom of the page, you’re going to run into problems with your client.

Paul Boag:
Yes, absolutely, because the client is not going to be happy perhaps with the positioning, oh that’s right below the fold or whatever they happen to say. But also I think sometimes you can get into situations where because of the order of the HTML it kind of to some degree still defines the order that things are linearized in. So it may mean having to rebuild some of the pages if you decide that you don’t want that right hand column to go at the bottom, but you want it to go at the top or whatever else. So there are lots of little complexities that need to be considered and it’s just so much easier if you do it right from the beginning. Okay, let’s move on to number five.

Design for multiple input devices

Number five is to design for multiple input devices. We tend to – when we think responsively, we tend to focus on multiple screen sizes. But that’s not the only difference between devices these days. You have obviously the mouse and the keyboard, you have the keyboard and the touchpad, you have touch screen devices, you have devices with those little nipples, do you remember the little nipples?

Marcus Lillington:
Yes.

Paul Boag:
You still get nipple devices which always amuses me. It brings out my childishness. Then of course you got assertive technologies, you’ve got devices controlled by brail readers, screen readers, you get some – there are different types of touch devices as well, some of which are kind of the iPhone type of device where – which is quite a responsive touch screen, which allow multiple touch points at the same time. And then you get the kind of older generation of touch devices, the ones that you need to touch with your finger tip in order – the actual nail of the finger to get it to respond and it can only cope with one touch at a time. So there are all these different – and then of course there’s game consoles as well, which have got their own controllers and keyboard input is really difficult with those and then – and now of course we’ve got the Apple watch with its little crown thing that we’ve got to consider as well. So there all these different input devices. So we can’t just focus on screen size. We have to consider all these things. And the most basic level that means things like for a touch device making sure that Marcus’s podgy fingers can click on any individual link. Well you said this yourself. I’m not …

Marcus Lillington:
Yes, it’s true.

Paul Boag:
… being accusing, you just have podgy fingers.

Marcus Lillington:
I do. It’s true.

Paul Boag:
Which is amazing that you can play the guitar as well as you can. Surely podgy sausage fingers cause problems.

Marcus Lillington:
They’re not that bad but yes they aren’t…

Paul Boag:
I’m playing them up now.

Marcus Lillington:
… long elegant fingers.

Paul Boag:
Now I have pianist’s fingers, except I can’t play the piano.

Marcus Lillington:
Really?

Paul Boag:
Yes or indeed do anything musical whatsoever.

Marcus Lillington:
Have you ever tried?

Paul Boag:
Oh only at school. I can’t even clap in time. I’m not kidding you. I really can’t. So, I’ve got no sense of rhythm at all. It’s to my eternal regret, I’m intensely good at so many things, but that’s just not one of them.

Marcus Lillington:
Of course, you can’t be good at everything can you Paul?

Paul Boag:
No, I mean it would just, it would make people like you feel inferior.

Marcus Lillington:
It wouldn’t be fair on the rest of us, would it?

Paul Boag:
No, I’m really am – no, I’m not musical. Anyway, how did we get on to that? Oh yes, podgy fingers. And then of course there’s the whole issue of if they’re using a device one handed, whether you can reach all of the icons on the screen. I’m looking at you iPhone 6 plus. So there are lots of different kind of things to consider with your multiple input devices beyond just screen really. Okay, let’s move on to number six.

Make sure it looks good on retina

Okay, number six is kind of related in some ways to this idea that it’s more than just screen size. And this one is that we also need to be designing for different pixel density as well. So for example, a growing number of devices these days have got retina screens on them. And that can make quite a big difference in terms of imagery that we use and typography and those kinds of things. So one of the kind of classic mistakes is oh, it’s a mobile device, chances are they’re on a poor connection, therefore, let’s give them a smaller image. But of course, if you give them a small image there is a good probability that that mobile device these days has got a retina screen and so that image ends up looking fuzzy and a bit shit. So you’ve kind of got to think about the pixel density when you work on it.

Now you might be going well, we don’t know what the pixel density is and I’m sure that there is some fancy way that you can work it out using JavaScript or some advanced CSS technique that is not supported by anything. But at the most basic level, what you can do is, use vector base stuff as much as possible. So you can use things like SVG and you can use font replacement to use – do iconography and that kind of stuff and then obviously you can do stuff with typography itself. So there are lots of ways of kind of reducing the problem, even if you can’t get rid of it entirely. And of course if you’re using things like SVG and you’re using fonts for iconography, then you’re also saving a hell of a lot bandwidth as well and that has an advantage in itself. So it really is worth thinking about the pixel density of the screens and try and accommodate different pixel densities.

Watch that Javascript performance

Another important thing when it comes to some devices is to think about performance. So I’m not just talking about download time here, I’m also talking about page rendering, and the performance of a page. So this is typically dictated by JavaScript that you have on the page. So if you’re say creating a Web site for an older device like an iPhone 3 or something like that and yes there are still a lot of those around. My dad has just got iPhone 3, so they do exist. Those will chug when it’s trying to render JavaScript. Also, the operating system as well, of course these come with preinstalled browsers a lot of them and those browsers aren’t necessarily always the best browsers in the world and so they don’t necessarily pass JavaScript particularly well. So all of these kinds of things from mobile phones to some of the cheaper tablets out there to even some of the kind of games consoles don’t necessarily have the best JavaScript performance in the world and so that can make your sites feel really sluggish, if you’re not careful. Now obviously that – none of these are absolutes, they are a trade off. You might go well screw it my Web application needs a lot of JavaScript and anyway 90% of the people using my application are using it on a fast desktop computer. In which case fine, ignore this one, but just be aware of it that if you are trying to kind of reach a bigger audience, then you do need to consider JavaScript performance as well.

Adapt your typography

I’ve noticed you’ve gone very quiet, Marcus. You looking up jokes?

Marcus Lillington:
I was, but I wasn’t during that section and I realized that I didn’t actually say anything at all about JavaScript performance.

Paul Boag:
Yes, I don’t imagine it’s really something you’ve got a huge amount to say on, is it really?

Marcus Lillington:
No, but I was feeling like maybe I ought to try something, but I didn’t have anything to say.

Paul Boag:
So what value do you bring to the show again, just remind me?

Marcus Lillington:
Jokes.

Paul Boag:
Jokes, oh yes.

Marcus Lillington:
Really high quality jokes.

Paul Boag:
And your likability?

Marcus Lillington:
Obviously, yes.

Paul Boag:
Because I’m so obnoxious and egotistical.

Marcus Lillington:
But you’re good at everything, Paul.

Paul Boag:
And good at everything?

Marcus Lillington:
Yes.

Paul Boag:
Except social skills apparently.

Marcus Lillington:
And music.

Paul Boag:
Yes, and music, yes. So number eight adapting your typography. This is one of the things I loved most about our new Headscape Boagworld site is that as you rescale it and I’m not – by the way, I should say this was designed by Ed and Dan, it was not designed by me, because I have been banned from designing Web sites. They – have you noticed the way the typography changes size?

Marcus Lillington:
Yes. It’s a lovely thing.

Paul Boag:
It is, because it means that if you are on a massive screen and you have got a widescreen monitor, it scales everything up which obviously for people like you and me Marcus is becoming an increasingly important thing.

Marcus Lillington:
Really handy, yes.

Paul Boag:
Do you know even I’m beginning to notice it. I’m just doing that pushing it slightly further away from me thing.

Marcus Lillington:
Yes, I always think that, but you wear glasses anyway, don’t you? You wear glasses for kind of long stuff?

Paul Boag:
Yes, I’m short sighted.

Marcus Lillington:
So in theory, your short vision should get better. You should be able to read stuff without glasses.

Paul Boag:
No, it doesn’t work like that.

Marcus Lillington:
It does, my wife has to take her glasses off to read stuff up close.

Paul Boag:
Oh yeah, yeah, yeah. Yes, no I see what you mean, but eventually both goes.

Marcus Lillington:
Yes, my long will go eventually, normally when you’re about 60ish.

Paul Boag:
Yes.

Marcus Lillington:
So it means 40s for the – if your long sighted like me you lose your short sight mid 40s and your long sight goes at about 60.

Paul Boag:
Yes, well I swear that I’m beginning to become long sighted as well as short sighted. But it might just be because I have surrounded myself with old people such as you and Chris, and that it’s psychosomatic.

Marcus Lillington:
People laugh at my iPhone. They do, they look at it and they go, they just laugh.

Paul Boag:
You should get an iPhone 6 plus.

Marcus Lillington:
I should, yes.

Paul Boag:
You really should. Best bloody phone I have ever had. I absolutely adore it.

Marcus Lillington:
There you go.

Paul Boag:
Anyway, I’m sure we’ve said that before on this show?

Marcus Lillington:
Yes.

Paul Boag:
So basically if you go, the best thing to do is to try this out for yourself. If you go to boagworld.com, and you just rescale the window, you will see how not just the kind of window shifts in size, but actually the size of the typography changes as well. And it just is really, really slick. And you can even now – I can’t remember there is a CSS, a new CSS tag, I will have to look at up in the – for the show notes, that actually allows you to make the typography proportional to the window size. So it can automatically, it’s not like you need to set it at every break point which is what we do on Boagworld. But instead it will actually just scale proportionally to the screen size that you’ve got available, too obviously a minimum size. You don’t want it to get ridiculously small. But I absolutely love that, adapting your typography to your screen is a really, really good idea.

Don’t design for specific break points

Talking of breakpoints as we just were, don’t design for specific breakpoints. Now what do I mean by that? Well, what’s very easy to do is, if you’ve got – I don’t know an android Galaxy thingamebob or an iPhone or whatever you’ve got, because that’s your kind of, your device. What you tend to do and you’re testing on that device, you tend to go oh well this is the breakpoint I need to break at; the width of my device. But of course there are so many devices out there now, with so many different screen sizes that saying oh here is the breakpoint for tablet and here is the breakpoint for mobile, is really just a little bit pointless and completely abstract. So what you want to do instead is build the whole site fluid, start to scale it down and when it kind of hits a point where you’re going oh, this is beginning to look a bit awkward, then add a breakpoint there rather than doing it at certain set points. Does that make sense Marcus?

Marcus Lillington:
It does. You basically make the decision based on content readability and layout I suppose to a certain extent. But yes, its readability and if images suddenly start to look enormous, well that’s probably a time to change it to a smaller, different layout or something. So it’s content based decision rather than screen – what people might consider to be standard screen widths.

Paul Boag:
Now you will end up with a hell of a lot more breakpoints as a result, but I don’t think that’s a problem, if you’re coding it well and especially if you’re using something like SaS or Lester to code with, really managing multiple breakpoints isn’t that big a deal, so it’s definitely, definitely worth doing. All right, let’s come on to our very last suggestion for building responsively.

Mobile layouts need testing too

Okay, last but not least is that you need to remember that your mobile layouts need testing too. And I don’t mean just testing in terms of oh, does it look all right in this, when I scale down to this size? I mean, I think we’re going to need to be testing more and more – doing usability testing more and more on mobile devices and not just on the desktop version, which I know is going to send up a groan because you’re thinking oh well, that’s even more complicated to do. But I think we are now living in a world where 50% plus of peoples’ page accesses is via mobile devices in many situations. So we need to take it as seriously as we do to the desktop, if not more seriously and that means doing proper usability testing, which is kind of a big sigh point isn’t it really? Oh dear, another thing to deal with, but I think it’s kind of essential really?

Marcus Lillington:
Yep, I couldn’t agree more and it’s something that even – kind of like I’m hearing you and talking to myself a bit there.

Paul Boag:
Well, absolutely. We are really quite bad at testing on mobile devices. I was just – I’m just interested, I’m checking out, because I always – I’m a great fan of using things like usertesting.com and I just – oh test anything on the Web. Test Web sites, oh it looks like, no see even services like that they’re testing Web based. I don’t know whether they offer – oh it says you can test mobile apps, so I guess you can test on mobile devices.

Marcus Lillington:
Yes.

Paul Boag:
So that you’ve got no excuse really?

Marcus Lillington:
None at all.

Paul Boag:
Do it.

Marcus Lillington:
Yes, Paul.

Paul Boag:
Yes, get on with it right now. Right, I think that’s it really. I mean, there’s loads more I could have put on the list basically, but there are lots of other people saying really cool things about responsiveness, but I just wanted to kind of get you thinking a little bit beyond those absolute basics of here is how to build a responsive site in CSS and get you thinking about some of the kind of usability issues that surround it as well.

Marcus Lillington:
Yes, other considerations.

Paul Boag:
So joke.

Marcus Lillington:
I have a joke from Ian Lasky.

Paul Boag:
Oh, we haven’t had Ian’s – I’m glad that Ian is still listening to the show.

Marcus Lillington:
Well, he did sent this not a month ago, a few weeks back and I think I did one of them and now I’ve dipped back into his list of jokes. I was walking down the street and got attacked by a high-vis vest and a warning sign. It was health and safety gone mad.

Paul Boag:
That’s really not very good. I don’t like that. I muched preferred the hipster jokes from last week. They were good.

Marcus Lillington:
Anyway, all right send me more jokes people.

Paul Boag:
Yes, because it doesn’t meet my criteria level. Now don’t take it personally, Ian. Most of your jokes are excellent, but that particular one I wasn’t so keen on. What was I going to say? There was something I was going to say? Oh yes, just a reminder again that we’re trying to promote the show a little bit, because a lot of people are still under the impression that the show no longer exists, because we are really good at this marketing business. So I will put a link in the show notes to a pretty graphic that you can share or alternatively just tell us many people as you can that they should – need to be listening to the show. We appreciate your support, et cetera, et cetera. Next week’s show – I actually know what we’re going to be doing next week, Marcus?

Marcus Lillington:
That’s a rare – a rare thing.

Paul Boag:
I know. I’ve no idea what it’s going to be and how it’s going to work, but next week is a load of people are doing a mental health week where we’re looking at all kinds of issues about work-life balance and that kind of stuff and really the kind of issues about as a freelancer, the pressures that you’re under and how to actually live your dream so to speak, because a lot of people set their own businesses or become freelancers, because they go oh, I want to get away from that terrible boss or I want to earn more money or have more holiday and you end up just working harder with lots of bosses in the form of clients and you don’t get yourself paid as much. So we’re going to look at all that kind of stuff next week, mental health does makes it sound a bit kind of hippyish and airy fairy, but I’m hoping it will be really useful for people and we’re going to delve into that kind of stuff. Also check out Unfinished Business podcast, because I know they’re doing some stuff on it. I know Smashing Magazine are posting some stuff including something from me on the subject, so it should be a really good show next week and something a little bit different.

Marcus Lillington:
I’ve got lots to say on that subject…

Paul Boag:
Yes, I know.

Marcus Lillington:
… I even wrote a blogpost which is a very rare thing for me, on it, once upon a time.

Paul Boag:
Well, perhaps you ought to write your top 10 tips.

Marcus Lillington:
I might do five.

Paul Boag:
Okay. If you do five and I do five.

Marcus Lillington:
All right, deal.

Paul Boag:
There we go. So – and we will see how it goes next week. So join us for that one. In the meantime, have a really great week and we’ll talk to you soon.

Marcus Lillington:
Bye.

Encouraging Clicks Masterclass

Preorder my self-learning video course for $100 off!

Boagworks

Boagworld