These are my slides from Figaro Digital on 5th August 2015: http://www.figarodigital.co.uk/seminars.aspx?pkEventID=2e528d70-4eea-4344-b49d-57a544f5399b Video available here: http://www.figarodigital.co.uk/Video.aspx?v=29ecfc59-8fc4-4505-86b2-5646dcef88f0

1. Image credit: Universal Pictures (Frankenstein, 1931)
@duckymatt
Figaro Digital
ADAPTING TO
RESPONSIVE
DESIGN

2. HELLOI’m Matt
@duckymatt

3. @duckymatt
cyber-duck.co.uk

4. DESIGNING
RESPONSIVE
EXPERIENCES
Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt

5. SO,
HOW DO
WE DEFINE
RESPONSIVE
DESIGN?
Image credit: Hartswood Films, BBC Wales & Masterpiece (Sherlock, 2010) @duckymatt

6. MEDIA QUERIES
FLUID GRIDS
FLEXIBLE IMAGES
@duckymatt

7. DELIVERING ELEGANT VISUAL
EXPERIENCES, ACROSS JUST
ABOUT ANY DEVICE.
@duckymatt

8. @duckymatt

9. @duckymattImage credit: Am Psycho Productions, Edward R Pressman Film, Lions Gate Films,
Muse Productions, PPS Films, Quadra Entertainment, Universal Pictures (American Psycho, 2000)

10. JOB
DONE,
RIGHT?
Image credit: Broadway Video, Little Stranger, NBC Universal Television (30 Rock, 2006) @duckymatt

11. WELL,
NOT
QUITE
Image credit: Carolco Pictures, Pacific Western, Lightstorm Entertainment, Canal+ & T2 Productions (Terimator 2: Judgment Day, 1991) @duckymatt

12. THE TRUE CHALLENGES OF RWD
GO BEYOND MEDIA QUERIES AND
MAKING EVERYTHING STRETCHY.
@duckymatt

13. CONTENT
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

14. MATTER?
WHY DOES ALL OF THIS
@duckymatt

15. Source: http://adwords.blogspot.co.uk/2015/05/building-for-next-moment.html
MOBILE WEB VS DESKTOP WEB
INTERNET
USERS
2007 - 2015
Source: Kleiner Perkins Caufield Byers, Mary Meeker’s Internet Trends 2011 http://www.kpcb.com/insights/2011-internet-trends
DESKTOP
MOBILE
@duckymatt

16. #MOBILEGEDDON
Image credit: Twentieth Century Fox, & Centropolis Entertainment (Independence Day, 1996) @duckymatt

17. Photo Credit: Kris Krüg: https://www.flickr.com/photos/kk/6863172432/
THIS IS WHY RWD MATTERS
@duckymatt

18. @duckymatt
KAREN MCGRANE
Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/
You don't get to decide
what device somebody
uses to access the Internet.
They do.
Source: http://karenmcgrane.com/2014/01/13/the-mobile-content-mandate/ @duckymatt

19. CONTENT
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

20. Content strategy plans for the creation, publication, and
governance of useful, usable content.
Define not only which content will be published, but why
we’re publishing it in the first place.
KRISTINA HALVORSON
Source: http://alistapart.com/article/thedisciplineofcontentstrategy @duckymatt

21. ASSUMPTION IS
THE ENEMY OF A
GOOD CONTENT
STRATEGY
@duckymatt

22. BUT AREN’T MOBILE USERS
ALWAYS ‘ON THE GO’?
Image credit: 20th Century Fox Television & Greenway Productions (Batman, 1966) @duckymatt

23. 60% OF SMARTPHONE DATA
IS USED INDOORS
Source: http://www.cennydd.com/blog/designing-with-context
Image credit: Fox 2000 Pictures, Regency Enterprises, Linson Films, Atman Entertainment, Knickerbocker Films & Tarius Film (Fight Club, 1999)
@duckymatt

24. 39% OF PEOPLE USE THEIR
MOBILE IN THE LOO.
Source: http://www.wiyamobile.net/pitch.pdf
Image credit:Chuck Lorre Productions & Warner Bros. Television (The Big Bang Theory, 2007-)
@duckymatt

25. Source / Credit: http://xkcd.com/773/
@duckymatt

26. CONTENT
PARITY
YOUR CORE CONTENT
SHOULD BE AVAILABLE
ON ALL PLATFORMS
@duckymatt

27. Credit: http://wtfmobileweb.com/ @duckymatt

28. Credit: http://wtfmobileweb.com/ @duckymatt

29. Credit: http://wtfmobileweb.com/
@duckymatt

30. @duckymatt
CONTENT PARITY ≠
CONTENT PRIORITY

31. @duckymatt

32. SO HOW CAN WE
AVOID ASSUMPTIONS?
@duckymatt

33. CHALLENGE ASSUMPTIONS
WITH RESEARCH
Image credit: The Ladd Company, Shaw Brothers and Warner Bros. (Blade Runner, 1982) @duckymatt

34. Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) @duckymatt
WHAT PEOPLE SAY THEY DO

35. Image credit: Gracie Films & 20th Century Fox Television (The Simpsons, 1989–) @duckymatt
WHAT PEOPLE REALLY DO

36. MOBILE FIRST
DESIGN
Check out: http://abookapart.com/products/mobile-first
@duckymatt

37. MOBILE FIRST
DESIGN
CONTENT
STRATEGY
@duckymatt

38. @duckymatt
FOCUS

39. AVOID CONTENT BLOAT
Image credit: Imagine Entertainment (The Nutty Professor, 1996) @duckymatt

41. @duckymatt

42. LAYOUTS BASED ON
CONTENT NOT DEVICES
@duckymattImage credit: http://nexuscolorado.blogspot.com/2012/07/10-new-car-dilemas-does-it-fit-in-my.html

43. @duckymatt

44. @duckymattSource: http://opensignal.com/reports/fragmentation.php
FRAGMENTATION

45. @duckymattImage creditWalt Disney Productions (Donald Duck: Early to Bed, 1941)

46. OUR CONTENT
WILL NEED
TO BECOME
MORE FLEXIBLE
THAN EVER
Image credit: Sunbow Productions, Marvel Productions & Hasbro (The Transformers, 1984) @duckymatt

47. CONTENT
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

48. THE WEB TODAY…
Image credit: 4Kids Productions Inc (Pokémon, 1998) @duckymatt

49. TRANSFER
SIZE
2010 2015
Source: http://httparchive.org/trends.php
700KB
2,000 KB
@duckymatt

50. IF WE CONTINUE AT THIS RATE
THE AVERAGE PAGE SIZE IN 2020
WILL BE OVER 5MB!
@duckymatt

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

52. EVERY SECOND COUNTS
@duckymatt@duckymattImage credit:Children’s Television Workshop & SesameWorkshop (Sesame Street, 1969-)

53. @duckymatt
EVERY 100 MILLISECOND DELAY
COSTS 1% IN SALES
Source: https://moz.com/blog/how-to-improve-your-conversion-rates-with-a-faster-website

54. @duckymatt
EVERY 1 SECOND DELAY
COSTS $1.6 BILLION A YEAR
Source: http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales

55. @duckymatt
MAKING THE OBAMA WEBSITE 60% FASTER
INCREASED DONATIONS BY 14%
Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/

56. @duckymatt
3 SECOND SAVING
$34 MILLION IN CONTRIBUTIONS
Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/

57. @duckymatt
REDUCING LOAD BY 2 SECONDS
INCREASED DOWNLOADS BY 15%
Source: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/

58. @duckymatt
DRIVING AN ADDITIONAL
60 MILLION DOWNLOADS PER YEAR
Source: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/

59. THINK SPEED MATTERS?
@duckymattImage credit: LucasFilms & Twentieth Century Fox Films (Star Wars: Episode IV – A New Hope, 1977)

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

61. PERFORMANCE AT THE HEART OF
ALL DESIGN DECISIONS
Image credit: Paramount Pictures, Robert Stigwood Organisation & Allan Carr Production (Grease, 1978) @duckymatt

62. SETTING A
PERFORMANCE BUDGET
Image credit: Twentieth Century Fox Film Corporation (Speed, 1994) @duckymatt

63. @duckymatt
MAKEYOUR BUDGET TANGIBLE
DAN MALL
Photo credit: Jeffrey Zeldman: https://www.flickr.com/photos/zeldman/14716769922/
Source: http://danielmall.com/articles/how-to-make-a-performance-budget/
I believe designers do
their best work within
constraints, and knowing
those constraints before
starting a design can be
incredibly enabling.

64. PAGE LOAD SPEED
HTTP REQUESTS
SIZE OF THE PAGE
@duckymatt

65. PERCEPTION OF SPEED MATTERS
@duckymattImage credit: Reliance Entertainment, IM Global, DNA Films, Peach Trees, Rena Films (Dredd, 2012)

66. Source: http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?_r=0 @duckymatt

67. @duckymattSource: http://www.filamentgroup.com/lab/weight-wait.html
SCOTT JEHL - MORE WEIGHT
DOESN’T MEAN MORE WAIT SCOTT JEHL
More weight
doesn’t mean
more wait…

68. MAKE THE FIRST PAGE
RENDER BLAZING FAST
Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt

69. LOAD ONLY CRITICAL CONTENT
THAT IS VISIBLE TO THE USER
ON FIRST PAGE LOAD
@duckymatt
https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent#structure

70. @duckymatt

71. @duckymatt

72. CONTENT
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

73. FUTURE FRIENDLY ≠
FUTURE PROOF
@duckymatt
WE CAN NEVER TRULY FUTURE PROOF OUR DESIGNS
Check out: http://futurefriendlyweb.com/

74. THE FUTURE IS ALREADY HERE
Image credit: Universal Pictures, Amblin Entertainment, U-Drive Productions (Back to the Future, 1985) @duckymatt

75. Photo credit: TechStage: https://www.flickr.com/photos/bestboyzde/15710950965 @duckymatt

76. Photo credit: Orde Saunders Liew: https://www.flickr.com/photos/79578508@N08/10081419044/ @duckymatt

77. Photo credit: Christopher Schmidt: https://www.flickr.com/photos/crschmidt/2224975112/ @duckymatt

78. Photo credit: Jon Fingas: https://www.flickr.com/photos/jfingas/15770620452/ @duckymatt

79. Photo credit: Mobilyazilar: https://www.flickr.com/photos/mobilyazilar/16172156273 @duckymatt

80. Source & Image Credit: http://arstechnica.com/gadgets/2012/03/hands-on-gesture-voice-and-the-many-inputs-of-samsungs-smart-tv/ @duckymatt

81. @duckymatt

82. Photo credit: David Carrington: https://www.flickr.com/photos/thox/5053262651 @duckymatt

83. @duckymattSource & Image Credit: http://fuckyeahinternetfridge.tumblr.com/

84. Source & Image Credit: http://www.bmwblog.com/2008/03/05/more-info-on-the-bmw-full-in-car-web-access/ @duckymatt

85. A HOSTILE ENVIRONMENT
Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt

86. Source: http://outdatedbrowser.com/ @duckymatt
DIFFERENT BROWSERS

87. @duckymatt
SLOW CONNECTIONS

88. Photo credit: LoKan Sardari: https://www.flickr.com/photos/lokan/17289001432/ @duckymatt
TINY TO HUGE SCREENS

89. Photo credit:Paul: https://www.flickr.com/photos/-macjasp/7056169897 @duckymatt
RETINA AND NON RETINA

90. @duckymatt
NEW INPUTS
Image credit: Twentieth Century Fox, Dreamworks SKG, Cruise/Wagner Productions, Blue Tulip Productions, Ronald Shusett/Gary Goldman (Minority Report, 2002)

91. Image credit: Paramount Pictures & Industrial Light & Magic (Star TrekIV: The Voyage Home, 1986) @duckymatt
NEW INPUTS

92. @duckymattImage credit: BBC

93. WE DON’T GET TO DECIDE HOW
PEOPLE ACCESS OUR CONTENT
THEY DO.
@duckymatt

94. DO WEBSITES NEED TO
LOOK EXACTLY THE SAME
IN EVERY BROWSER?
@duckymattImage credit: StudioCanal, Aardman Animations & Anton Capital Entertainment (Shaun The Sheep Movie, 2015)

95. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
@duckymatt

96. Image credit: Julien Douvier: http://www.juliendouvier.com/Animated-photography-Escalators
PROGRESSIVE ENHANCEMENT
Source: http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/
@duckymatt

97. DESIGN FOR TOUCH
BY DEFAULT
AND ENHANCE WITH TOUCH GESTURES
Image credit: Walt Disney Productions, Lisberger/Kushney (TRON, 1982) @duckymatt

98. @duckymatt
See: skinnyties.com

99. FORM ENHANCEMENT
USING INPUT TYPES AND ATTRIBUTES
Image credit: http://blog.teamtreehouse.com/use-input-element
@duckymatt

100. ANIMATION AS AN
ENHANCEMENT
Source / Image credit: Dann Petty: https://dribbble.com/shots/1621359-Open-Close-Icon-Animation @duckymatt

101. @duckymatt

102. LOCATION,
LOCATION,
LOCATION
@duckymatt
Check out: http://canibbq.com

103. CONDITIONAL LOADING
GREAT FOR ADAPTIVE EMBEDDING
@duckymatt

104. @duckymatt

105. WE’LL NEED TO
ADAPT TO THESE
CHALLENGES
Image credit: Paramount Pictures (Airplane!, 1980)
@duckymatt

106. RESPONSIVE DESIGN
GOES MUCH FURTHER
THAN MEDIA QUERIES
AND FLUID GRIDS
Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt

107. 3 FACTORSImage credit: L.A. Films and HBO (¡Three Amigos!, 1986) @duckymatt

108. CONTENT STRATEGY
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

109. MAKE TRULY
RESPONSIVE EXPERIENCES
Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt

110. THAT WE
Image credit: Walt Disney and Pixar Studios. (Up, 2009) @duckymatt

111. OUR CLIENTS
Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt

112. AND OUR USERS
Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) @duckymatt

113. WILL
Image credit: Warner Bros, Village Roadshow Pictures, A&E Television Network, Bazmark Films, Red Wagon Entertainment and Spectrum Films (The Great Gatsby, 2013) @duckymatt

114. THANK YOU
@duckymatt
Copyright: Studio 37 & La Petite Reine & La Classe Américaine
& JD Prod & France 3 Cinéma & Jouror Productions & uFilm (The Artist, 2011)