Some of you may feel like ‘responsive website design’ has
come out of nowhere, making website creation even more complicated, so don't worry, we’re
going to break it down for you. We'll start with a quick outline:
Responsive Websites detect the device you're using and shift their contents around.
Non-responsive websites just get squeezed onto the screen.
Responsive design has only really emerged as a viable new
way of creating websites in the last 4 years. Ethan Marcotte is credited with
the actual phrase ‘responsive web design’ in a May 2010 article in A
List Apart magazine. He started off his article by quoting John Allsop, author of “A Dao of Web
Design”, who said that
“… the web doesn’t have the same constraints [as print
media],
and [we need to] design for this flexibility.”
And flexibility is a key benefit of responsive designs.
Think of responsive websites as the yoga masters of the
internet, compared to a desktop-only website… which is more like your
great-uncle Michael with the bad back.
 |
| "I'm responsively designed!" |
Responsive designs have exploded onto the scene alongside
the rapid growth of the mobile and tablet industry, so you could think of it as
a reactionary development. With the introduction of a brand new range of screen
sizes (think, all models of smartphones and tablets…), websites needed to
smarten up and make sure they’re looking good on those screens!
And if it still seems sudden to you, just remember that
mobile web is growing 8 times faster than the internet did in the 90s; you
never really know what’s around the corner in the digital world. Will we soon
have to start designing websites for screens on watches?
Making Websites Work on Mobiles
 |
| Wearable Technology is being billed as the next big thing: Something else to consider when designing a website? |
Making Websites Work on Mobiles
We've touched on responsive website design before
in an article; ‘The 4 Latest Tips for Small Business Websites’,
where we said you have to make sure your website is going to work on mobiles in
the initial stages of development. This can be achieved in two ways;
1. Responsive Website
Design
This involves
designing a website that will adapt
depending on the screen it’s being viewed on. It’s quite clever, and not that complicated. It only gets
complicated if you haven’t decided to build a responsive website from the
beginning; going back and turning a desktop website into a responsive version
isn't like flicking a switch.
 |
| We have the technology, we can rebuild him... |
It’s a little like you bringing the Lego giraffe (left) into
the Vital Hike office, and saying; "his organs aren’t functioning right, can you
attach them differently please?" To get at the organs, we would have to
dismantle the outer Lego shell. The problem is, when we hand it back to you, you’ll
probably want him to look like a giraffe again, instead of just organs and
loose Lego tiles! So we have to rebuild him…
What I’m getting at, with this morbid analogy, is that a
responsive design goes right down to the guts of a website, so redesigning an
old website is usually just as big a job as making a whole new one!
2. A Separate Mobile Website
Another way to get your website to work on mobiles is to
create a stand-alone mobile website. Whilst a responsive design on your initial
website means it will adapt to a mobile screen by shifting around a few things,
a stand-alone mobile website is instead specifically designed for mobiles; it will
not adapt to other screens.
It is a perfectly viable option, and we will look
at the advantages and disadvantages of both methods in a later blog.
Another alternative is to create an app, but we’re focussing
on the websites today!
The Responsive Design
Philosophy…
Responsive website design should be seen as separate from devices. So instead of focussing on how to make your
website look great on an iPhone specifically, you should be thinking about the
content and design in general and how it will flow and adapt on different
devices. After all, your customers aren’t all necessarily on an iPhone… This small
change in perspective can lead to a design that will last you years, instead of
one that ends up looking like a coat you've outgrown when the next iPhone comes
out!
The Magic Behind Responsive Design…
There are a few different methods of designing a responsive website, and currently there is no “best way”.
However, the basic principle underlying most methods is designing how
everything on the page will slot together.
Your website might have a chunk
of text in the middle, an image section to the right and a banner section at
the top; well, it’s the designers job to plan out how these elements will
organise themselves on different screen sizes treating them like jigsaw pieces. Typically, a mobile screen has
very little space, so the elements on the page have to be rearranged completely so that
they all fit, and remain readable!
Alternatively, you can have some elements disappear on a
mobile website, e.g. large pictures/videos which could slow the website down.
Next up, the web team have to determine the appropriate
break points for your design; so they decide which screen-widths will trigger
an alternate webpage layout to appear, moving your screen elements around.
These break points can be different for different customers, as they are
usually determined based on the design aesthetics of your webpage, and how it
looks best.
 |
| The whizz-kid. |
And after some whizz-kid coding, you should end up with a website that functions and looks fantastic on desktop PCs, laptops,
smartphones and tablets! Your webpage will adapt, in a very Transformer-esque
style, to each machine it’s being viewed on. It may look slightly different on
each device, but it will all be the same website... Pretty cool.
Responsive design is currently your best bet for
future-proofing your website against the constant influx of new technologies. In
a year or two, responsive design could just be the standard way of designing
websites. We’ll update you if that becomes official ;-)
Final Note: Google has gone on record and said that
responsive web design is superior to separate mobile designs and is “Google's
recommended configuration”. Need we say any more?
If you want some more details on the technical aspect of
responsive design, then let us know in the comments below! And stay tuned for
more blogs demystifying this mind-boggling topic…
Responsive Website Design
Check out our previous blog on
No comments:
Post a Comment
Got a question about what we talked about above? Or did we leave something out?
Pop your comment in the box below and hit Publish!