responsive web design whitepaper

RESPONSIVE WEB DESIGN

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

03

Responsive website design

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.

05

A look back

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

07

A new era

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 different 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

11

The concept

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 thewww.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

15

The technical part

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 different 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.

17

What is the downside?

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 different 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.

19

User-centred design

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 difficult 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.

21

A design guide

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

[email protected]

prototype-interactive.com

P

M

W

Prototype Interactive FZ LLC - DMC 1, 205 Dubai Media City - P.O. Box 502204

responsive web design whitepaper

Technology