Download - AMP: Design & Interactivity Without Sacrificing Speed

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

Prettier, faster, pop ups, ads, ads, ads

WEB 2.0

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


WEB TODAY + AMP

NO SHIFTING CONTENT

NO FLASHES OF UNSTYLED CONTENT


WEB TODAY + AMP

NO SHIFTING CONTENT

RESPONDS IMMEDIATELY



WEB TODAY + AMP

FASTNO SHIFTING CONTENT

RESPONDS IMMEDIATELY


… 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



CONSISTENT UI FOR USERS




REDUCES DESIGN DEBT




REDUCES DESIGN DEBT

INCREASES SHARED UNDERSTANDING

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


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

STYLE GUIDE

COMPONENTS

SIMPLE-BLOG

SIMPLE-ARTICLE

TABLET

DESKTOP

THE SCENIC

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

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

Just launched

ampstart.com

BIKE // LUNE // TRAVEL

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

Download - AMP: Design & Interactivity Without Sacrificing Speed

Top Related