We recently had a relaunch of the Zeroseven site and one of the
things we explored and decided upon for the relaunch of our new
site was to build it responsively. We dabbled with the idea of
responsive at the very start of the planning process but what
cemented the idea was an inspired talk about the subject by Andy
Clarke at the start of the year.
For those of you that don't know about responsive design, let me
give you some background...
In the beginning there were only monitors and web designers
started making website for the 800 x 600 monitor. They wanted to
emulate print as much as possible and the thought of being within
the constraints of a printed page, because that's what they knew,
so a lot of sites were fixed width. We also tried to cram
everything above the fold* and that was no mean feat on an 800 x
600 monitor.
So over the next few years, monitors slowly (in the grand scheme
of things) got bigger, first to 1024 x 768 and then to 1280 x 1024.
Designers got a lot more space to play with but we still
constrained everything to a set width. It wasn't only designers who
wanted this control, clients did as well because they in turn
wanted to have an 'online brochure', with the same connotations as
a printed brochure, but on the screen. In fact, sites were being
sold by web design firms as 'brochureware', further cementing these
connotations for designers and their clients alike.
Then something unexpected happened, someone changed the
rules….
In early 2007, the iPhone was released. It had the internet and
for the first time you could browse the web on the go in a way that
was actually easy. Then shortly after the iPod touch came out and
not only did we have a smaller screen size to think about, we also
had a landscape layout on both devices.
We thought…hang on, it's really hard to read some of the
websites that we're building for desktop on the smaller screen of
the mobile, so we started to see mobile versions of websites. At
the time, when the smart phone market was fresh, it didn't worry us
too much if the small percentage of users with smart phones had
trouble viewing our website content.
However mid 2010, something big happened… Apple released the
iPad and it started a revolution.
It didn't start a revolution because websites had to be built to
an iPad size now, because viewers (generally) could view desktop
websites on the iPad without too much trouble. The reason it was a
revolution is due to the success of the iPad and iPhone, other
manufacturers started to make other web capable devices and so, we
started to have a plethora of different screen sizes and operating
systems to contend with. In addition to all these device sizes,
monitor sizes didn't suddenly stop increasing, they go bigger and
bigger as well.
In 2011 for the first time smart phone shipments worldwide
overtook the shipment of PCs ,488 million to 415 million, and we
can no longer kid ourselves into thinking that the web has the same
constraints as a printed page and we simply have to adapt.
So, from the range of screen sizes available, it became apparent
that for those that wanted their site to be compatible across a
range of devices, it was no longer viable to build for these
different sizes. It would take too much time and money, you could
not keep up the development pace compared to what was being release
onto the market.
Because we can't keep up with the different sizes of screens and
devices that are coming into the market today, we need to think
about a new idea, the idea that the web has no edges and that
websites should work well on any device, no matter the screen
size.
...and this is the premise of responsive design.
What's so great about responsive?
1. It's more than just a design trend - it's a new design
solution
2. It solves the problem of the ever increasing number of
different device sizes
3. Content adapts to give the best user experience (eg. you might
want reduced content on the mobile for easier reading)
But don't panic…
We build perfectly good websites and applications that aren't
responsive as sometimes there's no need (not every application
lends itself to this) and it does require more development time and
cost, but this is a new way of design thinking that really makes
sense and also helps explain what we did with the Zeroseven
website.
So, let's look at some example to help you visually understand
the concept of responsive..
Food Sense Website
This site has a responsive layout. Generally we set a range of
'sizes', called 'break points' where the layout changes and content
reorganises itself into a slightly different structure. This is
generally three break points but it could theoretically be as many
as you'd like. In between these break points, the content is fluid,
it adapts to the width of the screen.
Take this Food Sense website example:
Desktop - This has a two column layout with the
navigation on the left
Tablet - This has a one column layout with the navigation
at the top
Mobile - This has a one column layout with the navigation
at the top with no icons and the logo centred
Boston Globe website
In late 2011 the first major commercial responsive website was
launched, and that was the Boston Globe. They went through a long
redesign process where they looked at the type of content they had
and adapted this to different screen sizes. By looking at their
major break points, we can see the following:
Desktop - This has a three column layout with an open
navigation at the top
Tablet - This has a two column layout where they close
the top navigation and have a search box next to it
Mobile - This has a one column layout with a closed menu
navigation at the top and a closed search box - making it easier to
read and scroll through articles that are also at a bigger size for
reading on screen.
And so, now that you know a little bit of background about
responsive design, have a little bit of a play with the new
Zeroseven responsive website and see how it all works.
*The fold: The visible area on screen before having to scroll
down the page. A term that comes from print, when newspapers were
folded for sale and the most important content was 'above the
fold'.
References:
Andy Clarke // Stuff and
Nonsense Blog // Hard Boiled Web Design
book
Ethan Marcotte // Jason Santa Maria // A List Apart
Canalysis Data // Smart
Phones vs PCs statistics