This document discusses adapting websites to responsive web design. It defines responsive design as creating interfaces that react quickly and positively to user conditions. It notes that people access websites in many ways, so responsive design aims to have one code base that works across devices rather than separate mobile sites. The document outlines four goals for responsive design: content parity across devices, speed optimization, future-proofing the design, and accessibility. It provides examples and tips for achieving each goal, such as conducting content audits, optimizing images, caching, and designing first for touch interfaces. The results of implementing responsive design on one website included increased mobile traffic and conversions as well as reduced exit rates.

1. ADAPTING TO A
RESPONSIVE
WEB DESIGN

2. HELLO
I’m Matt
@duckymatt
!
!
!
!
!
!

3. @cyberduck_uk cyber-duck.co.uk

4. HOW DO WE DEFINE
RESPONSIVE?

5. To react quickly
and positively.

6. Responsive web design is a
design approach that aims to
create interfaces that react
quickly and positively to the
user’s conditions.

7. PEOPLE WILL ACCESS OUR
WEBSITES IN WAYS WE HADN’T
EVEN CONSIDERED YET
Image Copyright: Walt Disney Pictures & Tim Burton Pictures

8. THE PREVIOUS STATE(S) OF
OUR OWN WEBSITE
“DESKTOP” SITE
(2011)
“TABLET” SITE
(LATER 2011)
*Not to scale :)
“MOBILE” SITE
(2012)

9. OUR SEPARATE MOBILE WEBSITES:
A STOP-GAP STRATEGY

10. SO WHY GO
RESPONSIVE?

11. 3 FACTORS
Image Copyright: L.A. Films & Home Box Office (HBO)

12. MULTIPLE CODE BASES1
CONTENT STRATEGY2
KNOWN UNKNOWNS3

14. SETTING 4 GOALS FOR A
RESPONSIVE DESIGN
Image Copyright: Chartoff-Winkler Productions & United Artists

15. CONTENT
PARITY
Credit: http://wtfmobileweb.com/
THE SAME CONTENT
SHOULD BE AVAILABLE
ON ALL PLATFORMS
1

16. SPEED
MATTERS
BECAUSE PERFORMANCE
AFFECTS EVERYONE
2
Image Copyright: Universal Pictures

17. FUTURE FRIENDLY
See: http://futurefriend.ly/
CUT DOWN ON MAINTENANCE AND
SUPPORT KNOWN UNKNOWNS
3
Image Copyright: Universal TV

18. ACCESSIBILITY
STYLES, BACKGROUNDS AND JAVASCRIPT
ARE PROGRESSIVE ENHANCEMENTS
4
Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/

19. CONTENT PARITY
1

20. ASSUMPTIONS
1
Image Copyright: BBC

21. You don't get to decide which
device people use to access
your website.
KAREN MCGRANE
http://alistapart.com/article/your-content-now-mobile
Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/

22. Credit: http://xkcd.com/773/
1

23. 1

24. RESEARCHING
CONTENT STRATEGY
SPEAKING TO EXISTING CUSTOMERS
GOOGLE ANALYTICS
CRAZYEGG
LEAD FORENSICS
1
Image Copyright: Warner Bros.

25. OUR CONTENT DEFINES
THE LAYOUTS WE NEED!
NOT THE OTHER WAY AROUND
1

26. SPEED MATTERS
2

27. 2
moto.oakley.com

28. If you were data roaming on an
iPhone, at $9 per Mb data
roaming, that web page would
cost me $785 to look at on my
iPhone!
ANDREW CLARKE
http://alistapart.com/article/dao/
Photo credit: Jeffrey Zeldman: http://www.flickr.com/photos/zeldman/12621077243
http://dandelion-burdock.com/articles/view/the-weight-of-the-web

29. DOES RESPONSIVE =
POOR PERFORMANCE?
Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/
2

30. To react quickly
and positively.
2

31. IT’S EASY TO CONFUSE
IMPLEMENTATION WITH
TECHNIQUE
2
Image Copyright: Metro-Goldwyn-Mayer (MGM)

32. MAKING PERFORMANCE A PRIORITY
!
SETTING A PERFORMANCE “BUDGET”
2
timkadlec.com/2013/01/setting-a-performance-budget/
Image Copyright: Twentieth Century Fox Film Corporation

33. ONLY LOADING
WHAT WE NEED
WHEN WE NEED IT.
2

34. To load the Facebook, Twitter and Google social
media buttons for a total of 19 requests takes
246.7 KB in bandwidth.
http://zurb.com/article/883/small-painful-buttons-why-social-media-bu
2

35. JAVASCRIPT
2
http://requirejs.org/

36. IMAGES
2
27 KB 266 KB
USING THE RIGHT IMAGE FOR THE RIGHT TASK

37. CACHING
2
SERVING FILES FASTER
http://www.cloudflare.com/ https://www.varnish-cache.org/

38. 2

39. FUTURE
FRIENDLINESS
3

40. THE WEB DOESN’T HAVE
A FIXED WIDTH
3

41. We should embrace the fact that
the web doesn’t have the same
constraints [as the printed page]
and design for this flexibility.
JOHN ALLSOPP
http://alistapart.com/article/dao/
Photo credit: TEDxNSW: http://www.flickr.com/photos/42645924@N02/3933255654/
3

42. LAYOUT
AND
FLOW
3

43. LAYOUTS BASED ON CONTENT
RATHER THAN DEVICE
3

44. RESPONSIVE DESIGN WORKFLOW
3

45. SKETCH
3
Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures

46. PROTOTYPE
3
Copyright: Paramount Pictures & Marvel Enterprises

47. PROTOTYPECREATE PATTERN LIBRARIES
http://boagworld.com/design/pattern-library/
3
Copyright: Universal Pictures & Alphaville Films

48. ENHANCE FOR CONTEXT
3

49. ANIMATION AS AN
ENHANCEMENT
3
Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney

50. ACCESSIBILITY
4

51. 5 QUICK WINS FOR
ACCESSIBILITY
4
Image Copyright: Paramount Pictures & Lucasfilm

52. 1. MAKE THE PURPOSE OF
ALL LINKS AS CLEAR AND
DESCRIPTIVE AS POSSIBLE
IF YOUR LINKS SAY “CLICK HERE”
YOU’RE DOING IT WRONG
4

53. 2. MAKE URLS HUMAN
READABLE AND PERMANENT
WHERE POSSIBLE
HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP?
ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST
4

54. 3. DESIGN FOR TOUCH BY
DEFAULT
4
DOES YOUR DESIGN PASS THE
“RULE OF THUMB” TEST?
!
ARE YOU RELYING ON HOVER?

55. 4. USE APPROPRIATE INPUT
TYPES AND ATTRIBUTES ON
FORMS
4

56. 5. PROOF DESIGNS IN GREYSCALE
TO CHECK COLOUR CONTRAST
4
ALSO USE COLOUR BLINDNESS SIMULATORS
AND COLOUR CONTRAST CHECK TOOLS
Related: http://24ways.org/2012/colour-accessibility/

57. THE RESULTS

58. SINCE LAUNCH:
200%
INCREASE IN
MOBILE
TRAFFIC
43%
INCREASE IN
CONVERSION
RATE
-4000%
REDUCTION IN
HOMEPAGE EXIT
RATE ON MOBILE

59. MUCH TO LEARN THERE IS
Copyright: Lucasfilm

60. THANK YOU
@duckymatt
@cyberduck_uk
Copyright: Studio 37 & La Petite Reine & La Classe Américaine
& JD Prod & France 3 Cinéma & Jouror Productions & uFilm