amp: design & interactivity without sacrificing speed
TRANSCRIPT
Design & InteractivityWithout 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...
19seconds
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...
1second1
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 Start30+ COPY AND PASTE UI COMPONENTS
9 TEMPLATES TO CHOOSE FROM
FULLY RESPONSIVE SYSTEM
AMP Start30+ 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…
SNEA
KPEEK
AMPSTORIES
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