Slides from my talk on 11 September 2014 at Figaro Digital's Mobile Seminar on the principles of responsive web design. #FigDigMobile

1. HELLO I’m Matt
@duckymatt
Figaro Digital
!
!
!
!
!

2. @cyberduck_uk cyber-duck.co.uk

3. ADAPTING TO A
RESPONSIVE
WEB DESIGN

4. HOW DO WE DEFINE
RESPONSIVE?

5. To react quickly
and positively.
http://goo.gl/hMFzFm

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

7. Image Copyright: Michael White Productions & National Film Trustee
& Python (Monty) Pictures
ARE YOU BUILDING A
BARRIER TO YOUR USERS?

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

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

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

11. SO WHY GO
RESPONSIVE?

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

13. 1 MULTIPLE CODE BASES
2 CONTENT STRATEGY
3 KNOWN UNKNOWNS

16. 4 PRINCIPLES FOR
RESPONSIVE DESIGN
Image Copyright: Warner Bros. & The Guber-Peters Company & PolyGram Filmed Entertainment

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

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

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

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

21. CONTENT PARITY
1

22. AVOID
ASSUMPTIONS
1
Image Copyright: BBC

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

24. 1

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

26. 1

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

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

29. 1
MOBILE FIRST
CONTENT STRATEGY !
!

30. SPEED MATTERS
2

31. 71% OF PEOPLE EXPECT WEBSITES
TO LOAD AS QUICKLY (OR FASTER)
ON THEIR MOBILE PHONE
2
See: http://e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf

32. BRAD FROST
It’s time for us to treat
performance as an essential
design feature, not just as a
technical best practice.
Photo credit: John Davey: http://www.flickr.com/photos/johndavey/8891059281/
Source: http://bradfrostweb.com/blog/post/performance-as-design/
2

33. PERFORMANCE AT THE HEART
OF ALL DESIGN DECISIONS
2
Copyright: Paramount Pictures,
Robert Stigwood Organisation,
Allan Car Production

34. SO,
TO ENHANCE PERFORMANCE WE…
2

35. 2 timkadlec.Image Copyright: Twentieth Century Fox Film Corporation com/2013/01/setting-a-performance-budget/
SET PERFORMANCE BUDGETS
!

36. Photo credit: Don Shall: http://www.flickr.com/photos/donshall/3817115551/
2
CUT DOWN ON FRAMEWORK BLOAT

37. …AND INSTEAD CREATED OUR OWN
MINI-FRAMEWORK
http://cyber-duck.github.io/hoisin.scss/
2

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

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

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

41. IMAGES 2
COMPRESSION
http://imageoptim.com/ https://tinypng.com/

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

43. 2

44. FUTURE
FRIENDLINESS
3

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

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

47. LAYOUT
AND
FLOW
3

48. LAYOUTS BASED ON CONTENT
RATHER THAN DEVICE
3

49. RESPONSIVE DESIGN WORKFLOW
3

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

51. PROTOTYPE
3
Copyright: Paramount Pictures & Marvel Enterprises

52. USE STYLE TILES
3
http://styletil.es/
Copyright: Sandollar Productions & Touchstone Pictures

53. CREAPTER POATTTOERTNY LIPBREARIES
3
http://boagworld.com/design/pattern-library/
Copyright: Universal Pictures & Alphaville Films

54. TEST, TEST AND TEST SOME MORE
Copyright: The Ladd Company & Shaw Brothers & Warner Bros. http://vanamco.com/ghostlab/

55. ENHANCE FOR CONTEXT 3

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

57. LOCATION AS AN
ENHANCEMENT?
3
Copyright: Metro-Goldwyn-Mayer (MGM)

58. ACCESSIBILITY
4

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

60. 1. DESIGN FOR TOUCH BY
DEFAULT
4
ARE YOUR DESIGNS FINGER FRIENDLY?
!
ARE YOU RELYING TOO HEAVILY ON HOVER?

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

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

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

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

65. THE RESULTS

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

67. MUCH TO LEARN THERE IS
Copyright: Lucasfilm

68. WANT TO LEARN MORE?
https://shop.smashingmagazine.com/responsive-web-design-vol-2.html

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