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? 1/5

 The future of internet is mobile


 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


 By 2015, mobile will overtake the web

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


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


 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


 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 design
responsive 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
 …


 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


 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
 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
 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.com

See also
www.higroup.com/news-publications/white-papers @higroup

Human Interface
Group

Human Interface
Group

Responsive web design

More Related Content

What's hot

Viewers also liked

Similar to Responsive web design

More from Human Interface Group

Responsive web design

Editor's Notes