The document discusses the challenges of responsive web design and creating content that works across different devices and browsers. It emphasizes designing with performance, content strategy, and future flexibility in mind. Key challenges include dealing with a variety of screen sizes, browsers, and connection speeds, as well as unpredictably evolving technologies. The document advocates for progressive enhancement and putting user needs above consistency across platforms.

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

2. HELLOI’m Matt
@duckymatt

3. @cyberduck_uk cyber-duck.co.uk

4. @duckymatt

5. @duckymatt
cyber-duck.co.uk

6. @duckymatt

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

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

9. MEDIA QUERIES
FLUID GRIDS
FLEXIBLE IMAGES
@duckymatt

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

11. @duckymatt

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

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

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

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

16. @duckymatt

17. @duckymatt
WHAT ARE THE TRUE
CHALLENGES OF RWD?

18. CONTENT
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

19. MATTER?
WHY DOES ALL OF THIS
@duckymatt

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

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

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

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

24. CONTENT
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

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

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

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

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

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

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

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

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

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

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

35. @duckymatt
CONTENT PARITY ≠
CONTENT PRIORITY

36. @duckymatt

37. @duckymatt

38. @duckymatt

39. SO HOW CAN WE
AVOID ASSUMPTIONS?
@duckymatt

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

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

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

43. DEVICE AGNOSTIC USER STORIES
@duckymatt

44. AUDIT YOUR EXISTING CONTENT
Image credit: Nintendo & Capcom (The Legend of Zelda: A Link to the Past, 1991) @duckymatt

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

46. MOBILE FIRST
DESIGN
CONTENT
STRATEGY
@duckymatt

47. @duckymatt
FOCUS

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

50. @duckymatt

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

52. @duckymatt

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

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

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

56. CONTENT
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

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

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

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

60. $500
MONEY WELL SPENT?
@duckymatt

61. @duckymatt
90 SECONDS LATER…
54.6MB
1,600 REQUESTS

62. $500
MONEY WELL SPENT?
@duckymatt

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

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

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

66. @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

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

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

69. @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/

70. @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/

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

72. @duckymattImage credit:NASA: http://www.everydaysciencestuff.com/space-dog/
I HAVE NO IDEA WHAT I’M DOING

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

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

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

76. @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.

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

78. @duckymatt

79. @duckymatt

80. START RENDER:
2.392 sec
VISUALLY COMPLETE:
13.500 sec
@duckymatt
CURRENT WEBSITE

81. START RENDER:
1.900 sec on average
VISUALLY COMPLETE:
2.400 sec on average
@duckymatt
SIMILAR WEBSITES

82. START RENDER:
1.500 sec
VISUALLY COMPLETE:
2.000 sec
@duckymatt
OUR GOAL SPEEDS

83. @duckymatt
SO WHAT NEXT?
Image credit: Twentieth Century Fox Films, UTV Motion Pictures, Spyglass Entertainment, Blinding Edge Pictures, Dune Entertainment (The Happening, 2008)

84. @duckymattInspired by: http://danielmall.com/articles/how-to-make-a-performance-budget/
Image credit: http://www.hetemeel.com/einsteinform.php

85. @duckymatt

86. START RENDER:
1.293 sec
VISUALLY COMPLETE:
1.600 sec
@duckymatt
CURRENT WEBSITE

87. @duckymattImage credit: BBC Wales, CBC (Doctor Who, 2005–)

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

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

90. @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…

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

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

93. @duckymatt

94. @duckymatt

95. CONTENT
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

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

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

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

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

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

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

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

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

104. @duckymatt

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

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

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

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

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

110. @duckymatt
SLOW CONNECTIONS

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

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

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

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

115. @duckymattImage credit: BBC

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

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

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

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

120. @duckymatt

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

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

123. @duckymatt
See: skinnyties.com

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

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

126. @duckymatt

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

128. @duckymatt
Check out: http://beforedark.co

129. CONDITIONAL LOADING
GREAT FOR ADAPTIVE EMBEDDING
@duckymatt

130. @duckymatt

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

132. SKETCH
@duckymattImage credit: Twentieth Century Fox Films, Paramount Pictures and Lightstorm Entertainment (Titanic, 1997)

133. @duckymatt
PROTOTYPING
Image credit: Paramount Pictures, Marvel Studios, Fairview Entertainment and Dark Blades Films (Iron Man, 2008)

134. http://cyber-duck.github.io/hoisin.scss/
@duckymatt

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

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

137. CONTENT STRATEGY
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

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

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

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

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

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

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