AMP: Design & Interactivity Without Sacrificing Speed

Download AMP: Design & Interactivity Without Sacrificing Speed

Post on 18-Mar-2018

430 views

Category:

Internet

3 download

TRANSCRIPT

  • Design & Interactivity
 Without Sacrificing Speed Abby Beck, Designer
  • Pick 2 G O O D C H E A P F A S T 👍 🏎 🚫 🤑
  • A brief history of web design
  • Ugly, links, links, links, slow WEB 1.0
  • Ugly, links, links, links, slow WEB 1.0
  • Ugly, links, links, links, slow WEB 1.0
  • Prettier, faster, pop ups, ads, ads, ads WEB 2.0
  • Prettier, faster, pop ups, ads, ads, ads WEB 2.0
  • Prettier, faster, pop ups, ads, ads, ads WEB 2.0
  • Prettier, faster, pop ups, ads, ads, ads WEB 2.0
  • Beautiful, rich, interactive, shiny, and… WEB TODAY
  • Beautiful, rich, interactive, shiny, and… WEB TODAY
  • Beautiful, rich, interactive, shiny, and… WEB TODAY
  • Beautiful, rich, interactive, shiny, and… WEB TODAY
  • Beautiful, rich, interactive, shiny, and… WEB TODAY
  • FLASH OF UNSTYLED CONTENTCONTENT SHIFTING 9:34 AM veryslowpage.com ...still kind of slow, and...
  • ...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 happened. This and that
  • Mobile web page average Load time...
  • 19 seconds https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
  • 40% After 3 seconds http://blog.kissmetrics.com/loading-time 😱 Leave the page
  • Pick 2 G O O D C H E A P F A S T 👍 🏎 🚫 🤑
  • Beautiful, rich, interactive, shiny, AND.. WEB TODAY + AMP NO SHIFTING CONTENT
  • Beautiful, rich, interactive, shiny, AND.. WEB TODAY + AMP NO SHIFTING CONTENT NO FLASHES OF UNSTYLED CONTENT
  • Beautiful, rich, interactive, shiny, AND.. WEB TODAY + AMP NO SHIFTING CONTENT RESPONDS IMMEDIATELY NO FLASHES OF UNSTYLED CONTENT
  • Beautiful, rich, interactive, shiny, AND.. WEB TODAY + AMP FASTNO SHIFTING CONTENT RESPONDS IMMEDIATELY NO FLASHES OF UNSTYLED CONTENT
  • … and it looks good?
  • AMP average Load time...
  • 1 second 1 second AMP FTW
  • 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.
  • 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.
  • 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:
  • 5+ BILLION total AMP pages 31 MILLION Domains producing AMP pages 90 AMP PAGES created every second
  • Building AMP Start
  • “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.” 🧐 🤨 🤔 😼
  • 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….
  • Solution 🤩 A design system!!!
  • Solution 🤩 …using a CSS framework!!!
  • “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
  • “Styles come and go. 
 Good design is a language, not a style.” - Massimo Vignelli
  • SAVE DEVELOPMENT TIME The importance of a design system
  • SAVE DEVELOPMENT TIME The importance of a design system CONSISTENT UI FOR USERS
  • SAVE DEVELOPMENT TIME The importance of a design system CONSISTENT UI FOR USERS REDUCES DESIGN DEBT
  • SAVE DEVELOPMENT TIME The importance of a design system CONSISTENT UI FOR USERS REDUCES DESIGN DEBT INCREASES SHARED UNDERSTANDING
  • AMP Start 30+ COPY AND PASTE UI COMPONENTS 9 TEMPLATES TO CHOOSE FROM FULLY RESPONSIVE SYSTEM
  • AMP Start 30+ COPY AND PASTE UI COMPONENTS 9 TEMPLATES TO CHOOSE FROM FULLY RESPONSIVE SYSTEM
  • You can have it all! C H E A P F A S T 🏎 🚫 🤑 AMP AMP
  • You can have it all! C H E A P F A S T 🏎 🚫 🤑 G O O D 👍 AMP Start AMP AMP
  • Principles of AMP Start
  • SAVE DEVELOPMENT TIME Benefits of AMP Start
  • SAVE DEVELOPMENT TIME Benefits of AMP Start COPY AND PASTE ONLY WHAT YOU NEED
  • SAVE DEVELOPMENT TIME Benefits of AMP Start COPY AND PASTE ONLY WHAT YOU NEED BAKED IN BEST UX PRACTICES
  • 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
  • Ask your self: How can I ensure that my cool experience doesn’t detract from speed? How can I leverage systems design? 1 2
  • 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
  • STYLE GUIDE
  • STYLE GUIDE
  • COMPONENTS
  • SIMPLE-BLOG
  • SIMPLE-ARTICLE
  • TABLET
  • DESKTOP
  • THE SCENIC
  • THE SCENIC
  • COMPONENTS
  • COMPONENTS
  • BECK & GALO - HOME
  • BECK & GALO - MENU
  • Examples in the wild
  • AMP Start Mobile first, CSS framework 
 with over 30+ ui components and templates.
  • AMP Start Mobile first, CSS framework 
 with over 30+ ui components and templates.
  • AMP START
  • Around 50,000+ urls use AMP Start Fansided Host over 300+ for professional sports including NFL, NBA, NHL, NASCAR and more.
  • Myntra Indian fashion and e-commerce marketplace company.
  • AMP by Example Examples of AMP without all the flare. 
 See the HTML components in use.
  • BEFORE
  • AFTER
  • Just launched
  • ampstart.com
  • ampstart.com
  • ampstart.com
  • ampstart.com
  • BIKE // LUNE // TRAVEL
  • BIKE // LUNE // TRAVEL
  • MAGAZINE
  • MAGAZINE
  • amphtml.wordpress.com
  • medium.com/making-internets
  • Coming soon…
  • SN EA K PEEK
  • AMP STORIES
  • Why AMP? Why AMP Start? “I choose AMP 
 user happiness.”
  • Find us on Git Hub /github.com/ampproject/ampstart Find us on Twitter @AMPHTML Find me after this :) Become a contributor 👋
  • 🤖 AMP Start ampstart.com ✅ Examples ampbyexample.com Some resources 🔎 AMP Docs ampproject.org
  • Thank you ,
 let’s do this! ✌ Tweet tweet: @abbyrose Git at me: @spacedino