Responsive Web Design Whitepaper

824 views

Published on

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.

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
824
On SlideShare
0
From Embeds
0
Number of Embeds
86
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Responsive Web Design Whitepaper

  1. 1. RESPONSIVE WEB DESIGN
  2. 2. 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
  3. 3. 03 Responsive website design
  4. 4. 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.
  5. 5. 05 A look back
  6. 6. LOGO menu menu menu menu menu LOGO menu menu menu menu menu LOGO menu menu menu menu menu A LOOK BACK RESPONSIVE WEB DESIGN 06 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
  7. 7. 07 A new era
  8. 8. COMPANY menu menu menu menu menu COMPANY COMPANY A NEW ERA RESPONSIVE WEB DESIGN 08 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.
  9. 9. 09 The future of the Internet will be mobile-first.
  10. 10. MOBILE-FIRST RESPONSIVE WEB DESIGN 10 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. 11. 11 The concept
  12. 12. THE CONCEPT RESPONSIVE WEB DESIGN 12 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 menu menu menu menu menu LOGO LOGO
  13. 13. 13 Benefits of responsive design
  14. 14. BENEFITS OF RESPONSIVE DESIGN RESPONSIVE WEB DESIGN 14 • 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. 15. 15 The technical part
  16. 16. A LOOK BACK FUNCTIONAL AND TECHNICAL SPECIFICATIONS 01 THE TECHNICAL PART RESPONSIVE WEB DESIGN 16 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. 17. 17 What is the downside?
  18. 18. WHAT IS THE DOWNSIDE? RESPONSIVE WEB DESIGN 18 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. 19. 19 User-centred design
  20. 20. USER-CENTRED DESIGN RESPONSIVE WEB DESIGN 20 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. 21. 21 A design guide
  22. 22. A DESIGN GUIDE RESPONSIVE WEB DESIGN 22 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. 23. 23 About Prototype Interactive
  24. 24. ABOUT PROTOTYPE INTERACTIVE RESPONSIVE WEB DESIGN 24 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

×