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?

1. Responsive Web Design

2. Responsive Web Design
 A new design approach: why?
 What is responsive web design?
 How to design responsive user interfaces?

3. A new design approach: why?

4. A new design approach: why? 1/5
 The future of internet is mobile

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

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. 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. What is responsive webdesign?

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. 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. 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. How to design
responsive user interfaces?

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

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
http://www.higroup.com/wp-request-responsive-webdesign

19. About Human Interface Group

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