This document provides an overview of responsive web design. It begins by defining responsive web design as web design that provides an optimal experience across devices using a flexible grid, conditional images/media, and media queries. It distinguishes between adaptive and responsive design. The document then discusses the growing expectation for seamless content access across devices. It lists the basic ingredients of responsive design as a flexible grid, conditional images/media, and media queries. It also discusses advanced elements, touch input, and server-side conditionals. The document provides resources for learning about wireframes, grids, images, patterns, typography, and performance optimization for responsive design.

2. Serge Hufkens
UX designer

3. “Big things…
have small beginnings”
© Prometheus, Ridley Scott

4. Definition
Responsive Web Design (RWD)
is web design in which a site is crafted
to provide an optimal user experience
across all devices (everything with a
screen)
hat tip to wikipedia

6. Let there be no mistake
Adaptive vs Responsive web design
ADAPTIVE
THIS IS
RESPONSIVE
Hat tip to Aaron Gustafson & Brad Frost

7. “Why?”
© 2001: A Space Odyssey, Stanley Kubrick & Arthur C. Clarke

8. © NFL Network

9. Conclusion
• There’s a growing mainstream expectation
that you can simply get
all your content from any device.
• We expect content to flow seamlessly,
follow us throughout the day.

10. Let’s tackle that with
some philosophy!

11. © Enter the Dragon, Bruce Lee, Robert Clouse

12. and there’s even more…

13. Wroblewski’s Theorem

14. “Anything that can be connected
to the internet, will be.”

17. fact
RWD is hard

18. © Frank Zappa

19. Open your mind
• Everything has changed and
continues to do so, fast
• Accept it and move on
• Loose the myths
• Get some new skills
• Make mistakes
• Time will tell
• Be proud to be a part of it

20. BECOMING RESPONSIVE

21. 3 basic ingredients
© Eén, Dagelijkse kost

22. • A flexible grid
– The design has fluid layout elements that
change on browser size
• Conditional images & other media
– The design uses one or more techniques to
scale images and media so that the design
performs well across devices
• Media queries
– Conditional code that changes items on a
page based on device detection or browser
width

23. Viewport, media queries and
breakpoints

24. © Andy Clarke

25. 3 advanced
ingredients
© Culy.nl, Sergio Herman

26. • Advanced elements
– A basic fluid grid is the priority; but to be fully
responsive we must often cover slideshows,
tables, tabs, multi-column type, custom
widgets, forms, and more.
• Touch input
– Touch input is a critical development
component as we move away from a mouse-
first model of human-computer interaction
• RESS and server-side conditionals
– Heavy lifting for user agent detection and
conditional media deployment is done by the
server, not the device.

27. THINGS TO GET IT ON

28. Wireframes?
full wireframes for each breakpoint
Pros: Cons
• most thorough method • takes the longest
• no page element left • it’s static!
unexplored
• with a slow-decision
• may be the best solution
for retrofitting because it group, prepare for a long
provides the most detail process

29. Wireframes?
responsive prototypes
Pros: Cons
• gets specific about • requires someone on the
repositioning and team have front-end
content without skills
promising every detail • may not prevent the
• one asset per template need for more detailed
instead of three or four wireframes

31. Flexible grids
grids, grids everywhere…
• Play around with the many grid systems
online to get a good feel what they do…
• Examples…

32. http://lessframework.com/

33. http://foundation.zurb.com/

34. http://goldengridsystem.com/

35. Conditional images
Take a look at this to get started
http://adaptive-images.com/

36. About design
Split it
Atmosphere Layout

37. Design your atmosphere
Styletiles, (html) style guides, …
http://styletil.es/ http://www.bbc.co.uk/guidelines/gel/

38. Responsive design patterns
Lot’s of examples available
• provide effective examples at the
beginning of a project so that you’re not
rethinking the wheel.

39. http://bradfrost.github.com/this-is-responsive/

40. http://www.lukew.com/ff/entry.asp?1514

41. http://jasonweaver.name/lab/offcanvas/

42. Responsive typography
Don’t neglect it, it’s your content!
• “Setting web type in Photoshop is a waste
of time” — Andy Clarke
• Test on real devices
(don’t scale your browser)
• Be careful with line lengths
(keep it readable)

43. http://informationarchitects.net/blog/responsive-typography-the-basics/

44. http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

45. Performance is also by design
Issues for RWD
• Over downloading
– Download & hide, download & shrink, excess
DOM
• Poor networks
– High latency, variable band width, packet loss

46. Issue #1
The average weight of a web page today?
1 MB
flash
HTM
CSS
other
images javascript
L
82%
Source: http://httparchive.org/

47. Issue #2
How many requests requires the average website?
85
Cable modem Cell network
0.4 sec 4.2 sec
10 x slower
Source: Guy Podjarny & HTTP Achive

48. So optimize!
By doing following
• Reduce asset size
– HTML/CSS compression, image compression, try
to avoid images, minification, avoid bulky
frameworks
• Reduce requests
– Browser cache, concatenate JS & CSS,
localStorage, data:URI, conditional loading
• Speed-up page render
– Avoid DOM reflows & repaints, defer loading of
javascript, lazy load javascript, touch beats on
click, …

49. © Brad Frost

50. Feel like reading?

51. Thanks!
@sjesch