Responsive Design Tips and Benefits

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 for more information
on what we do or any of the social profiles at the end of this video.
Thank you.

Add a Comment

Your email address will not be published. Required fields are marked *