Responsive web design


Published on

Responsive web design (or RWD in short) is a relatively new and fast developing trend on the web. In these slides we will answer 2 questions:
1. What are the basics of responsive web design, without diving in the developer deep?
2. How will users benefit from responsive web design?

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Link naar whitepaper op onze site
  • Responsive web design

    1. 1. Responsive Web Design
    2. 2. Responsive Web Design A new design approach: why? What is responsive web design? How to design responsive user interfaces?
    3. 3. A new design approach: why?
    4. 4. A new design approach: why? 1/5 The future of internet is mobile
    5. 5. A new design approach: why? 2/5 There is an increasing amount of mobile devices with small screens  Smartphones  Tablets  “Phablets” (phone and tablet in-betweens) At the same time, screen sizes of desktops and laptops grow larger every year Screen sizes vary from 240 to 1920 pixels wide
    6. 6. A new design approach: why? 3/5 By 2015, mobile will overtake the web Source: “Digital Life: Today and Tomorrow”, Neolabels,
    7. 7. A new design approach: why? 4/5 Today, users consult websites:  Through more and more devices  With more and more input types  Using different types of browsers  On more and more screen sizes  In more and more resolutions  „One-size fits all‟ solutions do no longer meet these requirements
    8. 8. A new design approach: why? 5/5 What can you do?  Doing nothing is not an option: Visitors will muddle and curse while browsing your desktop-built website on their mobile device  Just build a second, mobile version is not efficient:  Twice as expensive  For which platforms will you build this version?  And what about tablets?  A new design approach is needed: Responsive Web Design
    9. 9. What is responsive webdesign?
    10. 10. What is responsive web design? 1/3 One website for all screens, devices, browsers… Website flawlessly adapts to the context through:  Fluid grid layout: column widths adapt to available screen real estate  Flexible media content  Flexible layout:  Elements can be added/omitted  Elements can be resized  Elements can be repositioned
    11. 11. What is responsive web design? 2/3 Advantages:  The website‟s layout is always adapted to the properties and the constraints of the device and its browser  Images maintain the same quality in no matter what screen size  There is one unique URL:  You will no longer end up on a mobile website using your laptop or vice versa  The different versions of the site will not rank as different sites in Google‟s search results  positive impact on SEO
    12. 12. What is responsive web design? 3/3 Limitations:  Not all mobile browsers support the media queries used for image resizing  Responsive web design can have an impact on speed and performance of mobile devices
    13. 13. How to designresponsive user interfaces?
    14. 14. How to design responsive user interfaces? 1/3 Think „mobile first‟:  Use the progressive enhance method:  Start designing for a small screen; it will force you to think about the essence of your concept  Gradually add more elements as your screen size increases  Take into account conventions for mobile devices  Simple navigation  Focused content  Use rows where you would use columns on a larger screen  …
    15. 15. How to design responsive user interfaces? 2/3 Don‟t forget your user  Conventions are guidelines, no set in stone rules  To create a great user experience, you have to know the specific use context for your website  Mobile phones are often used to consult specific, on-the-go information  However, people also use their mobile devices to read information-rich websites from the comfort of their own couch  User research is elementary to create an optimal user experience
    16. 16. How to design responsive user interfaces? 3/3 Work closely together with the development team  Creating a responsive web site is a thoughtful process – design and development should therefore be done in several subsequent iterations  It is easier to actually see how pages behave on different screen sizes than to mimic these changes in your design
    17. 17. Conclusion
    18. 18. Conclusion There is an ever increasing amount of devices, browser, screen sizes and resolutions Responsive Web Design gives a solution to these new challenges User research remains crucial in the design process More information? Download the full version of our white paper on responsive design from our website
    19. 19. About Human Interface Group
    20. 20. About Human Interface Group Europe‟s leading usability consultancy Belgian Member of International UX Partners The experts to optimize the user experience of your technological solutions Our expertise  Designing user interfaces  Developing user documentation  Training your customers and your employees
    21. 21. De Regenboog 11 2800 Mechelen +32 (0)15 40 01 38 www.higroup.comSee @higroup Human Interface Group Human Interface Group