AMP: Design & Interactivity Without Sacrificing Speed

Download AMP: Design & Interactivity Without Sacrificing Speed

Post on 18-Mar-2018

449 views

Category:

Internet

3 download

TRANSCRIPT

Design & InteractivityWithout Sacrificing SpeedAbby Beck, DesignerPick 2 G O O D C H E A P F A S T A brief history of web designUgly, links, links, links, slowWEB 1.0Ugly, links, links, links, slowWEB 1.0Ugly, links, links, links, slowWEB 1.0Prettier, faster, pop ups, ads, ads, adsWEB 2.0Prettier, faster, pop ups, ads, ads, adsWEB 2.0Prettier, faster, pop ups, ads, ads, adsWEB 2.0Prettier, faster, pop ups, ads, ads, adsWEB 2.0Beautiful, rich, interactive, shiny, and WEB TODAYBeautiful, rich, interactive, shiny, and WEB TODAYBeautiful, rich, interactive, shiny, and WEB TODAYBeautiful, rich, interactive, shiny, and WEB TODAYBeautiful, rich, interactive, shiny, and WEB TODAYFLASH OF UNSTYLED CONTENTCONTENT SHIFTING9:34 AMveryslowpage.com...still kind of slow, and......still kind of slow, and...SLOW LOADINGNON RESPONSIVE9:34 AMveryslowpage.com9:34 AMveryslowpage.com9:34 AMveryslowpage.comThis 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...19secondshttps://www.doubleclickbygoogle.com/articles/mobile-speed-matters/40%After 3 secondshttp://blog.kissmetrics.com/loading-timeLeave the pagePick 2 G O O D C H E A P F A S T Beautiful, rich, interactive, shiny, AND..WEB TODAY + AMPNO SHIFTING CONTENTBeautiful, rich, interactive, shiny, AND..WEB TODAY + AMPNO SHIFTING CONTENTNO FLASHES OF UNSTYLED CONTENTBeautiful, rich, interactive, shiny, AND..WEB TODAY + AMPNO SHIFTING CONTENTRESPONDS IMMEDIATELYNO FLASHES OF UNSTYLED CONTENTBeautiful, rich, interactive, shiny, AND..WEB TODAY + AMPFASTNO SHIFTING CONTENTRESPONDS IMMEDIATELYNO FLASHES OF UNSTYLED CONTENT and it looks good?AMP average Load time...1second1secondAMP FTWDesign Principles of AMP: What we believe inUSER EXPERIENCE >DEVELOPER EXPERIENCE > EASE OF IMPLEMENTATION When in doubt, do whats best for the end user experience, even if it means that its harder for the page creator to build or for the library developer to implement.DONT DESIGN FOR A HYPOTHETICAL FASTER FUTURE BROWSER Weve 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 todays browsers. When certain optimizations arent possible with todays 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 Dont introduce components or features to AMP that cant reliably run at 60 fps or hinder the instant load experience on todays most common mobile devices.PRIORITIZE THINGS THAT IMPROVE THE USER EXPERIENCEBUT 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 inDONT BREAK THE WEB Ensure that if AMP has outages or problems it doesnt 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. dont 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 wont 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 performanceThe Google AMP Cache can be used to serve cached AMP HTML pages.The AMP JS library ensures the fast rendering of AMP HTML pagesAMP HTML AMP CACHEAMP JSAMP Pages are built with 3 core components:5+ BILLION total AMP pages31 MILLION Domains producing AMP pages90 AMP PAGES created every secondBuilding AMP StartHow do I make this look like my brand?ProblemsHow do I make things interactive?Why do all AMP pages look the same?I dont have time to convert my page to AMP.SolutionA bunch of examples that showcase the possibilities of AMP, are really well designed, have page interactions, but can also be copy and pasted.SolutionA design system!!!Solutionusing 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: 24Styles come and go. Good design is a language, not a style. - Massimo VignelliSAVE DEVELOPMENT TIMEThe importance of a design system SAVE DEVELOPMENT TIMEThe importance of a design system CONSISTENT UI FOR USERSSAVE DEVELOPMENT TIMEThe importance of a design system CONSISTENT UI FOR USERSREDUCES DESIGN DEBTSAVE DEVELOPMENT TIMEThe importance of a design system CONSISTENT UI FOR USERSREDUCES DESIGN DEBTINCREASES SHARED UNDERSTANDINGAMP Start30+ COPY AND PASTE UI COMPONENTS9 TEMPLATES TO CHOOSE FROMFULLY RESPONSIVE SYSTEMAMP Start30+ COPY AND PASTE UI COMPONENTS9 TEMPLATES TO CHOOSE FROMFULLY RESPONSIVE SYSTEMYou can have it all! C H E A P F A S T AMP AMPYou can have it all! C H E A P F A S T G O O D AMP StartAMP AMPPrinciples of AMP StartSAVE DEVELOPMENT TIMEBenefits of AMP Start SAVE DEVELOPMENT TIMEBenefits of AMP Start COPY AND PASTE ONLY WHAT YOU NEEDSAVE DEVELOPMENT TIMEBenefits of AMP Start COPY AND PASTE ONLY WHAT YOU NEEDBAKED IN BEST UX PRACTICESSAVE DEVELOPMENT TIMEBenefits of AMP Start COPY AND PASTE ONLY WHAT YOU NEEDBAKED IN BEST UX PRACTICESBAKED IN BEST AMP DEVELOPMENT PRACTICESAsk your self: How can I ensure that my cool experience doesnt detract from speed? How can I leverage systems design?12HTML Barely any CSSAMP ElementsHTML Basic CSS system Grouped elementsAMP Start +UI ComponentsHTML Basic CSS Grouped elements Full page layouts Multi-page experiencesAMP Start TemplatesHTML Custom CSS Grouped elements Full page layouts Multi-page experiencesAMP Start ThemesSYSTEMSTYLE GUIDESTYLE GUIDECOMPONENTSSIMPLE-BLOGSIMPLE-ARTICLETABLETDESKTOPTHE SCENICTHE SCENICCOMPONENTSCOMPONENTSBECK & GALO - HOMEBECK & GALO - MENUExamples in the wildAMP 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 STARTAround 50,000+ urls use AMP StartFansided 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.BEFOREAFTERJust launchedampstart.comampstart.comampstart.comampstart.comBIKE // LUNE // TRAVELBIKE // LUNE // TRAVELMAGAZINEMAGAZINEamphtml.wordpress.commedium.com/making-internetsComing soonSNEAKPEEKAMPSTORIESWhy 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.orgThank you ,lets do this! Tweet tweet: @abbyrose Git at me: @spacedino