More than Media Queries: Reframing Responsive UX - SXSW 2016
•
1 like•2,216 views
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.
Report
Share
Related slideshows
More than Media Queries: Reframing Responsive UX - SXSW 2016
- 1. Reframing Responsive UX More than Media Queries: @duckymatt #RWDUX Image credit: Universal Pictures (Frankenstein, 1931)
- 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
- 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 @duckymattSource: 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
- 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
- 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
- 32. @duckymatt CONTENT PARITY ≠ CONTENT PRIORITY @duckymatt
- 34. @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
- 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
- 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
- 60. THE WEB IN 2016 Image credit: 4Kids Productions Inc (Pokémon, 1998) @duckymatt
- 62. IF WE CONTINUE AT THIS RATE THE AVERAGE PAGE SIZE IN 2020 WILL BE OVER 5MB! @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 @duckymattSource: 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
- 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. 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. @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. @duckymattImage 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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 FACTORSImage credit: L.A. Films and HBO (¡Three Amigos!, 1986) @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