• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive web design
 

Responsive web design

on

  • 1,016 views

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

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?

Statistics

Views

Total Views
1,016
Views on SlideShare
1,015
Embed Views
1

Actions

Likes
2
Downloads
15
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Link naar whitepaper op onze site

Responsive web design Responsive web design Presentation Transcript

  • Responsive Web Design
  • Responsive Web Design A new design approach: why? What is responsive web design? How to design responsive user interfaces?
  • A new design approach: why?
  • A new design approach: why? 1/5 The future of internet is mobile
  • 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
  • A new design approach: why? 3/5 By 2015, mobile will overtake the web Source: “Digital Life: Today and Tomorrow”, Neolabels, http://www.neolabels.com
  • 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
  • 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
  • What is responsive webdesign?
  • 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
  • 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
  • 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
  • How to designresponsive user interfaces?
  • 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  …
  • 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
  • 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
  • Conclusion
  • 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 http://www.higroup.com/wp-request-responsive-webdesign
  • About Human Interface Group
  • 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
  • info@higroup.com De Regenboog 11 2800 Mechelen +32 (0)15 40 01 38 www.higroup.comSee alsowww.higroup.com/news-publications/white-papers @higroup Human Interface Group Human Interface Group