Responsive Web Design Whitepaper

CONTENT
RESPONSIVE WEB DESIGN
Introduction ...................................................................................................................
A look back ....................................................................................................................
A new era .......................................................................................................................
Mobile-first ....................................................................................................................
The concept ...................................................................................................................
Benefits of responsive design .....................................................................................
The technical part ........................................................................................................
The downside ................................................................................................................
User-centred design ......................................................................................................
A design guide ...............................................................................................................
About Prototype Interactive .........................................................................................
03
05
07
09
11
13
15
17
19
21
23
00

RESPONSIVE WEBSITE DESIGN
RESPONSIVE WEB DESIGN 04
If you haven’t gone responsive yet then you need to. Responsive website
design has been the buzz word among web designers for a few years now, but
with the rising use of mobile technology by consumers, it is becoming the
buzz word with business owners too.
Responsive web design dynamically reacts to the size, orientation, platform
and device chosen by the user. Each element of the page, from the pictures to
the font, reconfigures to the optimum size for the screen.
At the moment, most websites are focusing on laptop, tablet and mobile
design sizes, with some even calculating in larger desktop computers.
Responsive design isn’t an easy subject to grasp and many people ask us all
the time: What is responsive web design, what is it good for and do we need
it? This whitepaper will cover the benefits of a responsive website and the
basics of a responsive web design, without going too technical.

LOGO menu menu menu menu menu
A LOOK BACK
Back at the turn of the century, designing a website was quite straightforward.
Each computer had a similar screen size and designers were transferring
print-centred designs to the Internet.
As more screen sizes began to creep onto the market, developers had to stop
thinking in pixels and start using percentage units to recalculate an element’s
proportions to optimize it for fluctuations in screen size.
Fluid layouts also became popular and designers enjoyed how columns and
elements could resize proportionally with the width of the browser. This
however didn’t work when devices got as small as mobile phones. Content
was too cramped and unreadable

COMPANY menu menu menu menu menu
COMPANY
COMPANY
A NEW ERA
Today, the size of a screen can vary from 240 pixels to 1920 pixels wide and
super-dense resolutions are gaining more and more popularity. One size fits all
is no longer a fitting excuse. What should you do with your fixed-layout web-
site?
CREATE A WEBSITE FOR EACH DEVICE
This is very impractical in the long run. If you make 3 separate websites, you
have to manage three separate websites and all that comes with it. Think about
analytics, SEO and simple changes. You would have to do this on three diﬀerent
places instead of one.
CREATE A RESPONSIVE WEBSITE
This will adapt itself to look awesome on each device and on any screen size.

09
The future of the Internet will be
mobile-first.

MOBILE-FIRST
Even though some of the more optimistic predictions for 2014 haven’t come to
fruition, businesses are certainly sitting up and noticing that the mobile-first
future is on its way.
Mobile users are turning to their mobile devices, phone and tablet, to browse
the Internet more and more over their laptops. It is only a matter of time before
the number of users that use their mobile surpasses those that use their laptop.
It is vital that businesses keep up with the changes that are happening to the
user experience on mobile. This begins with a responsive design.
5.1BILLION
out of 6.8 billion population
worldwide own a mobile phone

THE CONCEPT
The concept behind responsive web design is that when a user makes a screen
smaller, the content on the website adapts to the new size making the experi-
ence easy and enjoyable. These images demonstrate how the
www.cbd.ae website looks on a mobile, tablet and laptop.
LOGO
LOGO

13
Benefits of responsive design

BENEFITS OF RESPONSIVE DESIGN
• A consistent design on each device.
• It looks awesome.
• Good for branding as image is the same across each device.
• Improves the user interface.
• eCommerce is easier for mobile users.
• Formatting can be done once for multiple sites.
• Mobile users can have the full experience on a responsive website as
opposed to receiving selective content.
• Fewer files to store on the server than device-optimized sites.
• You don’t need to update links for your mobile website.
• SEO is recognised on all devices so results are a combination of all
devices.
“ Website traffic increased by 15-20% for our
customers after implementing responsive web design,
with lower bounce rates on mobile and
visitors coming back more frequently.
- Alexander Rauser, CEO

A LOOK BACK
FUNCTIONAL AND TECHNICAL SPECIFICATIONS 01
THE TECHNICAL PART
By this point, we understand that a responsive website can respond and adapt
to diﬀerent screens, browsers and devices. This gives the user the best possible
experience of your website on each device. But how does it all work?
Your website will need to be displayed optimally in several resolutions so the
layout will continuously need to adapt to the screen size and the device. This
involves three elements
YOU NEED TO BE FLUID
You need to start with a fluid grid layout where columns can change size to suit
the screen size. You need to make all media, such a video and images, flexible.
You want your images and video to maintain the correct level of quality no
matter what the size. The way you do this is by creating lots of ‘if’ conditions in
your code so that each layout element knows what to do in each screen size,
whether that be to resize, reposition or disappear all together.
USER INTERFACE NAVIGATION
You know when you have a good responsive design because it is not only
flexible but it reacts to other mobile-specific features too such as a touch
screen application. For example, inline links on a desktop browser can adapt
into large pressable buttons on a mobile or tablet device. You can hide features
that clutter the mobile screen and you can add more mobile-centric features
such as navigational help. Menus and sidebars resize and reposition them-
selves in a much simpler format on mobile.
SEO
With a responsive web design, there is only one URL, one website, one place
that holds all the information. Google and other search engines can find this
URL and use the link regardless of the device. This will do wonders for your SEO.

WHAT IS THE DOWNSIDE?
Currently the only downside is that responsive web design can have an impact
on performance and speed of mobile devices because of image resizing and
several diﬀerent conditions integrated in the code. However as time passes,
these little issues are being dealt with and will no longer be a problem in the
near future.

USER-CENTRED DESIGN
Most companies turn to responsive website design and only consider changing
the layout and not the context itself, however you need to seriously consider
who your users are and what they would like to do when they visit your website
on their mobile device.
This can be a diﬀicult task and, as with any new project, it takes a lot of market
research to get an idea of how you can serve the needs of your users. Think
about all the possible situations in which your user may use their mobile device
to visit your website. They may be at home on the couch, on their way to work
on the train, in bed at night or out and about with friends. How will you serve
their needs in these moments?
Remember, the user comes first. Responsive web design does not automatical-
ly mean a good contextual experience. Put yourself in their shoes and think
about what they want and how your responsive site can respond to their needs
in every single context.

A DESIGN GUIDE
The framework of how an agency should work is shifting. It is no longer a case
of doing your part in the design process and passing it on to the next person
in line. You need to work as a team to make sure that what the designer has in
mind becomes what the developer creates.
Everyone has to be involved from the beginning until the end. In the initial
meeting with a client, each person involved in the design process is in attend-
ance. This way each creative and technical mind can work together to come
up with a realistic yet innovative approach to any new project. The designers
then design and assist the developers whilst they create the grids. The deci-
sions are made as a team so each client knows they are getting the best of
many minds at work instead of just one.

23
About Prototype Interactive

ABOUT PROTOTYPE INTERACTIVE
Prototype is an Interactive Agency based in Dubai Media City specialized in
designing and developing digital solutions. Since 2010 Prototype has
continuously worked with leading brands from various industries across the
region and contributed to shaping their digital presence.
+971 (0) 4446 5789
info@prototype.ae
prototype-interactive.com
P
M
W
Prototype Interactive FZ LLC - DMC 1, 205 Dubai Media City - P.O. Box 502204

Responsive Web Design Whitepaper

More Related Content

What's hot

Viewers also liked

Similar to Responsive Web Design Whitepaper

More from Prototype Interactive

Recently uploaded

Responsive Web Design Whitepaper