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.

AMP: Design & Interactivity Without Sacrificing Speed

129 views

Published on

Abby Beck
Google AMP
Overview
Web design shouldn’t be hindered by the need for a fast, smooth loading site. However, all too often web designers find themselves choosing between creative design choices and prioritizing speed. The AMP (Accelerated Mobile Pages) Project has worked with agencies like MetaLab, North Kingdom, and Grain & Mortar to fix this by creating well-designed AMP pages that take full advantage of AMP’s interactive capabilities. Now anyone can access these AMP page templates from AMPstart.com, a library of components and pages all available to download and use across the web. Not only are these pages engaging, they take full advantage of AMP’s components – all ready to be used on your own site. Learn tips for designing a system, why you should use one, and see examples of how they built AMP Start. Join Abby Beck, a senior UX designer from Google to learn more about how you can keep design at the forefront of any web project without sacrificing speed.

Objective
Gain a better understanding of design principles that facilitate good mobile performance.

Target Audience
UX/UI designers

Five Things Audience Members Will Learn
What AMP is
Why AMP is fast and a great tool to use
The design process for a framework
Why using a design system is great / how to use a design system
Tips for optimizing for web

Published in: Internet
  • Be the first to comment

  • Be the first to like this

AMP: Design & Interactivity Without Sacrificing Speed

  1. 1. Design & Interactivity
 Without Sacrificing Speed Abby Beck, Designer
  2. 2. Pick 2 G O O D C H E A PF A S T 👍 🏎 🚫 🤑
  3. 3. A brief history of web design
  4. 4. Ugly, links, links, links, slow WEB 1.0
  5. 5. Ugly, links, links, links, slow WEB 1.0
  6. 6. Ugly, links, links, links, slow WEB 1.0
  7. 7. Prettier, faster, pop ups, ads, ads, ads WEB 2.0
  8. 8. Prettier, faster, pop ups, ads, ads, ads WEB 2.0
  9. 9. Prettier, faster, pop ups, ads, ads, ads WEB 2.0
  10. 10. Prettier, faster, pop ups, ads, ads, ads WEB 2.0
  11. 11. Beautiful, rich, interactive, shiny, and… WEB TODAY
  12. 12. Beautiful, rich, interactive, shiny, and… WEB TODAY
  13. 13. Beautiful, rich, interactive, shiny, and… WEB TODAY
  14. 14. Beautiful, rich, interactive, shiny, and… WEB TODAY
  15. 15. Beautiful, rich, interactive, shiny, and… WEB TODAY
  16. 16. FLASH OF UNSTYLED CONTENT CONTENT SHIFTING 9:34 AM veryslowpage.com ...still kind of slow, and...
  17. 17. ...still kind of slow, and... SLOW LOADINGNON RESPONSIVE 9:34 AM veryslowpage.com 9:34 AM veryslowpage.com 9:34 AM veryslowpage.com This and that happened. Then this and then that. This and that happened. Then this and then that. This and that. This and that happened. Then this and then that. This and that
  18. 18. Mobile web page average Load time...
  19. 19. 19seconds https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
  20. 20. 40% After 3 seconds http://blog.kissmetrics.com/loading-time 😱 Leave the page
  21. 21. Pick 2 G O O D C H E A PF A S T 👍 🏎 🚫 🤑
  22. 22. Beautiful, rich, interactive, shiny, AND.. WEB TODAY + AMP NO SHIFTING CONTENT
  23. 23. Beautiful, rich, interactive, shiny, AND.. WEB TODAY + AMP NO SHIFTING CONTENT NO FLASHES OF UNSTYLED CONTENT
  24. 24. Beautiful, rich, interactive, shiny, AND.. WEB TODAY + AMP NO SHIFTING CONTENT RESPONDS IMMEDIATELY NO FLASHES OF UNSTYLED CONTENT
  25. 25. Beautiful, rich, interactive, shiny, AND.. WEB TODAY + AMP FASTNO SHIFTING CONTENT RESPONDS IMMEDIATELY NO FLASHES OF UNSTYLED CONTENT
  26. 26. … and it looks good?
  27. 27. AMP average Load time...
  28. 28. 1second 1second AMP FTW
  29. 29. Design Principles of AMP: What we believe in USER EXPERIENCE >
 DEVELOPER EXPERIENCE >
 EASE OF IMPLEMENTATION When in doubt, do what’s best for the end user experience, even if it means that it’s harder for the page creator to build or for the library developer to implement. DON’T DESIGN FOR A HYPOTHETICAL FASTER FUTURE BROWSER We’ve chosen to build AMP as a library in the spirit of the Extensible Web Manifesto to be able to fix the web of today, not the web of tomorrow. AMP should be fast in today’s browsers. When certain optimizations aren’t possible with today’s platform, AMP developers should participate in standards development to get these added to the web platform. ONLY DO THINGS IF THEY CAN BE MADE FAST Don’t introduce components or features to AMP that can’t reliably run at 60 fps or hinder the instant load experience on today’s most common mobile devices. PRIORITIZE THINGS THAT IMPROVE THE USER EXPERIENCE—BUT COMPROMISE WHEN NEEDED Some things can be made fast and are still a terrible user experience. AMPs should deliver a fantastic user experience and speed is just one part of that. Only compromise when lack of support for something would stop AMP from being widely used and deployed.
  30. 30. Design Principles of AMP: What we believe in DON’T BREAK THE WEB Ensure that if AMP has outages or problems it doesn’t hurt the rest of the web. That means if the :Google AMP Cache, the URL API or the library fails it should be possible for websites and consumption apps to gracefully degrade. If something works with an AMP cache it should also work without a cache. SOLVE PROBLEMS ON THE RIGHT LAYER E.g. don’t integrate things on the client side, just because that is easier, when the user experience would be better with a server side integration. NO WHITELISTS We won’t give any special treatment to specific sites, domains or origins except where needed for security or performance reasons.
  31. 31. AMP HTML is HTML with some restrictions for reliable performance The Google AMP Cache can be used to serve cached AMP HTML pages. The AMP JS library ensures the fast rendering of AMP HTML pages AMP HTML AMP CACHEAMP JS AMP Pages are built with 3 core components:
  32. 32. 5+ BILLION total AMP pages 31 MILLION Domains producing AMP pages 90 AMP PAGES created every second
  33. 33. Building AMP Start
  34. 34. “How do I make this look like my brand?” Problems “How do I make things interactive?” “Why do all AMP pages look the same?” “I don’t have time to convert my page to AMP.” 🧐 🤨 🤔 😼
  35. 35. Solution 🤩 A bunch of examples that showcase the possibilities of AMP, are really well designed, have page interactions, but can also be copy and pasted….
  36. 36. Solution 🤩 A design system!!!
  37. 37. Solution 🤩 …using a CSS framework!!!
  38. 38. “According to the principles of consistency, systems are more useable and learnable when similar parts are expressed in similar ways, learn new things quickly, and focus attention on the relevant aspects of a task” - Lidwell, Holden and Butler, 2010: 24
  39. 39. “Styles come and go. 
 Good design is a language, not a style.” - Massimo Vignelli
  40. 40. SAVE DEVELOPMENT TIME The importance of a design system
  41. 41. SAVE DEVELOPMENT TIME The importance of a design system CONSISTENT UI FOR USERS
  42. 42. SAVE DEVELOPMENT TIME The importance of a design system CONSISTENT UI FOR USERS REDUCES DESIGN DEBT
  43. 43. SAVE DEVELOPMENT TIME The importance of a design system CONSISTENT UI FOR USERS REDUCES DESIGN DEBT INCREASES SHARED UNDERSTANDING
  44. 44. AMP Start 30+ COPY AND PASTE UI COMPONENTS 9 TEMPLATES TO CHOOSE FROM FULLY RESPONSIVE SYSTEM
  45. 45. AMP Start 30+ COPY AND PASTE UI COMPONENTS 9 TEMPLATES TO CHOOSE FROM FULLY RESPONSIVE SYSTEM
  46. 46. You can have it all! C H E A PF A S T 🏎 🚫 🤑 AMP AMP
  47. 47. You can have it all! C H E A PF A S T 🏎 🚫 🤑 G O O D 👍 AMP Start AMP AMP
  48. 48. Principles of AMP Start
  49. 49. SAVE DEVELOPMENT TIME Benefits of AMP Start
  50. 50. SAVE DEVELOPMENT TIME Benefits of AMP Start COPY AND PASTE ONLY WHAT YOU NEED
  51. 51. SAVE DEVELOPMENT TIME Benefits of AMP Start COPY AND PASTE ONLY WHAT YOU NEED BAKED IN BEST UX PRACTICES
  52. 52. SAVE DEVELOPMENT TIME Benefits of AMP Start COPY AND PASTE ONLY WHAT YOU NEED BAKED IN BEST UX PRACTICES BAKED IN BEST AMP DEVELOPMENT PRACTICES
  53. 53. Ask your self: How can I ensure that my cool experience doesn’t detract from speed? How can I leverage systems design? 1 2
  54. 54. HTML Barely any CSS AMP Elements HTML Basic CSS system Grouped elements AMP Start +
 UI Components HTML Basic CSS Grouped elements Full page layouts Multi-page experiences AMP Start 
 Templates HTML Custom CSS Grouped elements Full page layouts Multi-page experiences AMP Start 
 Themes SYSTEM
  55. 55. STYLE GUIDE
  56. 56. STYLE GUIDE
  57. 57. COMPONENTS
  58. 58. SIMPLE-BLOG
  59. 59. SIMPLE-ARTICLE
  60. 60. TABLET
  61. 61. DESKTOP
  62. 62. THE SCENIC
  63. 63. THE SCENIC
  64. 64. COMPONENTS
  65. 65. COMPONENTS
  66. 66. BECK & GALO - HOME
  67. 67. BECK & GALO - MENU
  68. 68. Examples in the wild
  69. 69. AMP Start Mobile first, CSS framework 
 with over 30+ ui components and templates.
  70. 70. AMP Start Mobile first, CSS framework 
 with over 30+ ui components and templates.
  71. 71. AMP START
  72. 72. Around 50,000+ urls use AMP Start Fansided Host over 300+ for professional sports including NFL, NBA, NHL, NASCAR and more.
  73. 73. Myntra Indian fashion and e-commerce marketplace company.
  74. 74. AMP by Example Examples of AMP without all the flare.
 See the HTML components in use.
  75. 75. BEFORE
  76. 76. AFTER
  77. 77. Just launched
  78. 78. ampstart.com
  79. 79. ampstart.com
  80. 80. ampstart.com
  81. 81. ampstart.com
  82. 82. BIKE // LUNE // TRAVEL
  83. 83. BIKE // LUNE // TRAVEL
  84. 84. MAGAZINE
  85. 85. MAGAZINE
  86. 86. amphtml.wordpress.com
  87. 87. medium.com/making-internets
  88. 88. Coming soon…
  89. 89. NEA PEEK
  90. 90. AMP STORIES
  91. 91. Why AMP? Why AMP Start? “I choose AMP user happiness.”
  92. 92. Find us on Git Hub /github.com/ampproject/ampstart Find us on Twitter @AMPHTML Find me after this :) Become a contributor 👋
  93. 93. 🤖 AMP Start ampstart.com ✅ Examples ampbyexample.com Some resources 🔎 AMP Docs ampproject.org
  94. 94. Thank you ,
 let’s do this! ✌ Tweet tweet: @abbyrose Git at me: @spacedino

×