AMP: Design & Interactivity Without Sacrificing Speed
Transcript of AMP: Design & Interactivity Without Sacrificing Speed
![Page 1: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/1.jpg)
Design & InteractivityWithout Sacrificing Speed
Abby Beck, Designer
![Page 2: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/2.jpg)
Pick 2
G O O D
C H E A P F A S T
👍
🏎 🚫 🤑
![Page 3: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/3.jpg)
A brief history of web design
![Page 4: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/4.jpg)
Ugly, links, links, links, slow
WEB 1.0
![Page 5: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/5.jpg)
Ugly, links, links, links, slow
WEB 1.0
![Page 6: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/6.jpg)
Ugly, links, links, links, slow
WEB 1.0
![Page 7: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/7.jpg)
Prettier, faster, pop ups, ads, ads, ads
WEB 2.0
![Page 8: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/8.jpg)
Prettier, faster, pop ups, ads, ads, ads
WEB 2.0
![Page 9: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/9.jpg)
Prettier, faster, pop ups, ads, ads, ads
WEB 2.0
![Page 10: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/10.jpg)
Prettier, faster, pop ups, ads, ads, ads
WEB 2.0
![Page 11: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/11.jpg)
Beautiful, rich, interactive, shiny, and…
WEB TODAY
![Page 12: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/12.jpg)
Beautiful, rich, interactive, shiny, and…
WEB TODAY
![Page 13: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/13.jpg)
Beautiful, rich, interactive, shiny, and…
WEB TODAY
![Page 14: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/14.jpg)
Beautiful, rich, interactive, shiny, and…
WEB TODAY
![Page 15: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/15.jpg)
Beautiful, rich, interactive, shiny, and…
WEB TODAY
![Page 16: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/16.jpg)
FLASH OF UNSTYLED CONTENTCONTENT SHIFTING
9:34 AM
veryslowpage.com
...still kind of slow, and...
![Page 17: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/17.jpg)
...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
![Page 18: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/18.jpg)
Mobile web page average Load time...
![Page 19: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/19.jpg)
19seconds
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
![Page 20: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/20.jpg)
40%After 3 seconds
http://blog.kissmetrics.com/loading-time
😱Leave the page
![Page 21: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/21.jpg)
Pick 2
G O O D
C H E A P F A S T
👍
🏎 🚫 🤑
![Page 22: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/22.jpg)
Beautiful, rich, interactive, shiny, AND..
WEB TODAY + AMP
NO SHIFTING CONTENT
![Page 23: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/23.jpg)
Beautiful, rich, interactive, shiny, AND..
WEB TODAY + AMP
NO SHIFTING CONTENT
NO FLASHES OF UNSTYLED CONTENT
![Page 24: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/24.jpg)
Beautiful, rich, interactive, shiny, AND..
WEB TODAY + AMP
NO SHIFTING CONTENT
RESPONDS IMMEDIATELY
NO FLASHES OF UNSTYLED CONTENT
![Page 25: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/25.jpg)
Beautiful, rich, interactive, shiny, AND..
WEB TODAY + AMP
FASTNO SHIFTING CONTENT
RESPONDS IMMEDIATELY
NO FLASHES OF UNSTYLED CONTENT
![Page 26: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/26.jpg)
… and it
looks good?
![Page 27: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/27.jpg)
AMP average Load time...
![Page 28: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/28.jpg)
1second1
second
AMP FTW
![Page 29: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/29.jpg)
![Page 30: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/30.jpg)
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.
![Page 31: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/31.jpg)
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.
![Page 32: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/32.jpg)
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:
![Page 33: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/33.jpg)
5+ BILLION total AMP pages
31 MILLION Domains producing AMP pages
90 AMP PAGES created every second
![Page 34: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/34.jpg)
Building AMP Start
![Page 35: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/35.jpg)
“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.”
🧐🤨
🤔😼
![Page 36: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/36.jpg)
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….
![Page 37: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/37.jpg)
Solution
🤩A design system!!!
![Page 38: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/38.jpg)
Solution
🤩…using a CSS framework!!!
![Page 39: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/39.jpg)
“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
![Page 40: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/40.jpg)
![Page 41: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/41.jpg)
![Page 42: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/42.jpg)
“Styles come and go. Good design is a
language, not a style.” - Massimo Vignelli
![Page 43: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/43.jpg)
SAVE DEVELOPMENT TIME
The importance of a design system
![Page 44: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/44.jpg)
SAVE DEVELOPMENT TIME
The importance of a design system
CONSISTENT UI FOR USERS
![Page 45: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/45.jpg)
SAVE DEVELOPMENT TIME
The importance of a design system
CONSISTENT UI FOR USERS
REDUCES DESIGN DEBT
![Page 46: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/46.jpg)
SAVE DEVELOPMENT TIME
The importance of a design system
CONSISTENT UI FOR USERS
REDUCES DESIGN DEBT
INCREASES SHARED UNDERSTANDING
![Page 47: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/47.jpg)
AMP Start30+ COPY AND PASTE UI COMPONENTS
9 TEMPLATES TO CHOOSE FROM
FULLY RESPONSIVE SYSTEM
![Page 48: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/48.jpg)
AMP Start30+ COPY AND PASTE UI COMPONENTS
9 TEMPLATES TO CHOOSE FROM
FULLY RESPONSIVE SYSTEM
![Page 49: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/49.jpg)
You can have it all!
C H E A P F A S T 🏎 🚫 🤑
AMP AMP
![Page 50: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/50.jpg)
You can have it all!
C H E A P F A S T 🏎 🚫 🤑
G O O D 👍
AMP Start
AMP AMP
![Page 51: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/51.jpg)
Principles of AMP Start
![Page 52: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/52.jpg)
SAVE DEVELOPMENT TIME
Benefits of AMP Start
![Page 53: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/53.jpg)
SAVE DEVELOPMENT TIME
Benefits of AMP Start
COPY AND PASTE ONLY WHAT YOU NEED
![Page 54: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/54.jpg)
SAVE DEVELOPMENT TIME
Benefits of AMP Start
COPY AND PASTE ONLY WHAT YOU NEED
BAKED IN BEST UX PRACTICES
![Page 55: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/55.jpg)
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
![Page 56: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/56.jpg)
Ask your self:
How can I ensure that my cool experience doesn’t detract from speed?
How can I leverage systems design?
1
2
![Page 57: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/57.jpg)
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
![Page 58: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/58.jpg)
STYLE GUIDE
![Page 59: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/59.jpg)
STYLE GUIDE
![Page 60: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/60.jpg)
COMPONENTS
![Page 61: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/61.jpg)
SIMPLE-BLOG
![Page 62: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/62.jpg)
SIMPLE-ARTICLE
![Page 63: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/63.jpg)
TABLET
![Page 64: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/64.jpg)
DESKTOP
![Page 65: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/65.jpg)
THE SCENIC
![Page 66: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/66.jpg)
THE SCENIC
![Page 67: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/67.jpg)
COMPONENTS
![Page 68: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/68.jpg)
COMPONENTS
![Page 69: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/69.jpg)
BECK & GALO - HOME
![Page 70: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/70.jpg)
BECK & GALO - MENU
![Page 71: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/71.jpg)
Examples in the wild
![Page 72: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/72.jpg)
AMP Start Mobile first, CSS framework with over 30+ ui components and templates.
![Page 73: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/73.jpg)
AMP Start Mobile first, CSS framework with over 30+ ui components and templates.
![Page 74: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/74.jpg)
AMP START
![Page 75: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/75.jpg)
Around 50,000+ urls use AMP Start
Fansided Host over 300+ for professional sports including NFL, NBA, NHL, NASCAR and more.
![Page 76: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/76.jpg)
Myntra Indian fashion and e-commerce marketplace company.
![Page 77: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/77.jpg)
AMP by Example Examples of AMP without all the flare. See the HTML components in use.
![Page 78: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/78.jpg)
BEFORE
![Page 79: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/79.jpg)
AFTER
![Page 80: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/80.jpg)
Just launched
![Page 81: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/81.jpg)
ampstart.com
![Page 82: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/82.jpg)
ampstart.com
![Page 83: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/83.jpg)
ampstart.com
![Page 84: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/84.jpg)
ampstart.com
![Page 85: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/85.jpg)
BIKE // LUNE // TRAVEL
![Page 86: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/86.jpg)
BIKE // LUNE // TRAVEL
![Page 87: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/87.jpg)
MAGAZINE
![Page 88: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/88.jpg)
MAGAZINE
![Page 89: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/89.jpg)
amphtml.wordpress.com
![Page 90: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/90.jpg)
medium.com/making-internets
![Page 91: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/91.jpg)
Coming soon…
![Page 92: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/92.jpg)
SNEA
KPEEK
![Page 93: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/93.jpg)
AMPSTORIES
![Page 94: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/94.jpg)
Why AMP? Why AMP Start?
“I choose AMP user happiness.”
![Page 95: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/95.jpg)
Find us on Git Hub /github.com/ampproject/ampstart
Find us on Twitter @AMPHTML
Find me after this :)
Become a contributor
👋
![Page 96: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/96.jpg)
🤖 AMP Start
ampstart.com
✅ Examples
ampbyexample.com
Some resources
🔎 AMP Docs
ampproject.org
![Page 97: AMP: Design & Interactivity Without Sacrificing Speed](https://reader033.fdocuments.net/reader033/viewer/2022052117/5aadeb9f7f8b9a68458b458f/html5/thumbnails/97.jpg)
Thank you ,let’s do this! ✌
Tweet tweet: @abbyrose Git at me: @spacedino