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.

Adapting to Responsive Web Design - Figaro Digital

2 442 vues

Publié le

These are my slides from Figaro Digital on 5th August 2015: http://www.figarodigital.co.uk/seminars.aspx?pkEventID=2e528d70-4eea-4344-b49d-57a544f5399b

Video available here: http://www.figarodigital.co.uk/Video.aspx?v=29ecfc59-8fc4-4505-86b2-5646dcef88f0

Publié dans : Design
  • The Scrambler Unlock Her Legs | 95% Off by Bobby Rio-Rob Judge? ■■■ https://tinyurl.com/unlockherlegss
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Adapting to Responsive Web Design - Figaro Digital

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

×