Adapting to Responsive Design - UXPA2015
135 likes37,972 views
The document discusses the importance of responsive web design (RWD) beyond just media queries, highlighting the need for content performance and future readiness. It emphasizes that user experience must adapt to the device used for web access, which requires strategic content management and design considerations. Additionally, it mentions the impact of page load speed on user engagement and revenue generation.
Adapting to Responsive Design - UXPA2015
- 1. Image credit: Universal Pictures (Frankenstein, 1931) @duckymatt ADAPTING TO RESPONSIVE DESIGN
- 4. @duckymatt
- 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?
- 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
- 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
- 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
- 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
- 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
- 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
- 61. @duckymatt 90 SECONDS LATER… 54.6MB 1,600 REQUESTS
- 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)
- 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
- 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
- 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
- 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)
- 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
- 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
- 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)
- 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
- 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)