Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adapting to Responsive Design - Matt Gibson

1,161 views

Published on

We can no longer predict how people are accessing our content now, let alone in a few years’ time when the technology people use to access the web will inevitably diverge even further, and perhaps in ways we haven’t even considered yet. Rather than seeing this unpredictability and lack of control as a problem, we should embrace these ‘known unknowns’ and the inherent flexibility of the web. Put simply, responsive design is about being more flexible and assuming less about our users, from how they’re accessing our content and what technology they’re using to their environment.

Responsive design is often positioned as a challenge for developers. This talk will instead focus on responsive design and generally designing for mobile from a UX and design perspective. The talk will cover how to tackle content strategy, performance, future friendliness and accessibility for the responsive web as a UX designer.

Published in: Design
  • Be the first to comment

Adapting to Responsive Design - Matt Gibson

  1. 1. Image credit: Universal Pictures (Frankenstein, 1931) @duckymatt ADAPTING TO RESPONSIVE DESIGN
  2. 2. HELLOI’m Matt @duckymatt
  3. 3. @cyberduck_uk cyber-duck.co.uk
  4. 4. @duckymatt
  5. 5. @duckymatt cyber-duck.co.uk
  6. 6. @duckymatt
  7. 7. DESIGNING 
 RESPONSIVE
 EXPERIENCES Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt
  8. 8. SO, HOW DO WE DEFINE RESPONSIVE DESIGN? Image credit: Hartswood Films, BBC Wales & Masterpiece (Sherlock, 2010) @duckymatt
  9. 9. MEDIA QUERIES FLUID GRIDS FLEXIBLE IMAGES @duckymatt
  10. 10. DELIVERING ELEGANT VISUAL EXPERIENCES, ACROSS JUST ABOUT ANY DEVICE. @duckymatt
  11. 11. @duckymatt
  12. 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. 13. JOB DONE, RIGHT? Image credit: Broadway Video, Little Stranger, NBC Universal Television (30 Rock, 2006) @duckymatt
  14. 14. WELL, NOT
 QUITE Image credit: Carolco Pictures, Pacific Western, Lightstorm Entertainment, Canal+ & T2 Productions (Terimator 2: Judgment Day, 1991) @duckymatt
  15. 15. THE TRUE CHALLENGES OF RWD GO BEYOND MEDIA QUERIES AND MAKING EVERYTHING STRETCHY. @duckymatt
  16. 16. @duckymatt
  17. 17. @duckymatt WHAT ARE THE TRUE CHALLENGES OF RWD?
  18. 18. CONTENT PERFORMANCE FUTURE FRIENDLINESS @duckymatt
  19. 19. MATTER? WHY DOES ALL OF THIS @duckymatt
  20. 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. 21. #MOBILEGEDDON Image credit: Twentieth Century Fox, & Centropolis Entertainment (Independence Day, 1996) @duckymatt
  22. 22. Photo Credit: Kris Krüg: https://www.flickr.com/photos/kk/6863172432/ THIS IS WHY RWD MATTERS @duckymatt
  23. 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. 24. CONTENT PERFORMANCE FUTURE FRIENDLINESS @duckymatt
  25. 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. 26. ASSUMPTION IS THE ENEMY OF A GOOD CONTENT STRATEGY @duckymatt
  27. 27. BUT AREN’T MOBILE USERS ALWAYS ‘ON THE GO’? Image credit: 20th Century Fox Television & Greenway Productions (Batman, 1966) @duckymatt
  28. 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. 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. 30. Source / Credit: http://xkcd.com/773/ @duckymatt
  31. 31. CONTENT PARITY YOUR CORE CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS @duckymatt
  32. 32. Credit: http://wtfmobileweb.com/ @duckymatt
  33. 33. Credit: http://wtfmobileweb.com/ @duckymatt
  34. 34. Credit: http://wtfmobileweb.com/ @duckymatt
  35. 35. @duckymatt CONTENT PARITY ≠ CONTENT PRIORITY
  36. 36. @duckymatt
  37. 37. @duckymatt
  38. 38. @duckymatt
  39. 39. SO HOW CAN WE
 AVOID ASSUMPTIONS? @duckymatt
  40. 40. CHALLENGE ASSUMPTIONS WITH RESEARCH Image credit: The Ladd Company, Shaw Brothers and Warner Bros. (Blade Runner, 1982) @duckymatt
  41. 41. Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) @duckymatt WHAT PEOPLE SAY THEY DO
  42. 42. Image credit: Gracie Films & 20th Century Fox Television (The Simpsons, 1989–) @duckymatt WHAT PEOPLE REALLY DO
  43. 43. DEVICE AGNOSTIC USER STORIES @duckymatt
  44. 44. AUDIT YOUR EXISTING CONTENT Image credit: Nintendo & Capcom (The Legend of Zelda: A Link to the Past, 1991) @duckymatt
  45. 45. MOBILE FIRST
 DESIGN Check out: http://abookapart.com/products/mobile-first @duckymatt
  46. 46. MOBILE FIRST
 DESIGN CONTENT STRATEGY @duckymatt
  47. 47. @duckymatt FOCUS
  48. 48. AVOID CONTENT BLOAT Image credit: Imagine Entertainment (The Nutty Professor, 1996) @duckymatt
  49. 49. @duckymatt
  50. 50. LAYOUTS BASED ON CONTENT NOT DEVICES @duckymattImage credit: http://nexuscolorado.blogspot.com/2012/07/10-new-car-dilemas-does-it-fit-in-my.html
  51. 51. @duckymatt
  52. 52. @duckymattSource: http://opensignal.com/reports/fragmentation.php FRAGMENTATION
  53. 53. @duckymattImage creditWalt Disney Productions (Donald Duck: Early to Bed, 1941)
  54. 54. OUR CONTENT WILL NEED TO BECOME MORE FLEXIBLE THAN EVER Image credit: Sunbow Productions, Marvel Productions & Hasbro (The Transformers, 1984) @duckymatt
  55. 55. CONTENT PERFORMANCE FUTURE FRIENDLINESS @duckymatt
  56. 56. THE WEB TODAY… Image credit: 4Kids Productions Inc (Pokémon, 1998) @duckymatt
  57. 57. TRANSFER SIZE 2010 2015 Source: http://httparchive.org/trends.php 700KB 2,000 KB @duckymatt
  58. 58. IF WE CONTINUE AT THIS RATE THE AVERAGE PAGE SIZE IN 2020 WILL BE OVER 5MB! @duckymatt
  59. 59. $500 MONEY WELL SPENT? @duckymatt
  60. 60. @duckymatt 90 SECONDS LATER… 54.6MB 1,600 REQUESTS
  61. 61. $500 MONEY WELL SPENT? @duckymatt
  62. 62. 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
  63. 63. EVERY SECOND COUNTS @duckymatt@duckymattImage credit:Children’s Television Workshop & SesameWorkshop (Sesame Street, 1969-)
  64. 64. @duckymatt EVERY 100 MILLISECOND DELAY COSTS 1% IN SALES Source: https://moz.com/blog/how-to-improve-your-conversion-rates-with-a-faster-website
  65. 65. @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
  66. 66. @duckymatt MAKING THE OBAMA WEBSITE 60% FASTER INCREASED DONATIONS BY 14% Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
  67. 67. @duckymatt 3 SECOND SAVING $34 MILLION IN CONTRIBUTIONS Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
  68. 68. @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/
  69. 69. @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/
  70. 70. THINK SPEED MATTERS? @duckymattImage credit: LucasFilms & Twentieth Century Fox Films (Star Wars: Episode IV – A New Hope, 1977)
  71. 71. @duckymattImage credit:NASA: http://www.everydaysciencestuff.com/space-dog/ I HAVE NO IDEA WHAT I’M DOING
  72. 72. 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
  73. 73. PERFORMANCE AT THE HEART OF ALL DESIGN DECISIONS Image credit: Paramount Pictures, Robert Stigwood Organisation & Allan Carr Production (Grease, 1978) @duckymatt
  74. 74. SETTING A
 PERFORMANCE BUDGET Image credit: Twentieth Century Fox Film Corporation (Speed, 1994) @duckymatt
  75. 75. @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.
  76. 76. PAGE LOAD SPEED HTTP REQUESTS SIZE OF THE PAGE @duckymatt
  77. 77. @duckymatt
  78. 78. @duckymatt
  79. 79. START RENDER: 2.392 sec VISUALLY COMPLETE: 13.500 sec @duckymatt CURRENT WEBSITE
  80. 80. START RENDER: 1.900 sec on average VISUALLY COMPLETE: 2.400 sec on average @duckymatt SIMILAR WEBSITES
  81. 81. START RENDER: 1.500 sec VISUALLY COMPLETE: 2.000 sec @duckymatt OUR GOAL SPEEDS
  82. 82. @duckymatt SO WHAT NEXT? Image credit: Twentieth Century Fox Films, UTV Motion Pictures, Spyglass Entertainment, Blinding Edge Pictures, Dune Entertainment (The Happening, 2008)
  83. 83. @duckymattInspired by: http://danielmall.com/articles/how-to-make-a-performance-budget/ Image credit: http://www.hetemeel.com/einsteinform.php
  84. 84. @duckymatt
  85. 85. START RENDER: 1.293 sec VISUALLY COMPLETE: 1.600 sec @duckymatt CURRENT WEBSITE
  86. 86. @duckymattImage credit: BBC Wales, CBC (Doctor Who, 2005–)
  87. 87. PERCEPTION OF SPEED MATTERS @duckymattImage credit: Reliance Entertainment, IM Global, DNA Films, Peach Trees, Rena Films (Dredd, 2012)
  88. 88. Source: http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?_r=0 @duckymatt
  89. 89. @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…
  90. 90. MAKE THE FIRST PAGE RENDER BLAZING FAST Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt
  91. 91. LOAD ONLY CRITICAL CONTENT THAT IS VISIBLE TO THE USER ON FIRST PAGE LOAD @duckymatt https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent#structure
  92. 92. @duckymatt
  93. 93. @duckymatt
  94. 94. CONTENT PERFORMANCE FUTURE FRIENDLINESS @duckymatt
  95. 95. FUTURE FRIENDLY ≠ FUTURE PROOF @duckymatt WE CAN NEVER TRULY FUTURE PROOF OUR DESIGNS Check out: http://futurefriendlyweb.com/
  96. 96. THE FUTURE IS ALREADY HERE Image credit: Universal Pictures, Amblin Entertainment, U-Drive Productions (Back to the Future, 1985) @duckymatt
  97. 97. Photo credit: TechStage: https://www.flickr.com/photos/bestboyzde/15710950965 @duckymatt
  98. 98. Photo credit: Orde Saunders Liew: https://www.flickr.com/photos/79578508@N08/10081419044/ @duckymatt
  99. 99. Photo credit: Christopher Schmidt: https://www.flickr.com/photos/crschmidt/2224975112/ @duckymatt
  100. 100. Photo credit: Jon Fingas: https://www.flickr.com/photos/jfingas/15770620452/ @duckymatt
  101. 101. Photo credit: Mobilyazilar: https://www.flickr.com/photos/mobilyazilar/16172156273 @duckymatt
  102. 102. Source & Image Credit: http://arstechnica.com/gadgets/2012/03/hands-on-gesture-voice-and-the-many-inputs-of-samsungs-smart-tv/ @duckymatt
  103. 103. @duckymatt
  104. 104. Photo credit: David Carrington: https://www.flickr.com/photos/thox/5053262651 @duckymatt
  105. 105. @duckymattSource & Image Credit: http://fuckyeahinternetfridge.tumblr.com/
  106. 106. Source & Image Credit: http://www.bmwblog.com/2008/03/05/more-info-on-the-bmw-full-in-car-web-access/ @duckymatt
  107. 107. A HOSTILE ENVIRONMENT Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt
  108. 108. Source: http://outdatedbrowser.com/ @duckymatt DIFFERENT BROWSERS
  109. 109. @duckymatt SLOW CONNECTIONS
  110. 110. Photo credit: LoKan Sardari: https://www.flickr.com/photos/lokan/17289001432/ @duckymatt TINY TO HUGE SCREENS
  111. 111. Photo credit:Paul: https://www.flickr.com/photos/-macjasp/7056169897 @duckymatt RETINA AND NON RETINA
  112. 112. @duckymatt NEW INPUTS Image credit: Twentieth Century Fox, Dreamworks SKG, Cruise/Wagner Productions, Blue Tulip Productions, Ronald Shusett/Gary Goldman (Minority Report, 2002)
  113. 113. Image credit: Paramount Pictures & Industrial Light & Magic (Star TrekIV: The Voyage Home, 1986) @duckymatt NEW INPUTS
  114. 114. @duckymattImage credit: BBC
  115. 115. WE DON’T GET TO DECIDE HOW PEOPLE ACCESS OUR CONTENT THEY DO. @duckymatt
  116. 116. DO WEBSITES NEED TO LOOK EXACTLY THE SAME IN EVERY BROWSER? @duckymattImage credit: StudioCanal, Aardman Animations & Anton Capital Entertainment (Shaun The Sheep Movie, 2015)
  117. 117. http://dowebsitesneedtolookexactlythesameineverybrowser.com/ @duckymatt
  118. 118. 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
  119. 119. @duckymatt
  120. 120. 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
  121. 121. DESIGN FOR TOUCH BY DEFAULT AND ENHANCE WITH TOUCH GESTURES Image credit: Walt Disney Productions, Lisberger/Kushney (TRON, 1982) @duckymatt
  122. 122. @duckymatt See: skinnyties.com
  123. 123. FORM ENHANCEMENT USING INPUT TYPES AND ATTRIBUTES Image credit: http://blog.teamtreehouse.com/use-input-element @duckymatt
  124. 124. ANIMATION AS AN ENHANCEMENT Source / Image credit: Dann Petty: https://dribbble.com/shots/1621359-Open-Close-Icon-Animation @duckymatt
  125. 125. @duckymatt
  126. 126. LOCATION, LOCATION, LOCATION @duckymatt Check out: http://canibbq.com
  127. 127. @duckymatt Check out: http://beforedark.co
  128. 128. CONDITIONAL LOADING GREAT FOR ADAPTIVE EMBEDDING @duckymatt
  129. 129. @duckymatt
  130. 130. WE’LL NEED TO ADAPT TO THESE CHALLENGES Image credit: Paramount Pictures (Airplane!, 1980) @duckymatt
  131. 131. SKETCH @duckymattImage credit: Twentieth Century Fox Films, Paramount Pictures and Lightstorm Entertainment (Titanic, 1997)
  132. 132. @duckymatt PROTOTYPING Image credit: Paramount Pictures, Marvel Studios, Fairview Entertainment and Dark Blades Films (Iron Man, 2008)
  133. 133. http://cyber-duck.github.io/hoisin.scss/ @duckymatt
  134. 134. RESPONSIVE DESIGN GOES MUCH FURTHER THAN MEDIA QUERIES AND FLUID GRIDS Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt
  135. 135. 3 FACTORSImage credit: L.A. Films and HBO (¡Three Amigos!, 1986) @duckymatt
  136. 136. CONTENT STRATEGY PERFORMANCE FUTURE FRIENDLINESS @duckymatt
  137. 137. MAKE TRULY RESPONSIVE EXPERIENCES Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt
  138. 138. THAT WE Image credit: Walt Disney and Pixar Studios. (Up, 2009) @duckymatt
  139. 139. OUR CLIENTS Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt
  140. 140. AND OUR USERS Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) @duckymatt
  141. 141. 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
  142. 142. 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)

×