Why You Need A Responsive Design In 2013

If there’s one single change you should make to your website in 2013 it’s to embrace responsive design. If you’re not aware of what responsive design is, it’s when you go to a website that resizes its design to fit the device that it’s on; whether that be a mobile, a tablet, a desktop, or even bigger displays than that.

Sometimes people write off responsive design as just being a hip new thing that hipsters do, or something that’s just really complicated when a mobile version of a website is fine and good enough. But the advantage of responsive design really is that, from a user’s perspective, you don’t have these issues of going to a site and having a mobile specific URL and then sharing it online and then sending people on the desktop to the mobile site, or potentially, as well, if you go to a site that has no responsive design or mobile design at all, then it might not function on your device at all. If you’re an e-commerce supplier and you’re missing out on sales because your site isn’t responsive, that’s a big issue for you, especially once more people embrace mobile as they did last year, and as they definitely will do this year.

Responsive design is really something you should consider. Google, as well, have actually come out and said that it is the method that they recommend everybody uses on their websites if they’re going to serve people from mobiles and tablets. For those two reasons responsive design is something that you really have to consider, but that’s not enough. Someone saying that you should do responsive design is not enough to magically transform a really complicated website into something that suddenly streamlines on other [devices].

That’s a hard process, and I get that. I get that it can take a long time to strip back architecture, to get everyone to sign off on this. But ultimately, if you just whittle it down to a few simple points I’m going to go through now, this should really help focus your strategy for responsive design and hopefully allow you to convince the right people that you need to do this for your website.

The first thing you need to do is streamline the information on your pages. A lot of guides that I’ve read about responsive design make it seem really easy if your page is only just text. But whose website is just text? Resizing text that scales is really, really simple, yes, but there are other things you have to consider. You have to look at the page and think, “Okay, that page has got a form on it that’s at the bottom of the page. If we shrink everything, that form is going to be really hard to find. Do we want to move the form up higher on a responsive design, or do we want to just link people to the contact page? How is this going to work?”

So it’s not enough to just say, “We’re going to get our website and shrink it down for responsive design.” That’s not what works. What you really need to do is just grab a piece of paper, sketch out a grid format, and think of it on the mobile first. If I viewed that page on a mobile, what’s the important information someone would have to see? Then as the devices get bigger, what extra elements can we introduce to benefit those people, whilst also trying to remember that the mobile user still has to be able to complete that call to action that you want them to do? Don’t cut that out and don’t sacrifice the best bits of the content just because they’re on a smaller device or a tablet.

Once you’ve done that, once you understand how your site works in its simplest possible form, you can add on the extra elements so the desktop users don’t get a compromised experience. One thing I hate is when I see a website that’s been designed for mobiles, but on a computer it’s just like a massive font and massive images, and it looks really ugly. It looks like it’s designed for touch. When something is designed for touch and you’ve just got massive buttons everywhere, it looks really weird on a desktop. So I don’t really like that.

Remember your site still has three distinct stages. It still has to look good on a mobile, on a tablet, and on computer. Don’t just take it and stretch it, as you wouldn’t just take your normal site and shrink it down. Please remember those three distinct stages when you’re designing a responsive design.

The next thing to do is consider absolutely everything. So how I mentioned that text is just one part of it, when we did responsive design for the Koozai website, every time we thought we’d nailed it, we realised that actually something else wasn’t working. So we made our images shrink down on devices, which worked really well. But then we found out that our infographics, when you shrink them down, you couldn’t actually read the text. So we had to consider what we were going to do in that instance, and the solution was to have a version you could click on that then scaled up, that you could drag around and move on a mobile. So there are certain considerations.

Also with our videos, as well, the API that we use with Wistia is fantastic. It lets you do a lot of things, but it doesn’t automatically scale down to a device. So we had our developer write extra code that we tag onto our videos with the Wistia API so they now shrink down automatically. YouTube videos don’t automatically do it either. So we had a little bit of code that detects the user’s device size and shrinks that down.

SlideShare also, we’ve got slides on our site. We thought they would work before they scaled down, but they don’t. So we had to write extra code.

You need to check your site all the way through and consider that text is probably going to resize easily, but then images and slides and videos and files like PDFs, they might not instinctively resize, and therefore, there are extra considerations you’ve got to think about.

Also your shopping cart as well. If you’ve got an e-commerce site, is it going to shrink down nicely? That’s a really important factor. Is it going to be just as easy to complete an order on a mobile as it is on the desktop? In fact, I’d probably say it should be easier on a mobile because you’ve got to click all the fields in one by one on a tiny little keypad. So really that should be simpler than the desktop experience. Just be careful. Just consider that this is more than just a text resizing project.

Device specific issues are also something to consider. If you compare an iPhone to your computer, the iPhone’s going to be a lot brighter. In fact, all Mac products, even a MacBook’s going to be a lot brighter. I’ve seen some websites where they’ve got a light blue background on the desktop. Then you look at it on an iPhone, and that background’s almost invisible because of the increased brightness. Therefore, when you’re doing this, you need to test it on lots of different devices to see if the fact that it’s on a smaller device and other changes are going to cause a difference.

Web developers should know a lot of this. They already know that on a Mac you’ve got font substitution issues to worry about. You’ve got the increased brightness of a Mac screen to worry about. Also now you’ve got the retina display issue of the new iPhones and iPads. We’ve had to go through our entire website and make some of our key images twice the size when viewed on an iPhone and an iPad so they don’t look awful on their retina display.

Even our company logo. Company logos on a lot of sites now look awful on a retina display, and you do not want your company logo to look really pixelated if you’re a site that encourages people to buy products from you. It just looks unprofessional. So it’s really important to consider that retina displays are going to cause problems, and also in the next year or so, you can expect to see retina displays on things like MacBooks. Even, let’s say 2015 kind of time, the default screen display on normal computers could be retina display as well.

These are all factors you need to think about now, because if you can nail it now, it’s not going to give you a big headache in a few years time. Also it’s pretty awesome to be able to say that your website is HD compatible as well.

A full site link. Responsive design is really useful, but if you have had to strip out some elements, even little ones on a mobile site, you can guarantee somebody’s going to be like, “Oh, where’s the button to do that? I really want to just do this one little thing, and it’s not there.” Just have a full site link at the bottom of your page that allows people to switch to the full version of the website.

We don’t do that on the Koozai website because we don’t strip any elements away on a mobile. We give you everything. But If you are cutting things out, like a lot of sites, like eBay and Amazon, they cut things out on certain pages, usually the one thing I want to do, but they give me a full site link at the bottom so I can still do it. If you can, add that in there, especially if you’re taking stuff away.

The last thing to do is test everything on all the devices. It’s pretty easy to find somebody who’s got an iPhone, an iPad, a Samsung tablet, a Samsung phone, a laptop, and a computer. Just grab a couple of friends. You’ve probably got all that kit lying around between you. Although you can test responsive design by shrinking your browser and just dragging it and shrinking it until it’s the right size of the device, I’d always recommend that you physically get out a phone, get out a tablet, and look at every single page on your site on there, or at least if you’re using a templated site, let’s say you’re an e-commerce site with 5,000 products. I’m not expecting you to test 5,000, but at least check all the different types of pages or your page templates to see how they look on each of those devices before you go live. Otherwise it’s too late.

Every time you make a change on your site that affects the responsive design, please complete your calls to action. Fill out your shopping cart. Check it still works. Fill out contact forms. Check it still works. Anything like that. Your key actions that you want people to do on your site, just check they work all the time, because if that breaks and it’s because of a responsive design change, it’s just irritating more than anything. Test, test, test on the right devices.

Those are all the things you need to do. I know some people will be looking at this saying, “Oh, responsive design is just a buzz word. I don’t need to do it.” But hopefully this has shown you some of the reasons to do it.

Also remember that responsive design is not HTML5. So they’re two separate projects. If you want to make your website HTML5 compatible, that’s a whole separate decision and thing to think about. Obviously, if you are going to redesign your site for responsive design, you probably should consider HTML5 at the same time, as well as Schema and all these other things you can add on. But ultimately, don’t make the association that just because you’ve got to do responsive design, you’ve got to do HTML5, because that might take you even longer to get it signed off in your organisation, and that’s the last thing you want.

Thanks for watching this video. I hope you embrace responsive design as we have. Visit Koozai.com for more information on what we do or any of the social profiles at the end of this video. Thank you.