More than Media Queries: Reframing Responsive UX - SXSW 2016

My slides from my presentation at SXSW, Austin, Texas on 12/03/16 about going beyond the media query to deliver truly responsive experiences for people regardless of the device they're using.

1. Reframing Responsive UX
More than Media Queries:
@duckymatt
#RWDUX
Image credit: Universal Pictures (Frankenstein, 1931)

2. HELLO
I’m Matt
@duckymatt
#RWDUX

3. cyber-duck.co.uk
@duckymatt@cyberduck_uk

4. @duckymatt

5. DESIGNING 

RESPONSIVE

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

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

7. MEDIA QUERIES
FLUID GRIDS
FLEXIBLE IMAGES
@duckymatt

8. Delivering elegant visual experiences,
across just about any device
@duckymatt

9. @duckymatt
responsivelogos.co.uk

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

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

12. WELL,
NOT

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

13. YOUR USERS DON’T CARE
IF YOUR SITE IS RESPONSIVE
@duckymatt
Source: http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/

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

15. CONTENT
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

16. MATTER?
WHY DOES ALL OF THIS
@duckymatt

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

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

19. @duckymatt

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

21. CONTENT
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

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

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

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

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

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

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

28. CONTENT
PARITY
Making your core content
available on all platforms
@duckymatt

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

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

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

32. @duckymatt
CONTENT PARITY ≠
CONTENT PRIORITY
@duckymatt

34. @duckymatt

35. @duckymatt
@duckymatt

36. @duckymatt
@duckymatt

37. SO HOW CAN WE 

AVOID ASSUMPTIONS?
@duckymatt

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

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

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

41. MOBILE FIRST

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

42. MOBILE FIRST

DESIGN
CONTENT
STRATEGY
@duckymatt

43. FOCUS
@duckymatt

44. DESKTOP FIRST DESIGN
Image credit: Imagine Entertainment (The Nutty Professor, 1996) @duckymatt

45. @duckymatt

46. @duckymatt

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

48. @duckymatt

49. Source: http://opensignal.com/reports/fragmentation.php @duckymatt

50. Image creditWalt Disney Productions (Donald Duck: Early to Bed, 1941) @duckymatt

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

52. @duckymatt

53. @duckymatt

54. @duckymatt
MY BEEF WITH
THE BURGER MENU ICON
Image credit: Warner Bros. Television, Bright/Kauffman/Crane Productions (Friends, 1995-2004)

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

56. @duckymatt
MENU
7.2%
ENGAGEMENT
Source: http://www.bbc.com/news/magazine-31602745

57. @duckymatt
MENU
22.4%
ENGAGEMENT
Source: http://www.bbc.com/news/magazine-31602745

58. @duckymatt
MENU
20%
ENGAGEMENT
Source: http://www.bbc.com/news/magazine-31602745

59. CONTENT
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

60. THE WEB IN 2016
Image credit: 4Kids Productions Inc (Pokémon, 1998) @duckymatt

61. TRANSFER
SIZE
2010 2016
Source: http://httparchive.org/trends.php
700KB
2,200 KB
@duckymatt

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

63. $500
MONEY WELL SPENT?
@duckymatt

64. $500
MONEY WELL SPENT?
@duckymatt

65. $500
MONEY WELL SPENT?
@duckymatt
90 SECONDS LATER…
54.6MB
1,600 REQUESTS

66. $500
MONEY WELL SPENT?
@duckymatt
$500
MONEY WELL
SPENT, RIGHT?

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

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

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

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

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

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

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

74. 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/ @duckymatt

75. Image credit: LucasFilms & Twentieth Century Fox Films (Star Wars: Episode IV – A New Hope, 1977) @duckymatt

76. @duckymatt
Image credit:NASA: http://www.everydaysciencestuff.com/space-dog/ @duckymatt

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

78. Image credit: Paramount Pictures, Robert Stigwood Organisation & Allan Carr Production (Grease, 1978) @duckymatt

79. 

PERFORMANCE BUDGETS
Image credit: Twentieth Century Fox Film Corporation (Speed, 1994) @duckymatt

80. MAKE YOUR 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.
@duckymatt

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

82. @duckymatt

84. START RENDER:
2.3 seconds
VISUALLY COMPLETE:
13.5 seconds
CURRENT WEBSITE
@duckymatt

85. SIMILAR WEBSITES
START RENDER:
1.9 seconds on average
VISUALLY COMPLETE:
2.4 seconds on average
@duckymatt

86. OUR GOAL SPEEDS
START RENDER:
1.5 seconds
VISUALLY COMPLETE:
2.0 seconds
@duckymatt

87. SO WHAT NEXT?
Image credit: United Plankton Pictures, Nickelodeon (SpongeBob SquarePants, 1999—) @duckymatt

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

89. @duckymatt

90. NEW BETA SITE
START RENDER:
1.3 seconds
VISUALLY COMPLETE:
1.6 seconds
@duckymatt

91. @duckymatt
Image credit: BBC (Doctor Who, 2005—)

92. PERCEPTION OF SPEED
VS ACTUAL SPEED
Image credit: Reliance Entertainment, IM Global, DNA Films, Peach Trees, Rena Films (Dredd, 2012) @duckymatt

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

94. Source: 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…
@duckymatt

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

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

97. @duckymatt

98. @duckymatt

99. CONTENT
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

100. Image credit: Universal Pictures, Amblin Entertainment, U-Drive Productions (Back to the Future, 1985) @duckymatt

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

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

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

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

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

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

107. @duckymatt

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

109. Source & Image Credit: http://fuckyeahinternetfridge.tumblr.com/ @duckymatt

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

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

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

113. SLOW CONNECTIONS
@duckymatt

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

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

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

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

118. Image credit: BBC @duckymatt

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

120. DOES THAT MEAN WEBSITES
NEED TO LOOK EXACTLY THE
SAME IN EVERY BROWSER?
Image credit: StudioCanal, Aardman Animations & Anton Capital Entertainment (Shaun The Sheep Movie, 2015) @duckymatt

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

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

123. @duckymatt

124. Image credit: Julien Douvier: http://www.juliendouvier.com/Animated-photography-Escalators @duckymatt
PROGRESSIVE ENHANCEMENT

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

126. @duckymatt
See: skinnyties.com @duckymatt

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

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

129. @duckymatt

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

131. CONDITIONAL LOADING

132. @duckymatt

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

134. SKETCH
Image credit: Twentieth Century Fox Films, Paramount Pictures and Lightstorm Entertainment (Titanic, 1997) @duckymatt

135. PROTOTYPE
Image credit: Paramount Pictures, Marvel Studios, Fairview Entertainment and Dark Blades Films (Iron Man, 2008) @duckymatt
Clone or fork: https://github.com/Cyber-Duck/mobile-first-prototypes

136. Clone or fork: http://cyber-duck.github.io/hoisin.scss/
@duckymatt

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

138. 3 FACTORS
Image credit: L.A. Films and HBO (¡Three Amigos!, 1986) @duckymatt

139. CONTENT
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

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

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

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

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

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

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