Slides from my talk at London Web http://www.meetup.com/londonweb/events/176097702/ given on 19th February 2015.

1. ADAPTING TO A
RESPONSIVE
WEB DESIGN

2. HOW DO WE DEFINE
RESPONSIVE?

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

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

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

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

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

8. SO WHY GO
RESPONSIVE?

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

10. MULTIPLE CODE BASES1
CONTENT STRATEGY2
KNOWN UNKNOWNS3

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

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

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

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

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

17. CONTENT PARITY
1

18. ASSUMPTION IS
THE ENEMY OF A
GOOD CONTENT
STRATEGY
1
Image Copyright: BBC

19. 1
Image Copyright: BBC

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

21. 1

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

23. 1

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

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

26. 11
MOBILE FIRST
CONTENT STRATEGY

27. SPEED MATTERS
2

28. 2
TRANSFER
SIZE
2010 2015
700KB
1900KB
http://httparchive.org/trends.php

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

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

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

32. SO,
TO ENHANCE PERFORMANCE WE…
2

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

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. OFF THE SHELF
FRONT-END FRAMEWORKS
2

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

37. KNOWING YOUR CODE FROM
TOP TO BOTTOM IS ESSENTIAL TO
HAVE TOTAL CONTROL OVER IT
2
Image credit: http://css-tricks.com/

38. http://cyber-duck.github.io/hoisin.scss/
WE CREATED A MINI-LIBRARY THAT
IS SIMPLE, FLEXIBLE, LIGHT AND
DOESN’T MAKE DECISIONS FOR YOU
2

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

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

41. CSS
2
http://sass-lang.com/

42. IMAGES
2
BEGIN WITH OPTIMISATION

43. IMAGES
2
THEN COMPRESSION
http://imageoptim.com/ https://tinypng.com/

44. FUTURE
FRIENDLINESS
3

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

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

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

52. PROTOTYPE
3
Copyright: Paramount Pictures & Marvel Enterprises

53. http://styletil.es/
3

54. 3

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

56. ACCESSIBILITY
4

57. 7 QUICK WINS FOR
ACCESSIBILITY
4
Image Copyright: Paramount Pictures & Lucasfilm

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

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

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

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

62. 5. CREATE A HIDDEN SKIP
NAVIGATION LINK
4

63. 6. DON’T USE PLACEHOLDERS
AS A SUBSTITUTE FOR LABELS
ON FORMS
4
http://www.webaxe.org/placeholder-attribute-is-not-a-label/Image credit: Dave Bushell: http://dbushell.com/2013/11/08/form-label-design/

64. 7. PROOF DESIGNS IN GREYSCALE
TO CHECK COLOUR CONTRAST
4
Related: http://24ways.org/2012/colour-accessibility/

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. THANK YOU
@duckymatt
@cyberduck_uk
Copyright: Studio 37 & La Petite Reine & La Classe Américaine
& JD Prod & France 3 Cinéma & Jouror Productions & uFilm