Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

More than Media Queries: Reframing Responsive UX - SXSW 2016

1 670 vues

Publié le

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.

Publié dans : Design
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

More than Media Queries: Reframing Responsive UX - SXSW 2016

  1. 1. Reframing Responsive UX More than Media Queries: @duckymatt #RWDUX Image credit: Universal Pictures (Frankenstein, 1931)
  2. 2. HELLOI’m Matt @duckymatt #RWDUX
  3. 3. cyber-duck.co.uk @duckymatt@cyberduck_uk
  4. 4. @duckymatt
  5. 5. DESIGNING 
 RESPONSIVE
 EXPERIENCES Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt
  6. 6. SO, HOW DO WE DEFINE RESPONSIVE DESIGN? Image credit: Hartswood Films, BBC Wales & Masterpiece (Sherlock, 2010) @duckymatt
  7. 7. MEDIA QUERIES FLUID GRIDS FLEXIBLE IMAGES @duckymatt
  8. 8. Delivering elegant visual experiences, across just about any device @duckymatt
  9. 9. @duckymatt responsivelogos.co.uk
  10. 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. 11. JOB DONE, RIGHT? Image credit: Broadway Video, Little Stranger, NBC Universal Television (30 Rock, 2006) @duckymatt
  12. 12. WELL, NOT
 QUITE Image credit: Carolco Pictures, Pacific Western, Lightstorm Entertainment, Canal+ & T2 Productions (Terimator 2: Judgment Day, 1991) @duckymatt
  13. 13. YOUR USERS DON’T CARE IF YOUR SITE IS RESPONSIVE @duckymattSource: http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/
  14. 14. THE TRUE CHALLENGES OF RWD GO BEYOND MEDIA QUERIES AND MAKING EVERYTHING STRETCHY. @duckymatt
  15. 15. CONTENT PERFORMANCE FUTURE FRIENDLINESS @duckymatt
  16. 16. MATTER? WHY DOES ALL OF THIS @duckymatt
  17. 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. 18. #MOBILEGEDDON Image credit: Twentieth Century Fox, & Centropolis Entertainment (Independence Day, 1996) @duckymatt
  19. 19. @duckymatt
  20. 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. 21. CONTENT PERFORMANCE FUTURE FRIENDLINESS @duckymatt
  22. 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. 23. ASSUMPTION IS THE ENEMY OF A GOOD CONTENT STRATEGY @duckymatt
  24. 24. BUT AREN’T MOBILE USERS ALWAYS ‘ON THE GO’? Image credit: 20th Century Fox Television & Greenway Productions (Batman, 1966) @duckymatt
  25. 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. 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. 27. Source / Credit: http://xkcd.com/773/ @duckymatt
  28. 28. CONTENT PARITY Making your core content available on all platforms @duckymatt
  29. 29. Credit: http://wtfmobileweb.com/ @duckymatt
  30. 30. @duckymattCredit: http://wtfmobileweb.com/
  31. 31. @duckymattCredit: http://wtfmobileweb.com/
  32. 32. @duckymatt CONTENT PARITY ≠ CONTENT PRIORITY @duckymatt
  33. 33. @duckymatt
  34. 34. @duckymatt @duckymatt
  35. 35. @duckymatt @duckymatt
  36. 36. SO HOW CAN WE
 AVOID ASSUMPTIONS? @duckymatt
  37. 37. Image credit: The Ladd Company, Shaw Brothers and Warner Bros. (Blade Runner, 1982) @duckymatt CHALLENGE ASSUMPTIONS WITH RESEARCH
  38. 38. Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) WHAT PEOPLE SAY THEY DO @duckymatt
  39. 39. Image credit: Gracie Films & 20th Century Fox Television (The Simpsons, 1989–) WHAT PEOPLE REALLY DO @duckymatt
  40. 40. MOBILE FIRST
 DESIGN Check out: http://abookapart.com/products/mobile-first @duckymatt
  41. 41. MOBILE FIRST
 DESIGN CONTENT STRATEGY @duckymatt
  42. 42. FOCUS @duckymatt
  43. 43. DESKTOP FIRST DESIGN Image credit: Imagine Entertainment (The Nutty Professor, 1996) @duckymatt
  44. 44. @duckymatt
  45. 45. @duckymatt
  46. 46. 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
  47. 47. @duckymatt
  48. 48. Source: http://opensignal.com/reports/fragmentation.php @duckymatt
  49. 49. Image creditWalt Disney Productions (Donald Duck: Early to Bed, 1941) @duckymatt
  50. 50. OUR CONTENT WILL NEED TO BECOME MORE FLEXIBLE THAN EVER Image credit: Sunbow Productions, Marvel Productions & Hasbro (The Transformers, 1984) @duckymatt
  51. 51. @duckymatt
  52. 52. @duckymatt
  53. 53. @duckymatt MY BEEF WITH THE BURGER MENU ICON Image credit: Warner Bros. Television, Bright/Kauffman/Crane Productions (Friends, 1995-2004)
  54. 54. Image credit: Twentieth Century Fox Films, UTV Motion Pictures, Spyglass Entertainment, Blinding Edge Pictures, Dune Entertainment (The Happening, 2008) @duckymatt
  55. 55. @duckymatt MENU 7.2% ENGAGEMENT Source: http://www.bbc.com/news/magazine-31602745
  56. 56. @duckymatt MENU 22.4% ENGAGEMENT Source: http://www.bbc.com/news/magazine-31602745
  57. 57. @duckymatt MENU 20% ENGAGEMENT Source: http://www.bbc.com/news/magazine-31602745
  58. 58. CONTENT PERFORMANCE FUTURE FRIENDLINESS @duckymatt
  59. 59. THE WEB IN 2016 Image credit: 4Kids Productions Inc (Pokémon, 1998) @duckymatt
  60. 60. TRANSFER SIZE 2010 2016 Source: http://httparchive.org/trends.php 700KB 2,200 KB @duckymatt
  61. 61. IF WE CONTINUE AT THIS RATE THE AVERAGE PAGE SIZE IN 2020 WILL BE OVER 5MB! @duckymatt
  62. 62. $500 MONEY WELL SPENT? @duckymatt
  63. 63. $500 MONEY WELL SPENT? @duckymatt
  64. 64. $500 MONEY WELL SPENT? @duckymatt 90 SECONDS LATER… 54.6MB 1,600 REQUESTS
  65. 65. $500 MONEY WELL SPENT? @duckymatt $500 MONEY WELL SPENT, RIGHT?
  66. 66. 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
  67. 67. @duckymatt Image credit:Children’s Television Workshop & SesameWorkshop (Sesame Street, 1969-) EVERY SECOND COUNTS @duckymatt
  68. 68. @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
  69. 69. @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
  70. 70. MAKING THE OBAMA WEBSITE 60% FASTER INCREASED DONATIONS BY 14% Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/ @duckymatt
  71. 71. 3 SECOND SAVING $34 MILLION IN CONTRIBUTIONS @duckymattSource: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
  72. 72. @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/
  73. 73. 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
  74. 74. Image credit: LucasFilms & Twentieth Century Fox Films (Star Wars: Episode IV – A New Hope, 1977) @duckymatt
  75. 75. @duckymatt Image credit:NASA: http://www.everydaysciencestuff.com/space-dog/ @duckymatt
  76. 76. 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
  77. 77. Image credit: Paramount Pictures, Robert Stigwood Organisation & Allan Carr Production (Grease, 1978) @duckymatt
  78. 78. 
 PERFORMANCE BUDGETS Image credit: Twentieth Century Fox Film Corporation (Speed, 1994) @duckymatt
  79. 79. 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
  80. 80. PAGE LOAD SPEED HTTP REQUESTS SIZE OF THE PAGE @duckymatt
  81. 81. @duckymatt
  82. 82. START RENDER: 2.3 seconds VISUALLY COMPLETE: 13.5 seconds CURRENT WEBSITE @duckymatt
  83. 83. SIMILAR WEBSITES START RENDER: 1.9 seconds on average VISUALLY COMPLETE: 2.4 seconds on average @duckymatt
  84. 84. OUR GOAL SPEEDS START RENDER: 1.5 seconds VISUALLY COMPLETE: 2.0 seconds @duckymatt
  85. 85. SO WHAT NEXT? Image credit: United Plankton Pictures, Nickelodeon (SpongeBob SquarePants, 1999—) @duckymatt
  86. 86. Inspired by: http://danielmall.com/articles/how-to-make-a-performance-budget/ Image credit: http://www.hetemeel.com/einsteinform.php
  87. 87. @duckymatt
  88. 88. NEW BETA SITE START RENDER: 1.3 seconds VISUALLY COMPLETE: 1.6 seconds @duckymatt
  89. 89. @duckymattImage credit: BBC (Doctor Who, 2005—)
  90. 90. PERCEPTION OF SPEED VS ACTUAL SPEED Image credit: Reliance Entertainment, IM Global, DNA Films, Peach Trees, Rena Films (Dredd, 2012) @duckymatt
  91. 91. Source: http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?_r=0 @duckymatt
  92. 92. 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
  93. 93. MAKE THE FIRST PAGE RENDER BLAZING FAST Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt
  94. 94. 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
  95. 95. @duckymatt
  96. 96. @duckymatt
  97. 97. CONTENT PERFORMANCE FUTURE FRIENDLINESS @duckymatt
  98. 98. Image credit: Universal Pictures, Amblin Entertainment, U-Drive Productions (Back to the Future, 1985) @duckymatt
  99. 99. Photo credit: TechStage: https://www.flickr.com/photos/bestboyzde/15710950965 @duckymatt
  100. 100. Photo credit: Orde Saunders Liew: https://www.flickr.com/photos/79578508@N08/10081419044/ @duckymatt
  101. 101. Photo credit: Christopher Schmidt: https://www.flickr.com/photos/crschmidt/2224975112/ @duckymatt
  102. 102. Photo credit: Jon Fingas: https://www.flickr.com/photos/jfingas/15770620452/ @duckymatt
  103. 103. Photo credit: Mobilyazilar: https://www.flickr.com/photos/mobilyazilar/16172156273 @duckymatt
  104. 104. Source & Image Credit: http://arstechnica.com/gadgets/2012/03/hands-on-gesture-voice-and-the-many-inputs-of-samsungs-smart-tv/ @duckymatt
  105. 105. @duckymatt
  106. 106. Photo credit: David Carrington: https://www.flickr.com/photos/thox/5053262651 @duckymatt
  107. 107. Source & Image Credit: http://fuckyeahinternetfridge.tumblr.com/ @duckymatt
  108. 108. Source & Image Credit: http://www.bmwblog.com/2008/03/05/more-info-on-the-bmw-full-in-car-web-access/ @duckymatt
  109. 109. A HOSTILE ENVIRONMENT Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt
  110. 110. Source: http://outdatedbrowser.com/ DIFFERENT BROWSERS @duckymatt
  111. 111. SLOW CONNECTIONS @duckymatt
  112. 112. Photo credit: LoKan Sardari: https://www.flickr.com/photos/lokan/17289001432/ TINY TO HUGE SCREENS @duckymatt
  113. 113. Photo credit:Paul: https://www.flickr.com/photos/-macjasp/7056169897 RETINA AND NON RETINA @duckymatt
  114. 114. NEW INPUTS Image credit: Twentieth Century Fox, Dreamworks SKG, Cruise/Wagner Productions, Blue Tulip Productions, Ronald Shusett/Gary Goldman (Minority Report, 2002) @duckymatt
  115. 115. Image credit: Paramount Pictures & Industrial Light & Magic (Star TrekIV: The Voyage Home, 1986) NEW INPUTS @duckymatt
  116. 116. Image credit: BBC @duckymatt
  117. 117. @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
  118. 118. 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
  119. 119. http://dowebsitesneedtolookexactlythesameineverybrowser.com/ @duckymatt
  120. 120. 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
  121. 121. @duckymatt
  122. 122. Image credit: Julien Douvier: http://www.juliendouvier.com/Animated-photography-Escalators @duckymatt PROGRESSIVE ENHANCEMENT
  123. 123. DESIGN FOR TOUCH BY DEFAULT AND ENHANCE WITH TOUCH GESTURES Image credit: Walt Disney Productions, Lisberger/Kushney (TRON, 1982) @duckymatt
  124. 124. @duckymatt See: skinnyties.com @duckymatt
  125. 125. FORM ENHANCEMENT USING INPUT TYPES AND ATTRIBUTES Image credit: http://blog.teamtreehouse.com/use-input-element @duckymatt
  126. 126. ANIMATION AS AN ENHANCEMENT Source / Image credit: Dann Petty: https://dribbble.com/shots/1621359-Open-Close-Icon-Animation @duckymatt
  127. 127. @duckymatt
  128. 128. LOCATION, LOCATION, LOCATION Check out: http://canibbq.com @duckymatt
  129. 129. CONDITIONAL LOADING
  130. 130. @duckymatt
  131. 131. WE’LL NEED TO ADAPT TO THESE CHALLENGES Image credit: Paramount Pictures (Airplane!, 1980) @duckymatt
  132. 132. SKETCH Image credit: Twentieth Century Fox Films, Paramount Pictures and Lightstorm Entertainment (Titanic, 1997) @duckymatt
  133. 133. 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
  134. 134. Clone or fork: http://cyber-duck.github.io/hoisin.scss/ @duckymatt
  135. 135. RESPONSIVE DESIGN GOES MUCH FURTHER THAN MEDIA QUERIES AND FLUID GRIDS Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt
  136. 136. 3 FACTORSImage credit: L.A. Films and HBO (¡Three Amigos!, 1986) @duckymatt
  137. 137. CONTENT PERFORMANCE FUTURE FRIENDLINESS @duckymatt
  138. 138. MAKE TRULY RESPONSIVE EXPERIENCES Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt
  139. 139. Image credit: Walt Disney and Pixar Studios. (Up, 2009) THAT WE @duckymatt
  140. 140. OUR CLIENTS Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt
  141. 141. AND OUR USERS Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) @duckymatt
  142. 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. 143. 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

×