AMP: Design & Interactivity Without Sacrificing Speed

Design & Interactivity 
Without Sacrificing Speed
Abby Beck, Designer

Pick 2
G O O D
C H E A PF A S T
👍
🏎 🚫 🤑

Ugly, links, links, links, slow
WEB 1.0

Prettier, faster, pop ups, ads, ads, ads
WEB 2.0

Beautiful, rich, interactive, shiny, and…
WEB TODAY

FLASH OF
UNSTYLED CONTENT
CONTENT 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

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

Beautiful, rich, interactive, shiny, AND..
WEB TODAY + AMP
NO SHIFTING
CONTENT

WEB TODAY + AMP
NO SHIFTING
CONTENT
NO FLASHES
OF UNSTYLED
CONTENT

WEB TODAY + AMP
NO SHIFTING
CONTENT
RESPONDS
IMMEDIATELY
NO FLASHES
OF UNSTYLED
CONTENT

WEB TODAY + AMP
FASTNO SHIFTING
CONTENT
RESPONDS
IMMEDIATELY
NO FLASHES
OF UNSTYLED
CONTENT

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

“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

CONSISTENT UI FOR USERS

REDUCES DESIGN DEBT

REDUCES DESIGN DEBT
INCREASES SHARED UNDERSTANDING

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 PF A S T 🏎 🚫 🤑
AMP AMP

You
can have
it all!
C H E A PF A S T 🏎 🚫 🤑
G O O D 👍
AMP Start
AMP AMP

Benefits of AMP Start

COPY AND PASTE ONLY WHAT YOU NEED

BAKED IN BEST UX PRACTICES

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

AMP Start
Mobile first, CSS framework  
with over 30+ ui components and
templates.

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.

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

AMP: Design & Interactivity Without Sacrificing Speed

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de FITC

Mais de FITC (20)

Último

Último (20)

AMP: Design & Interactivity Without Sacrificing Speed