responsive web design
DESCRIPTION
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?TRANSCRIPT
Responsive Web Design
A new design approach: why? What is responsive web design? How to design responsive user interfaces?
Responsive Web Design
A new design approach: why?
The future of internet is mobile
A new design approach: why? 1/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? 2/5
By 2015, mobile will overtake the web
A new design approach: why? 3/5
Source: “Digital Life: Today and Tomorrow”, Neolabels, http://www.neolabels.com
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? 4/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
A new design approach: why? 5/5
What is responsive webdesign?
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? 1/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? 2/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
What is responsive web design? 3/3
How to design responsive user interfaces?
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? 1/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? 2/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
How to design responsive user interfaces? 3/3
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 websitehttp://www.higroup.com/wp-request-responsive-webdesign
Conclusion
About Human Interface Group
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
About Human Interface Group Europe’s leading usability consultancy Belgian Member of International UX Partners
See alsowww.higroup.com/news-publications/white-papers
De Regenboog 112800 Mechelen
+32 (0)15 40 01 38www.higroup.com
@higroup
Human Interface Group
Human Interface Group