We created this whitepaper to explain how we tackled our largest and most high profile responsive design challenge yet - The new site for Macdonald Hotels.

1. WHITE
PAPER
Design knowledge
Who will get the most from this. Agencies, designers, developpers
How to design a
responsive website
Our design process for creating responsive websites
To build a mobile site or not to build a mobile site; this is a question at the
forefront of many a discussion. There is, however, another option: responsive web
design. When, why, and how should you go about designing a responsive website?
Published December 2011 with
Equator
144 Elliot Street, Glasgow G3 8EX ISO 9001 www.eqtr.com @equatoragency
RE I R
REGISTERED FIRM
© Equator, Reg No. 198

2. WHITE
PAPER
How to design a responsive website Key points
With mobile internet users set to surpass desktop internet users in the US Understand and
by 2015, with tablets becoming more popular, and even with TV internet clearly define your
usage increasing, it’s important for companies to provide a great user reasons for designing
experience for all their visitors no matter what device they’re on. How and building a
does responsive design help us do this? Well, by allowing us to create responsive site.
one website solution that is flexible for different screen widths. It uses
flexible grids and clever styles to present the same content to a user, but Carefully research
displays that content in a format that suits the width of the device. Check your requirements.
out this beginner’s guide to responsive web design for a more detailed
Think about your
introduction.
grid structure and
components on
different layouts.
Test throughout the
process.
Resources
UX Booth
Mobile Internet Users
to Surpass Number
of Wireline Users by
2015, Says IDC
Why should you design a responsive site? Beginner’s guide to
There are many options to consider when a client asks for a mobile responsive web design
solution for their website, and the suitability of these options depend on
Building a responsive
the business requirements and budget; it’s also important to consider any
web site
existing solutions or sites they already have. Creating a responsive website
isn’t a complete mobile strategy, and won’t answer every brief, but,
especially if you are starting a website from scratch, you should consider
it as a very serious option.
So why would you decide to create a website this way?
You’re starting from scratch
Developing a whole new website or web application is a challenging
process. You won’t know if the site will be successful until it’s live and in
the world, so creating a separate mobile site or a mobile app in tandem
1 How to design a responsive website

3. WHITE
PAPER
How to design a responsive website
with a website project could be a big waste time and money. It’s more
efficient to get your new site performing well before you create an “Solid responsive
additional mobile site or application. solutions require
additional design
You want to keep costs low
and front-end
Solid responsive solutions require additional design and front-
development time,
end development time, but doesn’t too heavily impact application
development. It could take around 20-30 per cent longer to develop a but doesn’t too
responsive site, but it’s still faster than creating an additional mobile heavily impact
site or app. Developing a site this way also means that you only need to
application
develop, manage, and maintain the one site, so it can reduce these costs
too. development”
You want it to work even when new devices are released
A mobile site needs to be able to recognize the user’s device; when new
devices are released, the site needs to be updated. As the responsive
solution only recognizes the browser’s width, no new updates would need
to be made. This means it’s much more future-proof and scalable.
The process
Let’s talk through the process of creating a responsive website using a
hotel website example. This September, we released the new Macdonald
Hotels website. Macdonald Hotels are a UK hotel chain with 47 hotels and
resorts across the UK and Spain. We created the new site for them that
included a new site structure, extensive hotel content, and a new booking
engine. Here are the steps we went through and also some considerations
you should think about when designing a responsive website.
These are the key steps:
»» Research/scoping: Understanding the additional requirements for a
responsive site
»» Wireframing: Grid structures and layouts for the site considering
different screen widths
»» Look and feel: Style considerations
»» Building the site: HTML & CSS issues
Research and scoping
Research is always a very important stage in the design process so it’s
2 How to design a responsive website

4. WHITE
PAPER
How to design a responsive website
worth putting a little extra consideration into the people who will be using
different devices. Understanding how these different users may want to “The logic behind
use the website on a variety of devices will help you to decide what the how the styles
priorities are on the project.
should change
»» What different goals will a user have on different devices? can be a bit hard
Questions like this are starting to become more redundant. In the past to define and the
we’ve assumed that mobile users have been task-driven, e.g. I want
to get the hotel’s address; I want to book something quickly. But now
magic of it will
people on any device are just as likely to leisurely browse the Internet really come out
as they are to need to complete a task quickly. It is worth considering in the build of the
though, as thinking about users’ goals in this way could help you
site”
prioritize content for the site, irrelevant of what device the visitor is
using.
»» What technical considerations do we need to make for functionality
and content?
Think about how any complicated functionality may work on
different devices. Although a responsive site will only change the CSS
depending on the width if there are complicated elements that rely
heavily on JavaScript, they may not translate well on a smaller device
and it could be worth hiding these.
Wireframing
The logic behind how the styles should change can be a bit hard to
define and the magic of it will really come out in the build of the site, but
we need a way to start defining the different width stages of the layout.
We choose to look at 3 screen widths, a desktop, iPad and iPhone. We
felt these covered what our requirements were, but for your project you
should consider what widths are important for you to think about—you
may even need to look at bigger screen widths for TV internet usage.
At this point of the project you should already the key templates that
you’ll need to wireframe, but you shouldn’t need wireframes for all these
templates in the different widths. The main goal here is to help define the
3 How to design a responsive website

5. WHITE
PAPER
How to design a responsive website
logic behind how the CSS will change the look of the page, so focus on
pages that have very different layouts. For us we looked at the home page, “The logic behind
all the booking process pages, the hotel pages, offer pages as well as how the styles
some generic layouts. Each of these covered our different column layouts,
should change
content types and key functionality.
can be a bit hard
»» Getting started to define and the
First, define the grid structure for each key width. We created 3 pages
for the screen widths 1024px (Desktop), 768px (iPad portrait), 320px
magic of it will
(iPhone portrait), then we needed to define a grid structure for each of really come out
these widths. in the build of the
site”
A very simple grid structure with equal column widths on each layout
made it easier for us to plan for components wrapping as the width
changed.
»» Creating the master template
As you create each wireframe you’ll need to think about the columns
and how the components within these will adapt as the page width
shrinks&mdashe.g. what happens When you have less space? If you
have four columns of content? When you change to a three-column
width? There should always be ongoing communication between the
designer and the front end developer to answer any issues about what
you can do with components visually and in the CSS.
»» Starting on the home page
You may feel like there is another page that has a higher importance
than the home page, but this was where we started. Here is our
finished original wireframe. You can see the mobile page length is
quite a bit larger due to the content wrapping over one column.
4 How to design a responsive website

6. WHITE
PAPER
How to design a responsive website
»» Main navigation
We created a simple horizontal top navigation that would have a fluid
width to change with the screen size. As the screen reduced the menu
items would get closer together, then wrap on to the next line when
necessary. This works for desktop, laptop and tablet widths, but going
further down we wanted to create a menu that would suit the devices
better. This gave us the menu spilt over two columns for the mobile
device.
5 How to design a responsive website

7. WHITE
PAPER
How to design a responsive website
Other header components are aligned right and would just shift along
as the page width reduced. “Remember when
you are styling the
Remember when you are styling the navigation to think how it will
navigation to think
work as the screen sizes changes. Certain styles, such as using tabs,
may be difficult to get to work and look good as the screen width how it will work as
reduces. the screen sizes
»» Footer
changes. Certain
Our footer is pretty simple, just think about what content you styles, such as
want and how it will change as the width changes and the columns using tabs, may
reduce—this could be as simple as components wrapping underneath
be difficult to get
each other.
to work and look
good as the screen
width reduces”
»» Other components
Our simple grid structure made it easier to plan out our components.
On the home page we used a horizontal scroller that had four
components that would scroll across on a click. Our tablet layout let
us keep this component but just amend it to only show three items,
then on our phone width we removed the scrolling functionality
completely and instead displayed each item vertically. Each
component you design may require different behaviours, so think
about how the visitor will want to use the component on different
screen sizes. Phone users are more comfortable scrolling down a page
than using small buttons to interact with the page.
6 How to design a responsive website

8. WHITE
PAPER
How to design a responsive website
»» Test it straight away
As soon as you have created “Adding the
your first wireframe test it on the tablet and mobile
relevant device straight away.
versions to your
It’s easy to get the image on a
simple web page and take a look user testing
at how it looks and feels to scroll process will give
down. This will let you know you a lot of useful
early on if your wireframe is
feedback.”
working. Testing in this way gave
us clues really early on what was
and wasn’t working. If you look
at this wireframe you should
quickly see our first issue.
As the user navigated through the
site they would only see these first
two page elements - the navigation
and the search panel. This means
that the user may be unsure if the
page has changed, as well as where
they actually are on the site. This
was solved simply by putting these
items in show/hide panels—letting
the user get into the content much faster.
Adding the tablet and mobile versions to your user testing process will
give you a lot of useful feedback too. Now that your wireframes are
created, tested, amended and approved it’s time to make them look good
for all your screen widths.
Look and feel visuals
It isn’t necessary to create visuals for every wireframe. The main objective
is to cover all the styles that will be required to create the HTML and CSS.
There will be a little bit of a crossover for wireframes and visuals, some
styles that will be required for the mobile where there wasn’t a need for
an initial wireframe.
»» Styling the page: Think about keeping your styles simpler for your
mobile version—what’s great about CSS3 is that you don’t need lots of
images to get great styled effects, but these still take a bit of time to
load.
»» Thinking about font: Make sure your font sizes are going to be
7 How to design a responsive website

9. WHITE
PAPER
How to design a responsive website
readable on each device. They’ll have
to be much larger on the mobile
device to ensure readability.
Also, be prepared for your visuals to
change when it gets translated into
the build of the site. There always
should still be balance between
what looks good on a flat visual
and what will work when the site is
being developed. The final site isn’t
too far away from our look and feel
visuals, take a look here and you can
compare with the live site.
8 How to design a responsive website

10. WHITE
PAPER
How to design a responsive website
Building the site
Building the HTML and CSS is a challenge all of its own, so I won’t discuss
this is much detail, but here are a few things to think about.
»» The impact of image sizes
The site will need to load in the full size images even if the CSS scales
them down, so try to keep image sizes as low as possible. There can
be some nifty JavaScript tricks though to make the site run smoother.
On this site we initially loaded in the smallest image size, and then
used JavaScript to decide if a larger image was then needed
»» Use advanced CSS
It’s important to get the client behind the idea of using advanced CSS
styles, allowing the site styles to degrade as the browser capability
does. This lets you keep site loading times low.
»» Constant communication is required
The project will always go smoother if the team speak to each other,
so from both designer and developer it’s good to discuss problems
and solutions as soon as they turn up.
It’s worth taking a look at our front end developer Jamie Boyd’s take
on the front end development of the Macdonald Hotels website for
responsive design.
So what does all this mean?
If you are thinking about convincing your client to have their new site
designed and developed in a responsive way, firstly you should consider
if it really is the right solution for them, then you’ll need to be able to
persuade them of the benefits and communicate that it will add more Written by
time to the project. But, I do believe that this is how more sites will be
developed in the future.
We’ve all learned so much on this project about developing a responsive
website. We were lucky to have a client who was as keen as us to create
something new and innovative and from that we’ve created a site we’re all
proud of.
Elaine McVicar
Assistant Creative
Director
Equator
9 How to design a responsive website