A quick introduction to responsive web design by Monkeyshot

1. Responsive Web Design
Quick Start Guide

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. Why go responsive?
“We do responsive web design, but we don’t do it
for the sake of being trendy. We do it because we
believe it’s the way websites should be made.
This is an opportunity for us to finally embrace
the dynamic medium we build for. The web is not
fixed width.”
- Ben Callahan
http://seesparkbox.com/foundry/you_say_responsive_i_say_adaptive

18. fact
RWD is hard

19. © Frank Zappa

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

21. BECOMING RESPONSIVE

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

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

24. Viewport, media queries and
breakpoints

25. © Andy Clarke

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

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

28. THINGS TO GET IT ON

29. 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 group, prepare for a
because it provides the long process
most detail

30. Wireframes?
responsive prototypes
Pros: Cons
• gets specific about • requires someone on
repositioning and the 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

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

33. http://lessframework.com/

34. http://foundation.zurb.com/

35. http://goldengridsystem.com/

36. http://goldengridsystem.com/

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

38. About design
Split it
Atmosphere Layout

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

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

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

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

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

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

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

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

47. http://typecast.com/

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

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

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

51. 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, …

52. Something about our tools
“The framework for what a page is has changed
considerably even in the past few years, though
our applications for designing those frameworks
are still stuck in the web of yore, and largely
dictated by their use for print design.”
- Jason Santa Maria

54. © Brad Frost

55. Feel like reading?

56. Thanks!
@sjesch

57. Credit where credit’s due
The true heroes of this presentation…
Andy Clarke
Luke Wroblewski
Jeremy Keith
Josh Clark
Ethan Marcotte
Brad Frost
Jason Santa Maria
Dave Olsen & Doug Gapinski
Tim Kadlec
Everybody I forgot…