This is page 4 of 20. Use http://codebase.md/cloudflare/docs/imgs/todomvc-screenshot-3.png?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/assets/img/about/design-principles/design_icon_priorities.svg:
--------------------------------------------------------------------------------
```
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150"><defs><style>.cls-1,.cls-2,.cls-3{fill:#fff;fill-opacity:0.8;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-6{stroke-miterlimit:10;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4,.cls-6{fill:none;}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{fill:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{fill:url(#linear-gradient-7);}.cls-8{fill:#0dd7ff;opacity:0.7;}</style><linearGradient id="linear-gradient" x1="54.5" y1="92.11" x2="82.17" y2="92.11" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="57.83" y1="76.51" x2="85.5" y2="76.51" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="67.83" y1="78.97" x2="95.5" y2="78.97" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="90.83" y1="74.87" x2="90.83" y2="54.12" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="90.83" y1="74.87" x2="90.83" y2="54.12" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="63.33" y1="96.63" x2="63.33" y2="113.5" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="63.33" y1="96.63" x2="63.33" y2="113.5" xlink:href="#linear-gradient"/></defs><title>design_icon_priorities</title><polygon class="cls-1" points="55 94.99 55 104.84 81.67 89.24 81.67 79.38 55 94.99"/><polygon class="cls-2" points="58.33 79.38 58.33 89.24 85 73.64 85 63.78 58.33 79.38"/><polygon class="cls-3" points="68.33 81.85 68.33 91.7 95 76.1 95 66.24 68.33 81.85"/><line class="cls-4" x1="90.83" y1="74.87" x2="90.83" y2="55.2"/><polygon class="cls-5" points="94.92 58.51 94.19 59.2 90.83 55.58 87.48 59.2 86.74 58.51 90.83 54.12 94.92 58.51"/><line class="cls-6" x1="63.33" y1="96.63" x2="63.33" y2="112.42"/><polygon class="cls-7" points="59.24 109.1 59.98 108.42 63.33 112.03 66.69 108.42 67.42 109.1 63.33 113.5 59.24 109.1"/><ellipse class="cls-8" cx="72.19" cy="65.67" rx="1.44" ry="1.43" transform="translate(-25.4 65.94) rotate(-42.45)"/><ellipse class="cls-8" cx="68.14" cy="52.04" rx="1.44" ry="1.43" transform="translate(-17.27 59.64) rotate(-42.45)"/><ellipse class="cls-8" cx="76.8" cy="51.68" rx="1.44" ry="1.43" transform="translate(-14.75 65.39) rotate(-42.45)"/><ellipse class="cls-8" cx="75.15" cy="43.4" rx="1.44" ry="1.43" transform="translate(-9.59 62.1) rotate(-42.45)"/><ellipse class="cls-8" cx="67.44" cy="35.91" rx="1.44" ry="1.43" transform="translate(-6.56 54.94) rotate(-42.45)"/></svg>
```
--------------------------------------------------------------------------------
/content/learn/amp-design-principles.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Design Principles
$order: 1
class: design-principles bg-triangle-primary
$view: /views/design-principles.html
$parent: /content/learn/overview.yaml
subtitle@: These design principles are meant to guide the ongoing design and development of AMP. They should help us make internally consistent decisions.
principles:
- title@: User Experience > Developer Experience > Ease of Implementation.
description@: 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.
icon: design_icon_ux.svg
- title@: Don’t design for a hypothetical faster future browser.
description@: "We’ve chosen to build AMP as a library in the spirit of the [extensible web manifesto](https://github.com/extensibleweb/manifesto/blob/master/README.md) 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."
icon: design_icon_future.svg
- title@: Don’t break the web.
description@: 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.
icon: design_icon_break.svg
- title@: Solve problems on the right layer.
description@: 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.
icon: design_icon_layers.svg
- title@: Only do things if they can be made fast.
description@: Don’t introduce components or features to AMP that can’t reliably run at 60fps or hinder the instant load experience on today’s most common mobile devices.
icon: design_icon_fast.svg
- title@: Prioritise things that improve the user experience – but compromise when needed.
description@: 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.
icon: design_icon_priorities.svg
- title@: No whitelists.
description@: We won’t give any special treatment to specific sites, domains or origins except where needed for security or performance reasons.
icon: design_icon_whitelist.svg
cta:
title@: Get started building
link_text@: Tutorials
link_url: /content/docs/get_started/create.md
```
--------------------------------------------------------------------------------
/assets/img/about/overview/herolines1.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 583.43 522.44"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}</style><linearGradient id="linear-gradient" x1="-24311.97" y1="2492.8" x2="-24009.73" y2="2492.8" gradientTransform="matrix(-0.1, 0.99, 0.99, 0.1, -4781.66, 24166.37)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#247bbd"/><stop offset="0.5" stop-color="#1987fa"/><stop offset="1" stop-color="#29d2fc"/></linearGradient><linearGradient id="linear-gradient-2" x1="11391.28" y1="19859.01" x2="11665.55" y2="19859.01" gradientTransform="matrix(0.27, -0.96, -0.96, -0.27, 16213.33, 16738.28)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#29d2fc"/><stop offset="0.5" stop-color="#1987fa"/><stop offset="1" stop-color="#247bbd"/></linearGradient><linearGradient id="linear-gradient-3" x1="11228.98" y1="19910.37" x2="11503.26" y2="19910.37" gradientTransform="matrix(0.27, -0.96, -0.96, -0.27, 16213.33, 16738.28)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="11390.41" y1="19734.61" x2="11740.61" y2="19734.61" gradientTransform="matrix(0.27, -0.96, -0.96, -0.27, 16213.33, 16738.28)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1987fa"/><stop offset="1" stop-color="#29d2fc"/></linearGradient><linearGradient id="linear-gradient-5" x1="14304.21" y1="15856.27" x2="14610.19" y2="15856.27" gradientTransform="matrix(0.11, -0.99, -0.99, -0.11, 14504.55, 16316.58)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#29d2fc"/><stop offset="0.5" stop-color="#1987fa"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-6" x1="-8517.28" y1="-6982.87" x2="-8316.52" y2="-6982.87" gradientTransform="matrix(-0.27, 0.96, 0.96, 0.27, 4690.66, 10099.78)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#29d2fc"/><stop offset="0.5" stop-color="#29d2fc"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><title>herolines1</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="339.03" y1="256.18" x2="2.77" y2="518.89"/><line class="cls-2" x1="412.56" y1="100.15" x2="148.83" y2="304.57"/><line class="cls-3" x1="318.63" y1="242.11" x2="54.9" y2="446.53"/><line class="cls-4" x1="578.63" y1="69.47" x2="242.36" y2="332.18"/><line class="cls-5" x1="580.66" y1="3.55" x2="244.4" y2="266.25"/><line class="cls-6" x1="381.13" y1="15.21" x2="190.57" y2="164.09"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/_sidebar.scss:
--------------------------------------------------------------------------------
```scss
amp-sidebar {
background: $color-white;
width: 100vw;
.submenu {
background: $color-white;
bottom: 0;
box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.075);
left: 0;
position: fixed;
right: 0;
top: 0;
transform: translateX(100%);
transition: transform 233ms cubic-bezier(0, 0, .21, 1);
}
input:checked + .submenu {
transform: translateX(0);
}
input[type="checkbox"] {
position: absolute;
visibility: hidden;
}
.menu-item {
border-bottom: solid 1px $color-grey-lt;
color: $color-black;
display: block;
position: relative;
text-transform: none;
&:hover {
background: $color-lightgrey;
}
}
.item-layer-1 {
font-size: 35px;
font-weight: 100;
line-height: 44px;
padding: 30px 35px 30px 25px;
}
.item-layer-2,
.item-layer-3 {
font-size: 18px;
font-weight: 300;
line-height: 26px;
padding: 15px 35px 15px 25px;
}
.menu-layer {
&::after {
background: $color-ampblue;
bottom: 0;
content: '';
position: absolute;
right: 0;
top: 0;
width: 13px;
}
.items {
left: 0;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
right: 0;
}
&.primary {
height: 100%;
position: relative;
.items {
bottom: 80px;
top: 60px;
}
}
&.secondary {
z-index: 2;
}
&.tertiary {
z-index: 3;
}
&.secondary,
&.tertiary {
.items {
bottom: 0;
top: 85px;
}
}
}
.has-sub-level {
&::after {
@include sprite(carat)
content: '';
height: 12px;
position: absolute;
right: 35px;
top: calc(50% - 6px);
transform: rotate(90deg) scale(.75);
width: 16px;
}
}
.close-button {
background: url(/static/img/symbols/close.svg) no-repeat center / 18px transparent;
border: 0;
height: 58px;
position: absolute;
right: 13px;
top: 0;
width: 68px;
}
.return-button {
@extend %text-label;
color: $color-grey-ltmd;
font-weight: 300;
left: 25px;
position: absolute;
top: 22px;
&::before {
background: url(/static/img/symbols/return.svg) no-repeat center / contain transparent;
border: 0;
content: '';
display: inline-block;
height: 11px;
margin-right: 5px;
position: relative;
top: 1px;
width: 7px;
}
}
}
.rtl amp-sidebar {
.item-layer-1 {
padding: 30px 35px;
}
.has-sub-level::after {
left: 35px;
right: auto;
transform: rotate(-90deg) scale(.75);
}
.return-button::before {
margin: 0 5px;
transform: rotate(180deg);
}
.submenu {
transform: translateX(-100%);
}
}
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/ads_on_amp/ads_tips.md:
--------------------------------------------------------------------------------
```markdown
---
$title : Tips for Ads on AMP Pages
$order : 1
---
### Placement & Controls: <br /> Optimize your ad placements
- **Create separate ad units** on AMP pages for targeting, reporting, and control purposes.
- **Place the same number of ads** on AMP Pages as your non-AMP pages to generate maximum revenue per page.
- **Place the first ad immediately below the first viewport** ("below the fold") to provide an optimal user experience.
- Unless you’re using advanced CSS or media queries, **ensure your ad units are centered on the page** to provide your users with an optimal mobile web experience.
- **Enable <a href="https://github.com/ampproject/amphtml/tree/master/ads#support-for-multi-size-ad-requests">multi-size ad requests</a>** on your AMP inventory to increase ad auction pressure and drive revenue.
### Demand & Pricing: <br /> Get the right price for your ads
- **Sell ad units on your AMP pages across all sales channels**, including direct and indirect to maximize competition for your inventory on AMP pages.
- **Price your ad inventory on AMP pages** similar to your inventory on non-AMP pages. Monitor performance and adjust pricing accordingly.
- **Ensure all ad demand channels are competing** for ad inventory on your AMP pages to drive up competition.
### Ad Types: <br /> Serve the best types of ads
- **Avoid heavy creatives** per <a href="http://www.iab.com/wp-content/uploads/2015/11/IAB_Display_Mobile_Creative_Guidelines_HTML5_2015.pdf">IAB guidelines</a>.
- **Avoid interstitials** or other ad formats that cause the content to reflow on ad load.
- **Optimize for viewability** by setting the parameter:<br />
<em>data-loading-strategy = prefer-viewability-over-views</em>
- **Place ads in your video content** via [supported players](https://github.com/ampproject/amphtml/blob/master/extensions/README.md#audiovideo) or [`amp-iframe`](https://ampbyexample.com/components/amp-iframe/) to enable revenue on all types of content.
- **Implement native ads** to compete with display ads using multi-sized ad requests, adding demand pressure while providing your readers with a premium user experience.
### Innovation: <br /> Offer the most engaging ad products
- **Implement ads on ancillary AMP pages** to generate incremental revenue:
- [Ads in your AMP Image Carousel](https://github.com/jasti/amp-ads-testing/blob/master/dfp-amp-testing/amp_tests/amp-carousel-demo.html)
- [Ads in your AMP Lightbox](https://github.com/jasti/amp-ads-testing/blob/master/dfp-amp-testing/amp_tests/amp-lightbox-demo.html)
- **Implement new formats for direct sold ads** to equip your sales team with high-impact, innovative ad products:
- [Sticky Ads](https://ampbyexample.com/components/amp-sticky-ad/)
- [Flying Carpet](https://ampbyexample.com/components/amp-fx-flying-carpet/)
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/amp-ads/roi_icon.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 113.95 91.88"><defs><style>.cls-1,.cls-2,.cls-4{fill:none;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8{stroke-miterlimit:10;}.cls-1,.cls-2{stroke-width:5.45px;opacity:0.8;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3,.cls-5,.cls-6,.cls-7,.cls-8{fill:#fff;}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{stroke:url(#linear-gradient-7);}.cls-8{stroke:url(#linear-gradient-8);}.cls-9{fill:#7ad5fc;fill-opacity:0.7;}</style><linearGradient id="linear-gradient" x1="-7593.72" y1="746.84" x2="-7538.03" y2="746.84" gradientTransform="translate(-7293.28 2130.75) rotate(169.95)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0389ff"/><stop offset="0.5" stop-color="#0dd7ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-2" x1="-7611.26" y1="765.38" x2="-7555.57" y2="765.38" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="32.4" y1="47.97" x2="78.95" y2="47.97" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#7ad5fc"/></linearGradient><linearGradient id="linear-gradient-4" x1="54.45" y1="63.25" x2="103.46" y2="14.23" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-5" x1="67.98" y1="36.72" x2="72.93" y2="31.77" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-6" x1="44.98" y1="58.72" x2="49.93" y2="53.77" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-7" x1="83.98" y1="46.72" x2="88.93" y2="41.77" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-8" x1="107.98" y1="23.72" x2="112.93" y2="18.77" xlink:href="#linear-gradient-3"/></defs><title>roi_icon</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="1.42" y1="89.56" x2="50.63" y2="59.49"/><line class="cls-2" x1="15.45" y1="68.24" x2="64.66" y2="38.18"/><polygon class="cls-3" points="32.9 42.93 32.9 81 78.45 53 78.45 14.93 32.9 42.93"/><polyline class="cls-4" points="47.45 56.24 70.45 34.24 86.45 44.24 110.45 21.24"/><circle class="cls-5" cx="70.45" cy="34.24" r="3"/><circle class="cls-6" cx="47.45" cy="56.24" r="3"/><circle class="cls-7" cx="86.45" cy="44.24" r="3"/><circle class="cls-8" cx="110.45" cy="21.24" r="3"/><circle class="cls-9" cx="89.77" cy="21.49" r="1.15"/><circle class="cls-9" cx="94.76" cy="11.15" r="1.15"/><circle class="cls-9" cx="100.1" cy="15.67" r="1.15"/><circle class="cls-9" cx="103.61" cy="9.82" r="1.15"/><circle class="cls-9" cx="103.1" cy="1.15" r="1.15"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/learn/who/advertisers.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: AMP for Advertisers
class: about-who-vertical
$order: 2
$parent: /content/learn/who-uses-amp.yaml
components:
- carousel
vertical_class: advertisers
hero:
title@: If it’s not instant, it’s not fast enough.
paragraph@: "Conversions fall by 12% for every extra second a webpage takes to load.If you want people to engage with your brand and improve the performance of your campaigns, you have to speed things up. AMP offers a way for you to give users a faster experience everywhere -- on ads, landing pages or your entire website."
hero_icon: advertisers/advertisers_icon_intro.svg
hero_icon_width: 64
hero_icon_height: 58
hero_img_base: /static/img/about/who-use-amp/advertisers/advertiser_phone_wired
hero_img_width: 1742
hero_img_height: 1622
triangle_img: advertisers/advertisers_bg.svg
triangle_img_width: 622.5
triangle_img_height: 973
lines_img: advertisers/advertisers_lines.svg
lines_img_width: 640
lines_img_height: 619
why:
title@: Grow engagement and increase conversions with faster experiences
reasons:
- title@: Keep your audience engaged with AMP pages
paragraph@: AMP pages typically load in under one second. That means when your target audience lands on an AMP page, they get what they’re looking for in the moment they’re looking for it. The net result -- they’re more likely to be engaged with and receptive to your brand’s messages, and more likely to take the actions you’re guiding them towards like completing a purchase.
icon: advertisers/advertisers_icon_audience.svg
- title@: Boost your campaign performance with AMP Ads
paragraph@: Even the most memorable creative won’t serve it’s purpose if the ad is slow and disruptive for a user. AMP Ads are a new way of building ads, making them as fast as AMP pages to ensure your ads do what they’re meant to do and deliver the value you’re looking for.
icon: advertisers/advertisers_icon_everywhere.svg
- title@: Maximize ROI everywhere
paragraph@: Building the right ad, landing page or web content takes time. With AMP Ads, your ads can serve on both AMP and non-AMP pages, meaning you can build your AMP Ads once and deliver a memorable brand experience everywhere. Similarly, AMP pages can be built once and distributed across a wide variety of distribution platforms simultaneously.
icon: advertisers/advertisers_icon_ROI.svg
large_cta:
title@: Get started with AMP
subtitle@: Learn more about AMP Ads and building AMP pages for your campaigns and website.
cta@: Learn More
cta_url: /content/learn/who/amp-ads.yaml
lines_left: /static/img/about/who-use-amp/amp-ads/lines_bottom2.svg
lines_left_width: 325
lines_left_height: 303
lines_right: /static/img/about/who-use-amp/amp-ads/lines_bottom1.svg
lines_right_width: 325
lines_right_height: 237
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Configuration d'Analytics
---
## Décidez avant de commencer
Toutes les solutions d'analyse reposent sur la connaissance des données dont vous avez besoin
et sur la façon dont vous comptez analyser ces données. Décidez avant de commencer :
* Est-ce que pour analyser l'engagement des utilisateurs vous allez utiliser des outils d'analyse tiers
ou votre propre solution interne ?
* Quels comportements des utilisateurs allez-vous mesurer pour comprendre l'engagement des utilisateurs ?
### Transmettre les données au fournisseur ou vous les envoyer à vous-même ?
Si vous avez votre propre solution interne pour mesurer l'engagement des utilisateurs,
la seule chose dont vous aurez besoin pour intégrer les analyses AMP à cette solution est une URL.
C'est là que vous enverrez les données.
Vous pouvez également envoyer des données à différentes URL.
Par exemple, vous pouvez envoyer les données sur les vues de page à une URL
et les données d'engagement social à une autre.
Les analyses AMP sont spécialement conçues pour mesurer une seule fois et transmettre ces mesures à autant de destinataires que nécessaire.
Si vous travaillez déjà avec un ou plusieurs fournisseurs de solutions d'analyse,
consultez la
[spécification du composant amp-analytics](/docs/reference/extended/amp-analytics.html)
pour savoir s'ils ont intégré leur solution avec AMP.
Le cas échéant, il suffit de créer un lien vers leurs documents depuis la spécification
et de commencer à suivre les instructions.
Si le fournisseur de solutions d'analyse n'est pas intégré à AMP,
contactez son service de support.
Nous vous encourageons également à [créer un ticket d'incident dans le projet AMP](https://github.com/ampproject/amphtml/issues/new)
pour demander à ce que le fournisseur soit ajouté.
Voir également
[Intégration de vos outils d'analyse dans AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
### De quelles données avez-vous besoin ?
Quelles données sur vos utilisateurs allez-vous capturer pour mesurer l'engagement ?
Vous devez en effet identifier ces données avant de pouvoir les configurer.
Points clés à prendre en compte concernant les données :
* Allez-vous suivre uniquement les vues de page ou d'autres tendances sur l'engagement des utilisateurs
(voir également [amp-pixel ou amp-analytics](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics)) ?
* Quels types de données allez-vous capturer sur vos utilisateurs, votre contenu,
le périphérique ou le navigateur (voir également [Substitution de variables](/docs/guides/analytics/analytics_basics.html#variable-substitution)) ?
* Comment allez-vous identifier vos utilisateurs (voir également [Identification des utilisateurs](/docs/guides/analytics/analytics_basics.html#user-identification)) ?
```
--------------------------------------------------------------------------------
/content/learn/case-studies/washingtonpost.md:
--------------------------------------------------------------------------------
```markdown
---
$order: 0
$title: Washington Post
$date: July 18, 2016
$category: Publishers
$parent: /content/learn/case-studies.html
class: case-study post-detail
components:
- social-share
headline: AMP helps the Washington Post increase returning users from mobile search by 23%
thumb: "case-studies/wapo_thumb.png"
results:
- stat: 23%
description: increase in mobile search users who return within 7 days
- stat: 88%
description: improvement in load time for AMP content versus traditional mobile web
- stat: 1000+
description: articles The Washington Post publishes in AMP HTML daily
logo:
src: "case-studies/wapo_logo.png"
width: 130
height: 20
download: "case-studies/wapo.pdf"
---
<div class="img-right wapo">
<amp-img width="881" height="1318" layout="responsive"
srcset="/static/img/case-studies/washingtonpost_phone.png 881w,
/static/img/case-studies/washingtonpost_phone@1_5x.png 581w,
/static/img/case-studies/[email protected] 441w"
src="/static/img/case-studies/washingtonpost_phone.png">
</amp-img>
</div>
With nearly 55% of their traffic coming from mobile devices, The Washington
Post knows that providing a great reading experience on mobile devices is
critical to their long-term success.
In particular, The Post is focused on making their mobile content load as quickly
as possible, because data shows that people abandon websites after just three
seconds if the content doesn’t load quickly.
In June 2015, The Washington Post joined a group of publishers and technology
companies to create the <a href="https://www.ampproject.org/">Accelerated Mobile
Pages Project</a>, a new open standard for publishing content which loads
instantly, anywhere across the mobile web.
> “We are committed to improving speed across the board,” said David Merrell,
Senior Product Manager at The Washington Post. “If our site takes a long time
to load, it doesn’t matter how great our journalism is, some people will leave
the page before they see what’s there.”
The Post publishes over 1,000 articles in AMP every day, and they’re already
seeing concrete benefits. “We have seen load times average 400 milliseconds,
an 88% improvement over our traditional mobile website. This has made
readers more likely to tap on Washington Post stories because they know
our articles will load consistently fast.”
AMP has been great for retention as well. Traditionally 51% of mobile search
users return to The Washington Post within 7 days. For users who read stories
published in AMP, this number jumps to 63%.
> “Getting started with AMP was easy because it is built on existing web
technologies. And since AMP is not a template based system, we were able
to host our content, style it as we see fit, and easily integrate our existing
advertising, analytics and other business tools,” Merrell said.
```
--------------------------------------------------------------------------------
/assets/sass/_lang_switcher.scss:
--------------------------------------------------------------------------------
```scss
.language {
height: 33px;
left: 100px;
position: relative;
top: -4px;
user-select: none;
section {
border: 0;
padding: 0;
&[expanded] {
.current,
.others-inner {
box-shadow: $header-shadow;
}
.current {
left: 60px;
&::after {
transform: scale(.75);
}
}
}
}
.current {
font-size: 1em;
margin-right: 100px;
text-align: right;
width: 140px;
&::after {
@include sprite(carat-down);
content: '';
display: inline-block;
position: relative;
top: -4px;
transform: scale(.75);
}
}
.others {
padding: 0 50px 50px 50px;
left: -50px;
top: -1px;
}
.others-inner {
background: $color-white;
margin: 0;
div {
width: 200px;
a {
margin: 0 10px;
text-transform: capitalize;
}
&:hover {
background-color: $color-lightgrey;
}
}
}
.current,
.others-inner div {
background-color: transparent;
border: 0;
box-sizing: border-box;
height: auto;
padding: 10px 15px 8px;
&:hover {
a {
text-decoration: none;
}
}
a {
color: $color-black-95;
display: inline-block;
overflow: hidden;
padding: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.rtl .language {
left: auto;
right: 100px;
.current {
margin: 0 0 0 100px;
right: -60px;
}
.others {
left: auto;
right: -50px;
}
section[expanded] .current {
left: auto;
right: 0;
}
.current,
.others-inner div {
a {
background-position: right 6px;
}
}
}
header .language {
align-self: center;
margin-left: 12px;
@media only screen and (max-height: 775px) {
.others-inner div {
padding: 7px 15px;
a {
display: block;
}
}
}
}
amp-sidebar {
.language {
bottom: 15px;
left: 10px;
position: absolute;
top: auto;
section[expanded] {
.current {
left: 0;
}
}
.current a,
.others-inner div a {
color: $color-ampblue;
}
.current {
margin-right: 0;
text-align: left;
&::after {
@include sprite(carat);
top: -5px;
transform: rotate(180deg) scale(.75);
}
}
.others {
box-shadow: 0 0 40px 0 rgba(0,0,0,0.1);
left: 0;
padding: 0;
transform: translateY(-117%);
transform: translateY(calc(-100% - 50px));
.others-inner {
box-shadow: none;
width: 240px;
&::after {
clear: both;
content: '';
display: table;
}
div {
float: left;
width: 120px;
}
}
}
}
}
.rtl amp-sidebar .language {
section[expanded] .current {
right: -50px;
}
}
```
--------------------------------------------------------------------------------
/content/includes/home.yaml:
--------------------------------------------------------------------------------
```yaml
hero:
title@: Building the future web, together.
content@: The AMP Project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.
cta@: Learn about AMP
cta_url: /content/learn/overview.yaml
secondary_cta@: Start Building
secondary_cta_url: /content/docs/get_started/general/create.md
phone_img_base: /static/img/home/home_hero_phone
carousel_title@: The Latest
benefits:
title@: What AMP Provides
cards:
- title@: Higher Performance and Engagement
content@: Web pages and ads published in the AMP open-source format load near instantly, giving users a smooth, more engaging experience on mobile and desktop.
img: /static/img/home/home_icon_performance.svg
img_width: 56
img_height: 103
- title@: Flexibility and Results
content@: Publishers and advertisers can decide how to present their content and what technology vendors to use, all while maintaining and improving key performance indicators.
img: /static/img/home/home_icon_flexibility.svg
img_width: 77
img_height: 92
experience:
title@: A collaborative effort
content@: AMP is built thanks to a deep collaboration with thousands of developers, publishers and websites, distribution platforms and tech companies. More than 1.5B AMP pages have been published to date and 100+ leading analytics, ad tech and CMS providers support the AMP format.
bg_img: /static/img/home/bg_experience.png
phone_img_base: /static/img/home/home_phone_ebay
lines_img: /static/img/home/lines2.svg
success_stories:
title@: A path to success
cards:
- quote@: “If our site takes a long time to load, it doesn’t matter how great our journalism is, some people will leave the page before they see what’s there.”
img: /static/img/home/wapo_logo.png
img_height: 197
img_width: 1280
url@: /content/learn/case-studies/washingtonpost.md
class: wapo
- quote@: “We see our work on AMP as furthering the business need of providing a fast, clean user experience to our audience.”
img_height: 263
img_width: 1298
img: /static/img/home/wired_logo.png
url@: /content/learn/case-studies/wired.md
class: wired
- quote@: “Across Teads’ publisher portfolio, video ads perform significantly better on AMP pages than on the traditional mobile web.”
img_height: 28
img_width: 75
img: /static/img/home/teads_logo.svg
url@: /content/learn/case-studies/teads.md
class: teads
large_cta:
title@: Learn how to build AMP pages and AMP Ads
cta@: Start Building
cta_url: /content/docs/get_started/general/create.md
lines_left: /static/img/home/lines3.svg
lines_left_width: 360
lines_left_height: 377
lines_right: /static/img/home/lines3.svg
lines_right_width: 360
lines_right_height: 377
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/design_icon_break.svg:
--------------------------------------------------------------------------------
```
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150"><defs><style>.cls-1{fill:#0dd7ff;opacity:0.7;}.cls-2,.cls-3,.cls-5,.cls-6,.cls-8{fill:none;}.cls-10,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-8,.cls-9{stroke-miterlimit:10;}.cls-2{stroke:url(#linear-gradient);}.cls-3{stroke:url(#linear-gradient-2);}.cls-10,.cls-4,.cls-7,.cls-9{fill:#fff;}.cls-4{fill-opacity:0.9;stroke:url(#linear-gradient-3);}.cls-5{stroke:url(#linear-gradient-4);}.cls-6{stroke:url(#linear-gradient-5);}.cls-7{opacity:0.9;}.cls-8{stroke:url(#linear-gradient-6);}.cls-9{stroke:url(#linear-gradient-7);}.cls-10{stroke:url(#linear-gradient-8);}</style><linearGradient id="linear-gradient" x1="52.89" y1="73.99" x2="89.17" y2="79.64" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="76.56" y1="51.72" x2="87.22" y2="53.37" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="71.4" y1="84.05" x2="89.38" y2="84.05" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="71.44" y1="84.44" x2="88.76" y2="84.44" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="71.53" y1="83.86" x2="88.68" y2="83.86" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="82.29" y1="80.29" x2="102.61" y2="80.29" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="82.39" y1="80.44" x2="102.18" y2="80.44" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-8" x1="82.72" y1="80.44" x2="101.86" y2="80.44" xlink:href="#linear-gradient"/></defs><title>design_icon_break</title><ellipse class="cls-1" cx="43.02" cy="89.06" rx="1.43" ry="1.44" transform="translate(-50.46 121.36) rotate(-83.27)"/><ellipse class="cls-1" cx="50.69" cy="77.09" rx="1.43" ry="1.44" transform="translate(-31.81 118.4) rotate(-83.27)"/><ellipse class="cls-1" cx="61.82" cy="76.74" rx="1.43" ry="1.44" transform="translate(-21.64 129.14) rotate(-83.27)"/><ellipse class="cls-1" cx="62.44" cy="66.02" rx="1.43" ry="1.44" transform="translate(-10.44 120.29) rotate(-83.27)"/><polygon class="cls-2" points="56 57.54 57.18 106.72 87.22 88.67 87.04 52.52 78.03 45.5 56 57.54"/><polyline class="cls-3" points="78.03 45.5 78.03 57.54 87.04 52.52"/><polygon class="cls-4" points="71.9 74.32 71.9 103.81 88.88 93.78 88.88 64.29 71.9 74.32"/><line class="cls-5" x1="71.9" y1="103.81" x2="88.3" y2="65.08"/><line class="cls-6" x1="71.9" y1="74.47" x2="88.3" y2="93.24"/><polygon class="cls-7" points="82.78 79.03 82.78 92.5 102.11 81.56 102.11 68.09 82.78 79.03"/><polygon class="cls-8" points="82.78 79.03 82.78 92.5 102.11 81.56 102.11 68.09 82.78 79.03"/><line class="cls-9" x1="82.79" y1="92.5" x2="101.79" y2="68.38"/><line class="cls-10" x1="82.79" y1="79.17" x2="101.79" y2="81.71"/></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/adtech/teads_logo.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75.33 28.19"><defs><style>.cls-1{fill:#61b4e4;}.cls-2{fill:#231f20;}.cls-3{fill:#fff;}</style></defs><title>teads_logo</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><path class="cls-1" d="M69.41,3.9A5.92,5.92,0,0,0,65,13.81l-1.07,1.85,2.75-.56A5.93,5.93,0,1,0,69.41,3.9Z"/><path class="cls-2" d="M28.82.55c-.22-.15-.58.09-.59.09a11.21,11.21,0,0,1-3.35,1.1c-2.16.37-4.61.63-4.61.63q-1.74.14-3.36.33a2.53,2.53,0,0,0-.13-2C16.41.25,16,0,15.72,0s-.53.12-.74.67a10.43,10.43,0,0,1-1.43,2.49C5.14,4.53,0,6.94,0,9.14c-.06,2.73,4.5,4.56,4.5,4.56.19.06.25,0,.28,0s-.11-.27-.11-.27C2.11,11.42,2.28,10,2.28,10,2.41,8.31,6.44,7.26,11,6.63c-.82,1.22-1.8,2.79-2.73,4.53C5.8,15.76,4.62,19.74,4.75,23c0,.16.12,4,1.67,5a1.13,1.13,0,0,0,.56.19H7A.51.51,0,0,0,7.37,28a1.31,1.31,0,0,0,.21-1c0-.14,0-.29,0-.46-.15-1.77-.44-5.05,2.16-10.11,1.47-2.87,3-5.61,4.3-7.81.54-.95,1-1.8,1.43-2.53,3.53-.3,6.72-.39,8-.37C26.82,5.83,29,2.14,29,1A.57.57,0,0,0,28.82.55Z"/><path class="cls-2" d="M63.8,22.55a3.42,3.42,0,0,0-.51-1.71,9.86,9.86,0,0,0-2.41-2.46c-1.95-1.44-2.13-2.9-1.86-3.59s1-1.68.06-2.22-2.72,1.26-2.78,3a7.3,7.3,0,0,1-.77,2.78c-.7,1.31-3.51,6.28-5.28,5.73,0,0-.86-.39-.3-2.13s5.69-13.35,1.53-15.3c0,0-2.52-1-3.11.45,0,0,2-.24.63,5.72,0,0-6.86-.66-10,6.74,0,0-2.39,4.52-4.34,4.58,0,0-.78-.15-.36-2.42a32.84,32.84,0,0,1,2.57-7.54s-5.12-4.49-11.49,2.39a9.72,9.72,0,0,0-2.28,4.73s-2.84,3.32-5.93,2.66c0,0-2.69-.27-1.32-5.15,0,0,7.78.51,7.63-3.8,0,0-.12-2.81-4.19-2.19,0,0-4.5.43-7.09,6-.18.43-1.29,3.16-.81,4.76a4.2,4.2,0,0,0,4.39,3.2,9.65,9.65,0,0,0,7.1-3.63s0,3.51,2.87,3.67c0,0,2.37.08,4.35-3.8h0s.08-.16.15-.15a.1.1,0,0,1,.07.11h0c-.08.67-.34,4,2.57,3.88,0,0,2.56.4,5.43-4.47,0,0-.12,4.59,2.79,4.43,0,0,2.65.08,4.56-3.93h0s.06-.12.14-.08h0a.16.16,0,0,1,0,.16c-.13.65-.59,3.79,2.42,3.85h0a3.86,3.86,0,0,0,1.2-.12h0c1.25-.36,3.92-1.92,6.88-8.44,0,0,.18-.45.25-.45s.06,0,.09.12h0A15.07,15.07,0,0,0,58.61,21l.24.27h0c1,1.2,1.43,2.1.06,2.67-.25.08-2.77.88-3-.38,0,0-1.36.45-1.64,1.35a1.29,1.29,0,0,0,.53,1.54l.11.07h0a2.69,2.69,0,0,0,.69.21,9.21,9.21,0,0,0,4.58-.45l.57-.19.06,0h0a4.43,4.43,0,0,0,2.65-2.12h0a3.41,3.41,0,0,0,.3-1.3h0s0,0,0-.05v0Zm-44.62-8.4c1.77-.75,1.53.48,1.53.48-.18,2.6-4.28,3-4.28,3S17.41,14.9,19.18,14.15Zm11.29,6c-1.32,3.86-2.72,3.23-2.72,3.23-2-.9.15-5.21.15-5.21,2.69-5.06,5.33-4.22,5.33-4.22C32.59,14.78,31.78,16.28,30.47,20.14ZM43.4,23.4c-2.37-.32-.27-4.85-.27-4.85,2.6-5.27,5.51-4.64,5.51-4.64C45.94,23,43.4,23.4,43.4,23.4Z"/><path class="cls-3" d="M66.29,11.59a.47.47,0,0,1-.17.38.61.61,0,0,1-.41.15.49.49,0,0,1-.35-.14.46.46,0,0,1-.14-.35.51.51,0,0,1,.16-.39.56.56,0,0,1,.4-.15.5.5,0,0,1,.36.15A.47.47,0,0,1,66.29,11.59Z"/><path class="cls-3" d="M69.75,8.38l-.18.77H68.51L68.1,11a.41.41,0,0,0,0,.08q0,.23.3.23a1.62,1.62,0,0,0,.63-.15l.18.69a2.4,2.4,0,0,1-1,.21q-1,0-1-.8a1.82,1.82,0,0,1,0-.38l.38-1.77-.4,0,.15-.72.42,0,.21-1h.9l-.21,1Z"/><path class="cls-3" d="M73.69,8.38l-2.26,3.71a.81.81,0,0,1-.91-.69l-.56-3h.9L71.25,11h0l.11-.23,1.36-2.4Z"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/home/teads_logo.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75.33 28.19"><defs><style>.cls-1{fill:#61b4e4;}.cls-2{fill:#231f20;}.cls-3{fill:#fff;}</style></defs><title>teads_logo</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><path class="cls-1" d="M69.41,3.9A5.92,5.92,0,0,0,65,13.81l-1.07,1.85,2.75-.56A5.93,5.93,0,1,0,69.41,3.9Z"/><path class="cls-2" d="M28.82.55c-.22-.15-.58.09-.59.09a11.21,11.21,0,0,1-3.35,1.1c-2.16.37-4.61.63-4.61.63q-1.74.14-3.36.33a2.53,2.53,0,0,0-.13-2C16.41.25,16,0,15.72,0s-.53.12-.74.67a10.43,10.43,0,0,1-1.43,2.49C5.14,4.53,0,6.94,0,9.14c-.06,2.73,4.5,4.56,4.5,4.56.19.06.25,0,.28,0s-.11-.27-.11-.27C2.11,11.42,2.28,10,2.28,10,2.41,8.31,6.44,7.26,11,6.63c-.82,1.22-1.8,2.79-2.73,4.53C5.8,15.76,4.62,19.74,4.75,23c0,.16.12,4,1.67,5a1.13,1.13,0,0,0,.56.19H7A.51.51,0,0,0,7.37,28a1.31,1.31,0,0,0,.21-1c0-.14,0-.29,0-.46-.15-1.77-.44-5.05,2.16-10.11,1.47-2.87,3-5.61,4.3-7.81.54-.95,1-1.8,1.43-2.53,3.53-.3,6.72-.39,8-.37C26.82,5.83,29,2.14,29,1A.57.57,0,0,0,28.82.55Z"/><path class="cls-2" d="M63.8,22.55a3.42,3.42,0,0,0-.51-1.71,9.86,9.86,0,0,0-2.41-2.46c-1.95-1.44-2.13-2.9-1.86-3.59s1-1.68.06-2.22-2.72,1.26-2.78,3a7.3,7.3,0,0,1-.77,2.78c-.7,1.31-3.51,6.28-5.28,5.73,0,0-.86-.39-.3-2.13s5.69-13.35,1.53-15.3c0,0-2.52-1-3.11.45,0,0,2-.24.63,5.72,0,0-6.86-.66-10,6.74,0,0-2.39,4.52-4.34,4.58,0,0-.78-.15-.36-2.42a32.84,32.84,0,0,1,2.57-7.54s-5.12-4.49-11.49,2.39a9.72,9.72,0,0,0-2.28,4.73s-2.84,3.32-5.93,2.66c0,0-2.69-.27-1.32-5.15,0,0,7.78.51,7.63-3.8,0,0-.12-2.81-4.19-2.19,0,0-4.5.43-7.09,6-.18.43-1.29,3.16-.81,4.76a4.2,4.2,0,0,0,4.39,3.2,9.65,9.65,0,0,0,7.1-3.63s0,3.51,2.87,3.67c0,0,2.37.08,4.35-3.8h0s.08-.16.15-.15a.1.1,0,0,1,.07.11h0c-.08.67-.34,4,2.57,3.88,0,0,2.56.4,5.43-4.47,0,0-.12,4.59,2.79,4.43,0,0,2.65.08,4.56-3.93h0s.06-.12.14-.08h0a.16.16,0,0,1,0,.16c-.13.65-.59,3.79,2.42,3.85h0a3.86,3.86,0,0,0,1.2-.12h0c1.25-.36,3.92-1.92,6.88-8.44,0,0,.18-.45.25-.45s.06,0,.09.12h0A15.07,15.07,0,0,0,58.61,21l.24.27h0c1,1.2,1.43,2.1.06,2.67-.25.08-2.77.88-3-.38,0,0-1.36.45-1.64,1.35a1.29,1.29,0,0,0,.53,1.54l.11.07h0a2.69,2.69,0,0,0,.69.21,9.21,9.21,0,0,0,4.58-.45l.57-.19.06,0h0a4.43,4.43,0,0,0,2.65-2.12h0a3.41,3.41,0,0,0,.3-1.3h0s0,0,0-.05v0Zm-44.62-8.4c1.77-.75,1.53.48,1.53.48-.18,2.6-4.28,3-4.28,3S17.41,14.9,19.18,14.15Zm11.29,6c-1.32,3.86-2.72,3.23-2.72,3.23-2-.9.15-5.21.15-5.21,2.69-5.06,5.33-4.22,5.33-4.22C32.59,14.78,31.78,16.28,30.47,20.14ZM43.4,23.4c-2.37-.32-.27-4.85-.27-4.85,2.6-5.27,5.51-4.64,5.51-4.64C45.94,23,43.4,23.4,43.4,23.4Z"/><path class="cls-3" d="M66.29,11.59a.47.47,0,0,1-.17.38.61.61,0,0,1-.41.15.49.49,0,0,1-.35-.14.46.46,0,0,1-.14-.35.51.51,0,0,1,.16-.39.56.56,0,0,1,.4-.15.5.5,0,0,1,.36.15A.47.47,0,0,1,66.29,11.59Z"/><path class="cls-3" d="M69.75,8.38l-.18.77H68.51L68.1,11a.41.41,0,0,0,0,.08q0,.23.3.23a1.62,1.62,0,0,0,.63-.15l.18.69a2.4,2.4,0,0,1-1,.21q-1,0-1-.8a1.82,1.82,0,0,1,0-.38l.38-1.77-.4,0,.15-.72.42,0,.21-1h.9l-.21,1Z"/><path class="cls-3" d="M73.69,8.38l-2.26,3.71a.81.81,0,0,1-.91-.69l-.56-3h.9L71.25,11h0l.11-.23,1.36-2.4Z"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/art_direction.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Art direction with srcset, sizes & heights
$order: 4
toc: true
---
[TOC]
## srcset
Use the `srcset` attribute to control an element’s assets
based on varying media expressions.
In particular, use it for all [`amp-img`](/docs/reference/amp-img.html) tags
to specify which image assets to use based on varying screen sizes.
In this simple example,
`srcset` specifies which image to use based on the screen width.
The `w` descriptor tells the browser the width
of each image in the list:
[sourcecode:html]
<amp-img
src="wide.jpg" width="640" height="480"
srcset="wide.jpg 640w,
narrow.jpg 320w">
</amp-img>
[/sourcecode]
{% call callout('Note', type='note') %}
AMP supports srcset with the `w` descriptor across all browsers.
{% endcall %}
Learn more about creating responsive images using `srcset`
in [Using Responsive Images (Now)](http://alistapart.com/article/using-responsive-images-now).
## sizes
You can also use the `sizes` attribute along with `srcset`.
The `sizes` attribute describes how to calculate the element size
based on any media expression.
Based on the element’s calculated size,
the user agent selects the most relative source supplied by the `srcset` attribute.
Consider the following example:
[sourcecode:html]
<amp-img
src="wide.jpg" width="640" height="480"
srcset="wide.jpg 640w,
narrow.jpg 320w"
sizes="(min-width: 650px) 50vw, 100vw">
</amp-img>
[/sourcecode]
The `sizes` attribute defines the element’s width to be 50% the size of the viewport
when the viewport is 650px or more.
For example, if the viewport is 800px,
the element’s width is set to 400px.
The browser then selects the `srcset` resource relative to 400px,
assuming the device pixel ratio is 1,
which in this instance is `narrow.jpg` (320px).
{% call callout('Important', type='caution') %}
When sizes attribute is specified along with width and height,
layout defaults to `responsive`.
{% endcall %}
Learn more about how `sizes` and `srcset` attributes compare
to media queries in this
[Srcset and sizes](https://ericportis.com/posts/2014/srcset-sizes/) blog post.
## heights
All AMP custom elements that allow `responsive` layout, also support the `heights` attribute.
The value of this attribute is a sizes expression based on media expressions
as similar to the [img sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img),
but with two key differences:
1. It applies to the height and not width of the element.
2. Percent values are allowed, e.g. `86%`. If a percent value is used, it indicates the percent
of the element's width.
When the `heights` attribute is specified along with `width` and `height`, the `layout` is defaulted to `responsive`.
An example:
[sourcecode:html]
<amp-img src="https://acme.org/image1.png"
width="320" height="256"
heights="(min-width:500px) 200px, 80%">
</amp-img>
[/sourcecode]
In this example, the height of the element by default will be 80% of the width, but for the viewport
wider than `500px` it will be capped at `200px`.
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/who_lines1.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 579.35 480.56"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{stroke:url(#linear-gradient-7);}.cls-8{stroke:url(#linear-gradient-8);}.cls-9{stroke:url(#linear-gradient-9);}</style><linearGradient id="linear-gradient" x1="-1512.03" y1="24.27" x2="-1265.58" y2="24.27" gradientTransform="translate(1733.66 -116.5) rotate(-9.79)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-2" x1="-1494.47" y1="39.79" x2="-1158.39" y2="39.79" gradientTransform="translate(1733.66 -116.5) rotate(-9.79)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-3" x1="22.83" y1="603.65" x2="147.55" y2="583.14" gradientTransform="translate(98.25 -259.7) rotate(-0.45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-4" x1="-1741.35" y1="133.7" x2="-1584.51" y2="133.7" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="-104.04" y1="635.43" x2="101.68" y2="635.43" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-6" x1="-1593.49" y1="27.27" x2="-1400.76" y2="27.27" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="-1698.78" y1="233.63" x2="-1506.42" y2="233.63" gradientTransform="translate(1733.66 -116.5) rotate(-9.79)" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-8" x1="-1511.77" y1="107.81" x2="-1248.54" y2="107.81" gradientTransform="translate(1733.66 -116.5) rotate(-9.79)" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-9" x1="-1502.12" y1="169.32" x2="-1307.45" y2="169.32" gradientTransform="translate(1733.66 -116.5) rotate(-9.79)" xlink:href="#linear-gradient-3"/></defs><title>who_lines1</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="473.34" y1="37.78" x2="265.08" y2="249.36"/><line class="cls-2" x1="576.14" y1="3.16" x2="290.49" y2="293.35"/><line class="cls-3" x1="240.69" y1="281.12" x2="135.56" y2="384.89"/><line class="cls-4" x1="182.86" y1="230.21" x2="52.51" y2="365.84"/><line class="cls-5" x1="200.95" y1="274.02" x2="3.23" y2="477.42"/><line class="cls-6" x1="182.03" y1="247.17" x2="343.92" y2="82.71"/><line class="cls-7" x1="274.68" y1="303.04" x2="113.57" y2="469.43"/><line class="cls-8" x1="503.17" y1="110.54" x2="280.7" y2="338.3"/><line class="cls-9" x1="459.68" y1="205.04" x2="296.58" y2="373.42"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/advertisers/advertisers_icon_everywhere.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 112.67 77.34"><defs><style>.cls-1,.cls-2,.cls-9{fill:#fff;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-9{stroke-miterlimit:10;}.cls-1,.cls-9{stroke-width:0.81px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8{fill:none;stroke-linecap:round;}.cls-3,.cls-4,.cls-5{stroke-width:1.13px;}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke-dasharray:0 3;stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6,.cls-7,.cls-8{stroke-linejoin:round;}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{stroke:url(#linear-gradient-7);}.cls-8{stroke:url(#linear-gradient-8);}.cls-9{stroke:url(#linear-gradient-9);}</style><linearGradient id="linear-gradient" x1="116.67" y1="6.28" x2="120.32" y2="6.28" gradientTransform="matrix(-1, 0, 0, 1, 147.63, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="34.97" y1="41.22" x2="91.89" y2="41.22" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="71.45" y1="46.79" x2="0" y2="46.79" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="71.45" y1="34.67" x2="0" y2="34.67" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="71.45" y1="6.26" x2="0" y2="6.26" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="45.76" y1="32.27" x2="84.05" y2="32.27" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="52.51" y1="39.54" x2="83.5" y2="39.54" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-8" x1="68.64" y1="43.91" x2="83.42" y2="43.91" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-9" x1="101.48" y1="4.51" x2="120.71" y2="4.51" xlink:href="#linear-gradient"/></defs><title>advertisers_icon_everywhere</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polyline class="cls-1" points="27.72 4.46 27.72 7.7 30.96 7.7"/><polygon class="cls-2" points="112.17 37.58 112.17 76.48 56.24 44.87 56.24 5.97 112.17 37.58"/><line class="cls-3" x1="70.79" y1="46.79" x2="70.79" y2="46.79"/><path class="cls-4" d="M70.77,49.78a13.76,13.76,0,0,1-5.67,9.07c-3.61,2.51-7.94,3.18-12.15,3.48-5.51.38-11.18.18-16.31-2.17A19.21,19.21,0,0,1,25.75,46.8c-.83-4.14.68-9.57,4.33-10.17,3-.5,5.7,2.77,6.51,6.18,1.5,6.35-1.71,13.49-6.81,16.46S15,61.28,10.26,57.6,2.44,47.82,1.2,41.4a31.16,31.16,0,0,1,0-12.65C3.62,18.1,15.17,10.89,24.42,6.85"/><line class="cls-5" x1="25.8" y1="6.26" x2="25.8" y2="6.26"/><line class="cls-6" x1="101.37" y1="42.81" x2="64.09" y2="21.74"/><line class="cls-7" x1="94.62" y1="48.05" x2="64.63" y2="31.03"/><line class="cls-8" x1="78.5" y1="47.97" x2="64.72" y2="39.86"/><polygon class="cls-9" points="44.74 0.41 27.72 0.41 27.72 4.46 44.74 0.41 27.72 4.46 31.77 8.51 44.74 0.41"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/advertisers/advertisers_lines.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640.13 619.31"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{stroke:url(#linear-gradient-7);}.cls-8{stroke:url(#linear-gradient-8);}.cls-9{stroke:url(#linear-gradient-9);}</style><linearGradient id="linear-gradient" x1="3368.27" y1="1278.48" x2="3660.87" y2="1278.48" gradientTransform="matrix(0.99, -0.16, -0.16, -0.99, -2787.5, 2329.44)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="13697.69" y1="-11281.47" x2="13858.75" y2="-11281.47" gradientTransform="matrix(-0.99, 0.16, 0.16, 0.99, 15896.55, 9359.09)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="7283.92" y1="7604.79" x2="7461.68" y2="7604.79" gradientTransform="matrix(-1, 0, 0, 1, 7791.66, -7299.69)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-4" x1="3532.46" y1="890.25" x2="3825.06" y2="890.25" gradientTransform="matrix(-0.99, 0.16, 0.16, 0.99, 3661.64, -1164.68)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="13533.5" y1="-10893.24" x2="13694.57" y2="-10893.24" gradientTransform="matrix(0.99, -0.16, -0.16, -0.99, -15022.42, -8194.33)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="7058.92" y1="7961.24" x2="7236.68" y2="7961.24" gradientTransform="matrix(1, 0, 0, -1, -6917.52, 8464.45)" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-7" x1="3105.18" y1="1564.41" x2="3397.78" y2="1564.41" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-8" x1="13960.78" y1="-11567.4" x2="14121.84" y2="-11567.4" gradientTransform="matrix(-0.99, 0.16, 0.16, 0.99, 15896.55, 9359.09)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-9" x1="7589.92" y1="7365.33" x2="7767.68" y2="7365.33" xlink:href="#linear-gradient-3"/></defs><title>advertisers_lines</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="637.51" y1="615.65" x2="308.62" y2="379.65"/><line class="cls-2" x1="381.59" y1="398.86" x2="559.34" y2="526.42"/><line class="cls-3" x1="332.6" y1="243.11" x2="505.11" y2="367.09"/><line class="cls-4" x1="11.62" y1="192.65" x2="340.51" y2="428.66"/><line class="cls-5" x1="267.54" y1="409.45" x2="89.79" y2="281.89"/><line class="cls-6" x1="316.54" y1="565.2" x2="144.03" y2="441.22"/><line class="cls-7" x1="331.51" y1="376.2" x2="2.62" y2="140.2"/><line class="cls-8" x1="75.59" y1="159.41" x2="253.34" y2="286.96"/><line class="cls-9" x1="26.6" y1="3.65" x2="199.11" y2="127.63"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/learn/who/ad-tech-platforms.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: AMP for Ad Tech Platforms
class: about-who-vertical
$order: 1
$parent: /content/learn/who-uses-amp.yaml
components:
- carousel
vertical_class: adtech centered
hero:
title@: A faster way to grow your business
paragraph@: "The average mobile site takes 19 seconds to load over a 3G connection. Coupled with the fact that conversions fall by 12% for every additional second a webpage takes to load, you can safely assume two things: speed equals performance, and most advertiser campaigns have room to improve. That’s where you come in. As an SSP, DSP, analytics provider, or anything in between, embracing speed means improving campaign performance, delivering quality user experiences, and establishing yourself as the adtech platform for the fast web. Join the hundreds of technology platforms currently supporting the open source AMP ecosystem."
hero_icon: adtech/adtech_icon_intro.svg
hero_icon_width: 76
hero_icon_height: 60
lines_img: adtech/lines.svg
lines_img_width: 410
lines_img_height: 260
users:
- name: Sharethrough
logo: adtech/sharethrough_logo.png
logo_width: 1232
logo_height: 467
class: sharethrough
- name: TripleLift
logo: adtech/triplelift_logo.png
logo_width: 2500
logo_height: 625
class: triplelift
- name: Teads
logo: adtech/teads_logo.svg
logo_width: 75
logo_height: 28
class: teads
- name: Index Exchange
logo: adtech/indexexchange_logo.png
logo_width: 500
logo_height: 131
class: indexexchange
why:
title@: Amplify your impact
reasons:
- title@: Increase your reach
paragraph@: A growing number of publishers and advertisers are adopting AMP to deliver faster and more engaging content to their users. As your clients embrace the speed of AMP and more users consume content on AMP pages, ensure your business is positioned for the future. Integrate your technology with AMP today.
icon: adtech/adtech_icon_reach.svg
- title@: Maximize your revenue
paragraph@: Speeding up ads is the fastest way to boost performance. <a href="https://github.com/ampproject/amphtml/blob/master/ads/google/a4a/docs/a4a-readme.md">AMP Ads</a> load as fast as content, so they are more viewable and more likely to be engaged with. Triplelift saw a 10%+ increase in viewability and engagement with AMP ads. Join the <a href="/learn/who-uses-amp/amp-ads/">AMP Ads Initiative</a> to improve performance and grow your revenue.
icon: adtech/adtech_icon_revenue.svg
- title@: Build for a sustainable future
paragraph@: The AMP Project is an open source initiative to protect the future of the web helping everyone deliver a better, faster user experience. Build a sustainable future for your business on an open, faster web by joining the AMP Project.
icon: adtech/adtech_icon_customize.svg
case:
title@: Adtech success stories
cases:
- filename: teads.md
- filename: plista.md
lines_img: adtech/lines.svg
lines_img_width: 410
lines_img_height: 260
cta:
title@: Get Started Building
link_text@: Tutorials
link_url: /content/docs/get_started/create.md
```
--------------------------------------------------------------------------------
/views/partials/header.html:
--------------------------------------------------------------------------------
```html
<header class="header fixed">
{% include "/views/partials/promo_banner.html" %}
<div class="container">
<div class="nav-container">
<div class="left-nav alt">
<a href="{{g.doc('/content/pages/home.html', locale=doc.locale).url.path}}" class="tab header-title"><span></span></a>
<div class="tabs">
{% for entry in menu %}
<div class="tab{% if doc.pod_path.split('/')[2] == entry.collection %} active{% endif %}">
<a{% if entry.href.startswith('http') %} class="external"{% endif %} href="{% if entry.href.startswith('http') %}{{ entry.get('href') }}{% else %}{{ g.doc(entry.get('href'), locale=doc.locale).url.path }}{% endif %}">{{_(entry.get('copy'))}}</a>
<div class="list-container">
<div class="list-shadow"></div>
<ul>
{% if entry.children %}
{% for subEntry in entry.children %}
<li{% if subEntry.href.startswith('http') %} class="external"{% endif %} {% if subEntry.collection %} class="has-sublist" {% endif %}>
<a href="{% if subEntry.href.startswith('http') %}{{ subEntry.get('href') }}{% elif subEntry.static %}{{ g.static(subEntry.get('href')).url.path }}{% else %}{{ g.doc(subEntry.get('href'), locale=doc.locale).url.path }}{% endif %}" {% if subEntry.href.startswith('http') %} target="_blank" {% endif %}>{{_(subEntry.get('copy'))}}</a>
{% if subEntry.collection %}
<ul class="sublist">
{% set menuCollection = g.collection(subEntry.collection) %}
{% for item in menuCollection.docs(recursive=false, locale=doc.locale) %}
<li{% if item.goto %} class="external"{% endif %}>
{% if item.goto_internal %}
<a href="{{g.doc(item.goto_internal).url.path}}">{{_(item.title)}}</a>
{% else %}
<a href="{{item.goto or item.url.path}}" {% if item.goto %} target="_blank" {% endif %}>{{_(item.title)}}</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% else %}
{% set menuCollection = g.collection(entry.collection) %}
{% for item in menuCollection.docs(recursive=false, locale=doc.locale) %}
{% if item.goto_internal %}
<a href="{{g.doc(item.goto_internal).url.path}}">{{_(item.title)}}</a>
{% else %}
<a href="{{item.goto or item.url.path}}">{{_(item.title)}}</a>
{% endif %}
{% endfor %}
{% endif %}
</ul>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="right alt">
{% include "/views/partials/search.html" %}
{% include "/views/partials/lang_switcher.html" %}
<button class="tab hamburger" id="menu-button" on='tap:sidebar.toggle'></button>
</div>
</div>
</div>
</header>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/publishers/publisher_icon_business.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 93.17 103.55"><defs><style>.cls-1{fill:none;stroke:#0389ff;stroke-miterlimit:10;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-8{stroke-linecap:round;}.cls-2,.cls-3,.cls-4,.cls-5,.cls-8{fill:#fff;stroke-linejoin:round;}.cls-2,.cls-3,.cls-4,.cls-5,.cls-7,.cls-8{fill-opacity:0.7;}.cls-2{stroke:url(#linear-gradient);}.cls-3{stroke:url(#linear-gradient-2);}.cls-4{stroke:url(#linear-gradient-3);}.cls-5{stroke:url(#linear-gradient-4);}.cls-6,.cls-9{opacity:0.7;}.cls-6{fill:url(#linear-gradient-5);}.cls-7{fill:#0dd7ff;}.cls-8{stroke:url(#linear-gradient-6);}.cls-9{fill:url(#linear-gradient-7);}</style><linearGradient id="linear-gradient" x1="3.87" y1="59.85" x2="41.49" y2="59.85" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="8.09" y1="61.02" x2="41.49" y2="61.02" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="13.02" y1="61.72" x2="41.49" y2="61.72" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="9093.2" y1="41.32" x2="9137.62" y2="41.32" gradientTransform="matrix(-1, 0, 0, 1, 9178.07, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="46.13" y1="43.93" x2="56.85" y2="15.25" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="9097.89" y1="59.14" x2="9137.62" y2="59.14" gradientTransform="matrix(-1, 0, 0, 1, 9178.07, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="50.22" y1="19.71" x2="52.87" y2="12.63" xlink:href="#linear-gradient"/></defs><title>publisher_icon_business</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><path class="cls-1" d="M.5,41.62,35,24l-.75-.33a.7.7,0,0,1,0-1.27l8.44-4.22a3.52,3.52,0,0,1,3-.07l.59.26L80,.82l.7,57.68L46.93,76.08l-2.11-1.41L32.16,81l3.52,1.41L1.21,99.3Z"/><polygon class="cls-2" points="4.37 42.32 40.99 20.4 40.99 79.6 4.37 99.3 4.37 42.32"/><polygon class="cls-3" points="8.59 44.66 40.99 20.4 40.99 79.6 8.59 101.64 8.59 44.66"/><polygon class="cls-4" points="13.52 46.07 40.99 20.4 40.99 79.6 13.52 103.05 13.52 46.07"/><polygon class="cls-5" points="84.37 3.05 40.95 20.4 40.95 79.6 84.37 60.02 84.37 3.05"/><polygon class="cls-6" points="45.63 18.14 55.19 13.3 57.48 14.18 57.48 40.68 53.26 37.4 48.86 45.6 48.16 19.11 45.63 18.14"/><circle class="cls-7" cx="70.27" cy="36.99" r="0.81"/><circle class="cls-7" cx="73.78" cy="29.73" r="0.81"/><circle class="cls-7" cx="77.53" cy="32.9" r="0.81"/><circle class="cls-7" cx="80" cy="28.79" r="0.81"/><circle class="cls-7" cx="79.64" cy="22.69" r="0.81"/><circle class="cls-7" cx="82.63" cy="19.28" r="0.81"/><circle class="cls-7" cx="86.14" cy="12.02" r="0.81"/><circle class="cls-7" cx="89.89" cy="15.19" r="0.81"/><circle class="cls-7" cx="92.36" cy="11.08" r="0.81"/><circle class="cls-7" cx="92" cy="4.98" r="0.81"/><polygon class="cls-8" points="79.68 40.91 40.95 20.4 40.95 79.6 79.68 97.89 79.68 40.91"/><polygon class="cls-9" points="57.48 14.18 48.08 19.07 45.63 18.11 55.32 13.22 57.48 14.18"/></g></g></svg>
```
--------------------------------------------------------------------------------
/views/about-overview.html:
--------------------------------------------------------------------------------
```html
{% extends "/views/base.html" %}
{% set navmarkup %}
{% include "/views/partials/breadcrumb-nav.html" %}
{% endset %}
{% block main %}
{{ navmarkup|safe }}
<div class="container xl about-overview-block">
<section class="hero">
<div class="images">
<amp-img class="triangle"
noloading
height=1575
width=1076
layout=responsive
src="/static/img/about/overview/{{doc.hero.triangle_img}}">
</amp-img>
<amp-img class="line1"
noloading
height=522
width=583
layout=responsive
src="/static/img/about/overview/{{doc.hero.line1_img}}">
</amp-img>
<amp-img class="line2"
noloading
height=327
width=359
layout=responsive
src="/static/img/about/overview/{{doc.hero.line2_img}}">
</amp-img>
<amp-img class="phone"
noloading
height=1568
width=1844
layout=responsive
srcset="{{doc.hero.phone_img_base + '.png 1844w'}},
{{doc.hero.phone_img_base + '@1_5x.png 1217w'}},
{{doc.hero.phone_img_base + '@1x.png 922w'}}"
src="{{doc.hero.phone_img_base + '.png'}}">
</amp-img>
</div>
<div class="text">
<h1>{{_(doc.hero.title)}}</h1>
<a class="button" href="{{doc.hero.cta_url}}">
{{_(doc.hero.cta)}}
<span class="arrow"></span>
</a>
</div>
</section>
<section class="core">
<h2 class="h1">{{_(doc.core.title)}}</h2>
<amp-accordion>
{% for component in doc.core.components %}
<section>
<header>
<h4>{{_(component.title)}}</h4>
<div class="subtitle">{{_(component.subtitle)|markdown|safe}}</div>
</header>
<div class="core-content">
<div class="description">{{_(component.description)|markdown|safe}}</div>
{% if component.example %}
{% set example = g.doc(component.example, locale=doc.locale) %}
{{example.html|safe}}
{% endif %}
{% if component.description2 %}
<div class="description">{{_(component.description2)|markdown|safe}}</div>
{% endif %}
</div>
</section>
{% endfor %}
</amp-accordion>
</section>
</div>
<div class="video" id="video">
<amp-img class="line1 desktop-up"
noloading
height=363
width=563
layout=responsive
src="/static/img/about/overview/{{doc.video.line1_img}}">
</amp-img>
<amp-img class="line2 desktop-up"
noloading
height=191
width=254
layout=responsive
src="/static/img/about/overview/{{doc.video.line2_img}}">
</amp-img>
<amp-youtube
data-videoid="{{doc.video.id}}"
layout="responsive"
width="480" height="270">
</amp-youtube>
</div>
{% with cta = doc.cta %}
{% include "/views/partials/footer-cta.html" %}
{% endwith %}
{% include "/views/partials/footer.html" %}
{% endblock %}
```
--------------------------------------------------------------------------------
/assets/sass/_cards.scss:
--------------------------------------------------------------------------------
```scss
.card-container {
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding: 20px 5px;
}
.card {
@extend %text-base;
@extend %text-body;
background: $color-white;
box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.075);
box-sizing: border-box;
display: inline-block;
flex: 0 0 31%; // IE10: calc not allowed in flex
flex: 0 0 calc(33% - 30px);
flex-basis: calc(33% - 30px);
height: 90%;
margin: 10px 5px;
padding: 10px;
position: relative;
transition: transform 0.3s, box-shadow 0.3s;
&::before {
background: $gradient-bold;
content: '';
left: 0;
height: 2px;
position: absolute;
right: 0;
top: -2px;
}
&.centered {
align-items: center;
text-align: center;
}
&:hover {
box-shadow: 0px 3px 50px 0 rgba(0, 0, 0, 0.075);
transform: translateY(-5px);
}
&--spacer {
box-shadow: none;
height: 0;
padding: 0;
&::before {
display: none;
}
&:hover {
box-shadow: none;
}
}
}
.card-inner {
display: inline-flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
width: 100%;
}
.card-type {
color: $color-ampblue;
margin-bottom: 15px;
}
.card-content {
font-weight: 300;
text-transform: none;
}
.card-date {
margin-top: 10px;
}
.card-section-heading {
font-size: 30px;
margin: 50px 10px 0;
}
// for grids in support, build, guides, etc pages
.card-container.grid {
flex-wrap: wrap;
&::after {
content: '';
display: block;
flex: 0 0 31%; //IE 10: calc not allowed in flex
flex: 0 0 calc(33% - 30px);
flex-basis: calc(33% - 30px); // IE 11
margin: 10px 5px;
visibility: hidden;
}
.card {
display: flex;
height: auto;
min-height: 400px;
padding: 0;
&:hover {
.card-link p::before {
animation: .5s 1 cta-line;
}
}
}
.card-inner {
display: flex;
height: auto;
padding: 50px;
width: 100%;
}
.card-title {
display: block;
flex: 1 0 auto;
hyphens: none;
margin-bottom: 1em;
h2 {
font-size: 36px;
}
}
.card-link p {
@extend a.underlined;
color: $color-ampblue;
display: inline;
margin: 0;
padding: 0;
position: relative;
&::before {
bottom: -5px;
height: 2px;
}
}
}
// for case studies
.card-container.case {
.card-inner {
padding: 50px;
}
.card-date {
&::before {
content: ' | ';
display: inline;
margin: 0 12px;
}
}
.card-logo {
align-items: center;
display: flex;
height: 40px;
margin: 1em 0;
}
// .card-title {
// margin-bottom: 1em;
// }
}
@include max-screen($mobile-breakpoint) {
.card-container.grid,
.card-container.case {
.card {
flex: 0 0 48%; // IE10: calc not allowed in flex;
flex: 0 0 calc(50% - 30px);
flex-basis: calc(50% - 30px); // IE 11
}
.card-inner {
// padding: 10%;
}
.card-title {
margin-bottom: 2em;
}
}
.card-section-heading {
margin: 50px 0 0;
}
}
@include max-screen($tablet-portrait-breakpoint) {
.card-container.grid,
.card-container.case {
.card {
flex: 0 0 100%;
margin: 10px 0;
min-height: 300px;
}
}
}
```
--------------------------------------------------------------------------------
/content/learn/who/publishers.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: AMP for Publishers
class: about-who-vertical
$order: 0
$parent: /content/learn/who-uses-amp.yaml
components:
- carousel
vertical_class: publishers
hero:
title@: Improve user engagement with fast, compelling experiences.
paragraph@: Web page speed improves the user experience and <a href="https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/">core business metrics</a>. AMP pages load near instantly enabling you to offer a consistently fast experience across all devices and platforms that link to AMP Pages including Google, Bing, LinkedIn and more. These performance gains often translate in improvements in the numbers that matter, such as time spent on page, return visits and CTRs.
hero_img_base: /static/img/about/who-use-amp/publishers/publisher_phone_cnn
hero_img_width: 1079
hero_img_height: 1316
triangle_img: hero_triangle.png
triangle_img_width: 1424
triangle_img_height: 2095
hero_icon: publishers/publisher_icon_intro.svg
hero_icon_width: 76
hero_icon_height: 60
users:
- name: The New York Times
logo: publishers/nyt_logo.svg
logo_width: 306
logo_height: 40
class: nyt
- name: Globo
logo: publishers/globo_logo.svg
logo_width: 57
logo_height: 33
class: globo
- name: Washington Post
logo: publishers/wapo_logo.png
logo_width: 1280
logo_height: 197
class: wapo
- name: Wired
logo: publishers/wired_logo.png
logo_width: 1298
logo_height: 263
class: wired
why:
title@: How AMP can help publishers
reasons:
- title@: Enable compelling, consistently fast experiences
paragraph@: AMP speeds up content, keeping users engaged irrespective of where they start their journey -- on the publisher’s own website or from platforms that link to AMP pages like Twitter, Google and Pinterest. With faster and more secure ads, AMP ads deliver great advertising experiences too, ensuring every interaction with a publisher’s brand is a compelling one.
icon: publishers/publisher_icon_fast.svg
- title@: Strengthen your business while maintaining control
paragraph@: Publishers implementing AMP can decide how to present their content, what business model to use, what technology vendors to use, while maintaining and often improving key performance indicators, such as time spent on page, return visits, viewability, CTRs and more.
icon: publishers/publisher_icon_simple.svg
- title@: Reduce complexity in your operations.
paragraph@: Building AMP pages is simple and straightforward. You can often convert your entire archive in days especially if you use a popular CMS such as Wordpress and Drupal. Your teams do not need any special skills nor worry about optimizing your code for each distribution platform as the AMP format is fully portable and AMP pages are consistently fast no matter how a user gets to them. Similarly, AMP ads may be built once and run across all pages, including non-AMP pages.
icon: publishers/publisher_icon_business.svg
case:
title@: See how other publishers have found success with AMP
cases:
- filename: washingtonpost.md
- filename: wired.md
cta:
title@: Get Started Building
link_text@: Tutorials
link_url: /content/docs/get_started/create.md
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/design_icon_ux.svg:
--------------------------------------------------------------------------------
```
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150"><defs><style>.cls-1,.cls-4,.cls-5,.cls-6,.cls-7{fill:#fff;}.cls-1,.cls-2,.cls-4,.cls-5,.cls-6,.cls-7,.cls-9{stroke-miterlimit:10;}.cls-1{stroke:url(#linear-gradient);}.cls-2,.cls-9{fill:none;}.cls-2{stroke:url(#linear-gradient-2);}.cls-10,.cls-3{fill:#0dd7ff;}.cls-3{fill-opacity:0.7;}.cls-4,.cls-5,.cls-6,.cls-9{stroke-linecap:round;}.cls-4{stroke:url(#linear-gradient-3);}.cls-5{stroke:url(#linear-gradient-4);}.cls-6{stroke:url(#linear-gradient-5);}.cls-7{fill-opacity:0.8;stroke:url(#linear-gradient-6);}.cls-8{fill:url(#linear-gradient-7);}.cls-9{stroke:#fff;}.cls-10{opacity:0.7;}</style><linearGradient id="linear-gradient" x1="50" y1="83.43" x2="91.22" y2="83.43" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="50.26" y1="67.4" x2="90.96" y2="67.4" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="54.54" y1="80.56" x2="87.71" y2="80.56" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="54.54" y1="85.57" x2="87.71" y2="85.57" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="54.54" y1="90.58" x2="87.71" y2="90.58" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="71.12" y1="80.36" x2="101.78" y2="80.36" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="-73.09" y1="-625.91" x2="-64.04" y2="-625.91" gradientTransform="translate(-39.21 686.8) rotate(19.1)" xlink:href="#linear-gradient"/></defs><title>design_icon_ux</title><polygon class="cls-1" points="50.5 70.41 50.5 118.5 90.72 96.46 90.72 48.36 50.5 70.41"/><line class="cls-2" x1="50.5" y1="78.42" x2="90.72" y2="56.38"/><ellipse class="cls-3" cx="57.2" cy="71.06" rx="1.16" ry="1.16" transform="matrix(0.11, -0.99, 0.99, 0.11, -19.69, 120.14)"/><ellipse class="cls-3" cx="53.98" cy="72.72" rx="1.16" ry="1.16" transform="translate(-24.21 118.42) rotate(-83.72)"/><ellipse class="cls-3" cx="60.42" cy="69.4" rx="1.16" ry="1.16" transform="translate(-15.17 121.86) rotate(-83.72)"/><line class="cls-4" x1="55.04" y1="89.07" x2="87.21" y2="72.04"/><line class="cls-5" x1="55.04" y1="94.08" x2="87.21" y2="77.05"/><line class="cls-6" x1="55.04" y1="99.09" x2="87.21" y2="82.06"/><polygon class="cls-7" points="71.62 77.02 71.62 100.47 101.28 83.71 101.28 60.26 71.62 77.02"/><path class="cls-8" d="M105.05,74.39c-1.09,3.14-3.89,5-6.25,4.21s-3.39-4-2.3-7.16,3.89-5,6.25-4.21S106.14,71.25,105.05,74.39Z"/><polyline class="cls-9" points="99.13 73.77 100.54 74.9 102.51 70.06"/><ellipse class="cls-10" cx="96.02" cy="55.06" rx="1.43" ry="1.44" transform="translate(30.09 143.97) rotate(-83.27)"/><ellipse class="cls-10" cx="103.69" cy="43.09" rx="1.43" ry="1.44" transform="translate(48.75 141.02) rotate(-83.27)"/><ellipse class="cls-10" cx="109.63" cy="49.41" rx="1.43" ry="1.44" transform="translate(47.71 152.5) rotate(-83.27)"/><ellipse class="cls-10" cx="114.82" cy="42.74" rx="1.43" ry="1.44" transform="translate(58.92 151.76) rotate(-83.27)"/><ellipse class="cls-10" cx="115.44" cy="32.02" rx="1.43" ry="1.44" transform="translate(70.12 142.91) rotate(-83.27)"/></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/adtech/adtech_icon_reach.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 143.7 98.71"><defs><style>.cls-1,.cls-11,.cls-2,.cls-4{fill:#fff;}.cls-1,.cls-11,.cls-2,.cls-4,.cls-5,.cls-6,.cls-7{stroke-miterlimit:10;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{opacity:0.9;fill:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-10,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{fill:none;stroke-linecap:round;}.cls-5,.cls-6,.cls-7{stroke-width:1.4px;}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke-dasharray:0 3.7;stroke:url(#linear-gradient-6);}.cls-7{stroke:url(#linear-gradient-7);}.cls-10,.cls-8,.cls-9{stroke-linejoin:round;}.cls-8{stroke:url(#linear-gradient-8);}.cls-9{stroke:url(#linear-gradient-9);}.cls-10{stroke:url(#linear-gradient-10);}.cls-11{stroke:url(#linear-gradient-11);}</style><linearGradient id="linear-gradient" x1="105.5" y1="10.11" x2="110" y2="10.11" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="0" y1="44.36" x2="70" y2="44.36" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="11" y1="48.36" x2="80" y2="48.36" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="19" y1="54.36" x2="89" y2="54.36" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="55.55" y1="60.08" x2="143.7" y2="60.08" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="55.55" y1="45.13" x2="143.7" y2="45.13" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="55.55" y1="10.09" x2="143.7" y2="10.09" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-8" x1="28" y1="44.86" x2="75" y2="44.86" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-9" x1="28" y1="53.36" x2="66" y2="53.36" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-10" x1="28" y1="69.86" x2="46" y2="69.86" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-11" x1="86.76" y1="7.92" x2="110.49" y2="7.92" xlink:href="#linear-gradient"/></defs><title>adtech_icon_reach</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polyline class="cls-1" points="109.5 7.86 109.5 11.86 105.5 11.86"/><polygon class="cls-2" points="0.5 39.86 0.5 87.86 69.5 48.86 69.5 0.86 0.5 39.86"/><polygon class="cls-3" points="11 43.86 11 91.86 80 52.86 80 4.86 11 43.86"/><polygon class="cls-4" points="19.5 49.86 19.5 97.86 88.5 58.86 88.5 10.86 19.5 49.86"/><line class="cls-5" x1="56.36" y1="60.08" x2="56.36" y2="60.08"/><path class="cls-6" d="M56.39,63.78a17,17,0,0,0,7,11.19c4.45,3.09,9.8,3.93,15,4.29,6.79.47,13.79.22,20.12-2.68a23.7,23.7,0,0,0,13.44-16.49c1-5.11-.83-11.81-5.34-12.55-3.76-.62-7,3.41-8,7.63C96.71,63,100.67,71.82,107,75.48S125.2,78,131,73.42s9.64-12.06,11.18-20a38.45,38.45,0,0,0,0-15.6c-2.95-13.15-17.2-22-28.61-27"/><line class="cls-7" x1="111.87" y1="10.09" x2="111.87" y2="10.09"/><line class="cls-8" x1="28.5" y1="57.86" x2="74.5" y2="31.86"/><line class="cls-9" x1="28.5" y1="63.86" x2="65.5" y2="42.86"/><line class="cls-10" x1="28.5" y1="74.86" x2="45.5" y2="64.86"/><polygon class="cls-11" points="88.5 2.86 109.5 2.86 109.5 7.86 88.5 2.86 109.5 7.86 104.5 12.86 88.5 2.86"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/learn/case-studies/terra.md:
--------------------------------------------------------------------------------
```markdown
---
$order: 9
$title: Terra
$date: March 6, 2017
$category: Publishers
$parent: /content/learn/case-studies.html
class: case-study post-detail
components:
- social-share
headline: Terra drives mobile viewership up with AMP
thumb: "case-studies/terra_thumb.jpg"
results:
- stat: 2x
description: Increase in page speed
- stat: 2x
description: More time spent on AMP pages than on other mobile pages (Brazil)
- stat: 3,175%
description: increase in total clicks (all countries)
- stat: 33%
description: increase in clickthrough rate (all countries)
logo:
src: "case-studies/terra_logo.png"
width: 128
height: 95
download: "case-studies/terra.pdf"
---
<div class="img-left">
<amp-img width="800" height="1371" layout="responsive" src="/static/img/case-studies/terra_framed1.png"></amp-img>
</div>
A subsidiary of Telefonica, a global telecommunications enterprise, Terra is the largest online media company in the Spanish-speaking world, offering a valuable, popular resource for news and entertainment to more than 100 million people monthly across Spain, Latin America, and the U.S.
## Solution
As an online media provider in an increasingly mobile world, Terra’s ability to deliver fast-loading, easy-to-read pages, especially on smartphones, is critical to their success. “More than 60 percent of our traffic in the last six months came from mobile” said Guilherme Moser de Souza, a Senior Systems Analyst for Terra.
To meet the demand from mobile, Terra’s development team has been focused on technologies that can deliver an engaging mobile experience, and AMP presented itself as a slam-dunk strategic fit. “Since we had experience running a mobile version of the site from 2010 until 2014, we understood how critical fast performance is to engagement,” said Souza. “AMP offered the promise of a faster, easier-to-use mobile web for our readers and our advertisers. And we rushed to adopt it as soon as possible.”
Working with the Terra Brazil team, Souza and his colleagues began creating the AMP framework, launching AMP pages in the fall of 2016. AMP development, testing, and implementation was completed in two weeks by two engineers.
## Results
<div class="img-right">
<amp-img width="800" height="1371" layout="responsive" src="/static/img/case-studies/terra_framed2.png"></amp-img>
</div>
The initial results on Terra.com.br, which supports their Brazilian market, are impressive. AMP pages load 2X times faster than non-AMP mobile pages. As a result, users are spending 2x more time on AMP pages than non-AMP mobile pages. Recently, Terra began building advertising solutions into its AMP pages, which drove an increase in clicks and clickthrough rates. The first two months of results speak for themselves:
- 3,175% increase in total clicks on AMP pages
- 33% increase in clickthrough rate on AMP pages
“The benefit of AMP is already paying off in terms of our readers’ user experience, our advertisers’ results, and our company’s bottom line,” said Souza. “We’re thrilled at how quickly going AMP has made a difference.” Terra is fulfilling the promise of an instant-everywhere mobile web and it’s making all the difference.
Looking to the future, Terra aims to keep improving their AMP pages, always testing new features and striving to deliver the best possible experience for both their readers and advertisers.
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/who_icon_advertisers.svg:
--------------------------------------------------------------------------------
```
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150"><defs><style>.cls-1,.cls-2,.cls-5,.cls-6{fill:#fff;}.cls-1,.cls-2,.cls-4{stroke-miterlimit:10;}.cls-1{stroke:url(#linear-gradient);}.cls-2,.cls-5,.cls-6,.cls-7{fill-opacity:0.7;}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{opacity:0.9;fill:url(#linear-gradient-3);}.cls-4{fill:none;stroke:url(#linear-gradient-4);}.cls-4,.cls-5,.cls-6{stroke-linecap:round;}.cls-5,.cls-6{stroke-linejoin:round;}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{fill:url(#linear-gradient-7);}.cls-8{fill:#0dd7ff;opacity:0.7;}</style><linearGradient id="linear-gradient" x1="23.76" y1="107.53" x2="130.3" y2="107.53" gradientTransform="translate(-0.07 0.08) rotate(-0.05)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd4ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="24.03" y1="94.02" x2="129.98" y2="94.02" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="52.35" y1="107.11" x2="94.34" y2="76.6" gradientTransform="translate(-0.07 0.08) rotate(-0.05)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd4ff"/></linearGradient><linearGradient id="linear-gradient-4" x1="101.4" y1="106.15" x2="111.96" y2="106.15" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="30.43" y1="54.58" x2="72.53" y2="54.58" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="67.31" y1="69.33" x2="109.41" y2="69.33" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="80.44" y1="68.8" x2="96.64" y2="68.8" xlink:href="#linear-gradient"/></defs><title>who_icon_advertisers</title><polyline class="cls-1" points="24.27 86.59 24.74 94.74 92.43 128 129.81 107.74 129.43 100.5"/><polygon class="cls-2" points="25.18 86.67 93.67 119.71 128.9 100.62 62.36 68.35 25.18 86.67"/><polygon class="cls-3" points="37.79 87.12 84.67 109.99 108.92 96.63 63.24 74.58 37.79 87.12"/><line class="cls-4" x1="101.93" y1="108.89" x2="111.48" y2="103.38"/><path class="cls-5" d="M56.33,75.62,30.92,63.71l0-37.69L72,45.52l0,37.69L62.55,78.4ZM51.45,41.1,36,33.38l0,27.39,15.46,7.71Zm3.87,4.21,11.6,5.61m-11.59-.69,11.6,5.61m-11.59-.69,8.52,4.07"/><path class="cls-6" d="M77.31,93.14,67.83,98l0-37.69,41.08-19.58,0,37.69-25.39,12Z"/><polygon class="cls-7" points="89.09 62.76 87.08 57.88 86.6 64.46 82.63 63.2 84.85 67.81 80.44 70.65 84.51 71.55 81.33 77.4 85.7 74.23 84.98 80.86 87.98 74.84 89.98 79.72 90.46 73.14 94.43 74.41 92.21 69.79 96.63 66.95 92.55 66.05 95.73 60.2 91.36 63.37 92.09 56.74 89.09 62.76"/><ellipse class="cls-8" cx="140.83" cy="52.58" rx="1.83" ry="1.82" transform="translate(-0.87 2.39) rotate(-0.97)"/><ellipse class="cls-8" cx="133.19" cy="69.02" rx="1.83" ry="1.82" transform="translate(-1.15 2.26) rotate(-0.97)"/><ellipse class="cls-8" cx="124.6" cy="62.04" rx="1.83" ry="1.82" transform="translate(-1.03 2.11) rotate(-0.97)"/><ellipse class="cls-8" cx="119.18" cy="71.36" rx="1.83" ry="1.82" transform="translate(-1.19 2.02) rotate(-0.97)"/><ellipse class="cls-8" cx="120.23" cy="85.02" rx="1.83" ry="1.82" transform="translate(-1.42 2.04) rotate(-0.97)"/></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/advertisers/advertisers_icon_audience.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 83.86 93.41"><defs><style>.cls-1{fill:#0dd7ff;}.cls-1,.cls-6{opacity:0.7;}.cls-10,.cls-2,.cls-3,.cls-6,.cls-8,.cls-9{fill:#fff;}.cls-10,.cls-2,.cls-3,.cls-5,.cls-7,.cls-8,.cls-9{stroke-miterlimit:10;}.cls-2{stroke:url(#linear-gradient);}.cls-10,.cls-3{fill-opacity:0.7;}.cls-3{stroke:url(#linear-gradient-2);}.cls-4{fill-opacity:0.9;fill:url(#linear-gradient-3);}.cls-5,.cls-7{fill:none;}.cls-10,.cls-5,.cls-8,.cls-9{stroke-linecap:round;}.cls-5{stroke:url(#linear-gradient-4);}.cls-7{stroke:url(#linear-gradient-5);}.cls-8{stroke:url(#linear-gradient-6);}.cls-9{stroke:url(#linear-gradient-7);}.cls-10{stroke:url(#linear-gradient-8);}</style><linearGradient id="linear-gradient" y1="76.82" x2="83.86" y2="76.82" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd4ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="0.07" y1="66.15" x2="83.74" y2="66.15" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="11.12" y1="64.78" x2="66.96" y2="64.78" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="60.96" y1="75.68" x2="69.46" y2="75.68" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="5830.86" y1="21.36" x2="5859.86" y2="21.36" gradientTransform="matrix(-1, 0, 0, 1, 5902, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-6" x1="5835.36" y1="16.86" x2="5855.36" y2="16.86" xlink:href="#linear-gradient-5"/><linearGradient id="linear-gradient-7" x1="5835.36" y1="21.86" x2="5855.36" y2="21.86" xlink:href="#linear-gradient-5"/><linearGradient id="linear-gradient-8" x1="28.24" y1="43.35" x2="56.78" y2="43.35" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient-5"/></defs><title>advertisers_icon_audience</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><circle class="cls-1" cx="19.25" cy="6.03" r="1.15" transform="translate(6.25 21.46) rotate(-67.28)"/><circle class="cls-1" cx="26.86" cy="14.62" r="1.15" transform="translate(2.99 33.75) rotate(-67.28)"/><circle class="cls-1" cx="20.63" cy="17.8" r="1.15" transform="translate(-3.75 29.96) rotate(-67.28)"/><circle class="cls-1" cx="24.67" cy="23.3" r="1.15" transform="translate(-6.35 37.06) rotate(-67.28)"/><circle class="cls-1" cx="32.86" cy="26.17" r="1.15" transform="translate(-3.97 46.38) rotate(-67.28)"/><polyline class="cls-2" points="0.5 60.27 0.86 66.67 53.99 92.85 83.35 76.95 83.06 71.27"/><polygon class="cls-3" points="1.22 60.33 54.97 86.33 82.64 71.36 30.42 45.97 1.22 60.33"/><polygon class="cls-4" points="11.12 60.69 47.9 78.7 66.96 68.22 31.1 50.86 11.12 60.69"/><line class="cls-5" x1="61.46" y1="77.84" x2="68.96" y2="73.52"/><polygon class="cls-6" points="42.64 0.86 70.64 16.86 70.64 41.86 42.64 25.86 42.64 0.86"/><polygon class="cls-7" points="42.64 0.86 70.64 16.86 70.64 41.86 42.64 25.86 42.64 0.86"/><line class="cls-8" x1="66.14" y1="22.36" x2="47.14" y2="11.36"/><line class="cls-9" x1="66.14" y1="27.36" x2="47.14" y2="16.36"/><path class="cls-10" d="M56.28,47.78,28.74,63.52V38.93L56.28,23.19ZM33.16,44.34,51.85,33.52M33.16,49.26,51.85,38.44M33.16,54.17,43,48.27"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/learn/case-studies/plista.md:
--------------------------------------------------------------------------------
```markdown
---
$order: 4
$title: plista
$date: October 7, 2016
$category: Advertisers
$parent: /content/learn/case-studies.html
class: case-study post-detail
components:
- social-share
headline: plista grows publisher revenue & user engagement with AMP
thumb: "case-studies/plista_thumb.jpg"
featured:
description: ""
results:
- stat: 133%
description: AVG growth in CPMs
- stat: 220%
description: AVG growth in CTRs
logo:
src: "case-studies/plista_logo.png"
width: 90
height: 32
download: "case-studies/plista.pdf"
---
As users increasingly turn to their mobile devices for information, Germany-based native advertising platform plista has seen its mobile revenue grow 10X over the last 3 years. As a content recommendation tool, plista is constantly tweaking its algorithm to help publishers meet their goals. plista offers publishers an all-in-one solution for content distribution using native advertising. With mobile users growing impatient with slow-loading sites, plista was naturally interested in the AMP project for the speed and performance offered by AMP pages.
#### Speed: A new key performance indicator
As a content recommendation tool, plista is constantly tweaking its algorithm to help publishers meet their goals. Through the integration with AMP, plista started tracking a new performance indicator: the load time for its mobile app widgets. Between March and July of 2016, plista conducted A/B tests with 10+ premium publishers, including n-tv.de, faz.net, abendzeitung.de, and golem.de to measure AMP’s impact on web app widget speed and profitability. The study focused on the correlation between speed and click-through rates (CTR) and cost-per-thousand-impressions (CPMs) for publishers.
#### Speed = Revenue
“The results of the tests were impressive”, says Torben Brodt, Director Data Engineering at plista. For one publisher, CTRs were 600% greater after the implementation of AMP, while the average increase for publishers in the test was 220%. CPMs also grew 133% on average, with one client seeing 5X greater returns. Looking at both CTRs and CPMs together, it was clear that publishers in the test were seeing greater overall revenue and engagement after the mobile web app widget was AMPified.
<amp-img width="1296" height="811" layout="responsive" src="/static/img/case-studies/plista_graphic.png"></amp-img>
#### Building the open source project together
“Another big advantage of AMP is its easy implementation and code stability, as well as the supportive open-source community. It took us just a few days to implement AMP and get our first publisher up and running on it,” says Brodt. plista was able to begin preparing the asynchronous code library with extra tracking support the same day it signed its contributor license. The AMP Project provided a locally buildable runtime, tests and documentation to assist in a fast ramp-up, and just one day later, plista submitted its first source code commit (consisting of 20 lines of code and 20 lines of documentation) for review and testing. With easy-to-use code snippets and a quick approval process, publishers were able to implement AMP soon after.
> “From day one, through its publisher test and beyond, plista has found AMP an amazingly fast, easy and effective way to help its publishers significantly increase their bottom lines by speeding up mobile web app widget load times -- which also boosts user engagement and exposure for advertisers”, says Brodt.
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/engagement.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Improve User Engagement
$order: 9
---
Here are some quick tips to improve user engagement with AMP.
### Help readers identify you with consistent branding and rich content across AMP and non-AMP pages
- **Reflect your brand in AMP pages.** Use the same header and design scheme (e.g. colors, spacing, type styles) as in your non-AMP pages to ensure your pages are recognizable and appear legitimate.
- **Feature your most engaging content** when converting your pages. Include key page elements like images, videos, embeds, structured data, comments and social media. Learn how to [include 3rd-party content](https://www.ampproject.org/docs/guides/third_party_components).
- **Keep AMP pages current.** Dynamically update live blogs with [`amp-live-list`](https://www.ampproject.org/docs/reference/components/amp-live-list).
### Optimize for user engagement and retention
- **Provide interactive experiences** on your AMP pages. Use components like [`amp-carousel`](https://www.ampproject.org/docs/reference/components/amp-carousel) to create rich image carousels and [`amp-iframe`](https://www.ampproject.org/docs/reference/components/amp-iframe) to
incorporate interactive elements that AMP does not natively support.
- **Create personalized user journeys.** Offer a login button, and if your content
lives behind a paywall, implement your rules and offers using [`amp-access`](https://www.ampproject.org/docs/reference/components/amp-access).
- **Extend onward journeys.** Link to related or suggested articles and other
relevant sections of your site.
- **Personalize content** by including recommendations through [`amp-list`](https://www.ampproject.org/docs/reference/components/amp-list).
- **Implement a menu** with [`amp-sidebar`](https://www.ampproject.org/docs/reference/components/amp-sidebar) to encourage users to browse the rest
of your site.
- **Help readers share your content** with [`amp-social-share`](https://www.ampproject.org/docs/reference/components/amp-social-share) and your
own share buttons.
- **Cultivate new interactions** such as lead generation, newsletter signup, and
comment support with [`amp-form`](https://www.ampproject.org/docs/reference/components/amp-form).
- **Aim for ad types that offer a good reader experience.** Explore AMP ad
formats such as [`amp-sticky-ad`](https://www.ampproject.org/docs/reference/components/amp-sticky-ad) and [`amp-fx-flying-carpet`](https://www.ampproject.org/docs/reference/components/amp-fx-flying-carpet). Follow ads
monetization [best practices](/docs/guides/ads/ads_tips.html).
- **Drive app downloads.** Include an app install link in a banner with
[`amp-app-banner`](https://www.ampproject.org/docs/reference/components/amp-app-banner).
- **Ensure a fast transition** to your non-AMP Progressive Web App (PWA) site for
readers. Use [`amp-install-serviceworker`](https://www.ampproject.org/docs/reference/components/amp-install-serviceworker) to populate your cache.
### Participate in the open-source AMP Project to help shape its development
- **Watch the AMP roadmap** for updates and features at [ampproject.org/roadmap](https://www.ampproject.org/roadmap).
- **Get involved.** Contribute source code, file bugs, or offer feedback
on [GitHub](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md). Share your input about AMP at [Stack Overflow](https://stackoverflow.com/questions/tagged/amp-html).
- **Learn** how to use AMP components with [AMP by Example](https://ampbyexample.com/).
```
--------------------------------------------------------------------------------
/assets/img/home/home_icon_performance.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.14 102.64"><defs><style>.cls-1,.cls-2{fill:#fff;}.cls-1,.cls-2,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke-miterlimit:10;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{fill-opacity:0.9;fill:url(#linear-gradient-3);}.cls-10,.cls-11,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{fill:none;}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{stroke:url(#linear-gradient-7);}.cls-8{stroke:url(#linear-gradient-8);}.cls-9{stroke:#fff;}.cls-10,.cls-11{stroke-linecap:round;stroke-linejoin:round;}.cls-10{opacity:0.2;stroke:url(#linear-gradient-9);}.cls-11{stroke:url(#linear-gradient-10);}.cls-12{fill:#0dd7ff;fill-opacity:0.7;}</style><linearGradient id="linear-gradient" x1="7.99" y1="27.92" x2="44.99" y2="27.92" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="6.99" y1="65.75" x2="43.99" y2="65.75" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="16.99" y1="42.57" x2="52.99" y2="42.57" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="12.25" y1="21.33" x2="39.73" y2="21.33" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="12.25" y1="25.33" x2="39.73" y2="25.33" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="12.24" y1="32.33" x2="28.73" y2="32.33" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="14.25" y1="65.83" x2="36.73" y2="65.83" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-8" x1="20.25" y1="68.83" x2="31.73" y2="68.83" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-9" x1="-12.12" y1="85.13" x2="15.6" y2="34.04" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-10" x1="-3.32" y1="79.16" x2="6.8" y2="60.51" xlink:href="#linear-gradient"/></defs><title>home_icon_performance</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="8.49 25.57 8.49 50.62 44.49 30.27 44.49 5.22 8.49 25.57"/><polygon class="cls-2" points="7.49 63.4 7.49 88.44 43.49 68.09 43.49 43.05 7.49 63.4"/><polygon class="cls-3" points="16.99 40.23 16.99 65.27 52.99 44.92 52.99 19.88 16.99 40.23"/><line class="cls-4" x1="12.49" y1="28.83" x2="39.49" y2="13.83"/><line class="cls-5" x1="12.49" y1="32.83" x2="39.49" y2="17.83"/><line class="cls-6" x1="12.49" y1="36.83" x2="28.49" y2="27.83"/><line class="cls-7" x1="14.49" y1="71.83" x2="36.49" y2="59.83"/><line class="cls-8" x1="20.49" y1="71.83" x2="31.49" y2="65.83"/><line class="cls-9" x1="23.49" y1="47.83" x2="45.49" y2="35.83"/><line class="cls-9" x1="29.49" y1="47.83" x2="40.49" y2="41.83"/><line class="cls-10" x1="1.74" y1="27.08" x2="1.74" y2="92.08"/><line class="cls-11" x1="1.74" y1="58.33" x2="1.74" y2="81.33"/><circle class="cls-12" cx="1.15" cy="101.49" r="1.15"/><circle class="cls-12" cx="6.14" cy="91.15" r="1.15"/><circle class="cls-12" cx="11.48" cy="95.67" r="1.15"/><circle class="cls-12" cx="14.99" cy="89.82" r="1.15"/><circle class="cls-12" cx="14.48" cy="81.15" r="1.15"/><circle class="cls-12" cx="41.15" cy="21.49" r="1.15"/><circle class="cls-12" cx="46.14" cy="11.15" r="1.15"/><circle class="cls-12" cx="51.48" cy="15.67" r="1.15"/><circle class="cls-12" cx="54.99" cy="9.82" r="1.15"/><circle class="cls-12" cx="54.48" cy="1.15" r="1.15"/></g></g></svg>
```
