This is page 4 of 20. Use http://codebase.md/cloudflare/docs/imgs/%7B%7Bg.doc('/content/latest/%7B%7Bdoc.hero.cta_url%7D%7D?format=md&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
│   │   │   │   └── what_phone@1x.png
│   │   │   └── 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
│   │   │       │   ├── advertiser_phone_wired@1x.png
│   │   │       │   ├── 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
│   │   │       │   ├── publisher_phone_cnn@1x.png
│   │   │       │   ├── 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
│   │   │       └── who_phones_hero@1x.png
│   │   ├── 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
│   │   │   ├── gizmodo_phone1@1x.png
│   │   │   ├── gizmodo_phone2.png
│   │   │   ├── gizmodo_phone2@1_5x.png
│   │   │   ├── gizmodo_phone2@1x.png
│   │   │   ├── 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
│   │   │   ├── relaymedia_phone1@1x.png
│   │   │   ├── relaymedia_phone2.png
│   │   │   ├── relaymedia_phone2@1_5x.png
│   │   │   ├── relaymedia_phone2@1x.png
│   │   │   ├── slate_logo.png
│   │   │   ├── slate_phone1.png
│   │   │   ├── slate_phone1@1_5x.png
│   │   │   ├── slate_phone1@1x.png
│   │   │   ├── slate_phone2.png
│   │   │   ├── slate_phone2@1_5x.png
│   │   │   ├── slate_phone2@1x.png
│   │   │   ├── slate_thumb.jpg
│   │   │   ├── slate.pdf
│   │   │   ├── teads_logo.png
│   │   │   ├── teads_logo2.png
│   │   │   ├── teads_phone.png
│   │   │   ├── teads_phone@1_5x.png
│   │   │   ├── teads_phone@1x.png
│   │   │   ├── 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
│   │   │   ├── washingtonpost_phone@1x.png
│   │   │   ├── wired_logo.png
│   │   │   ├── wired_phone1.png
│   │   │   ├── wired_phone1@1_5x.png
│   │   │   ├── wired_phone1@1x.png
│   │   │   ├── wired_phone2.png
│   │   │   ├── wired_phone2@1_5x.png
│   │   │   ├── wired_phone2@1x.png
│   │   │   ├── 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
│   │   │   ├── home_hero_phone@1x.png
│   │   │   ├── home_icon_flexibility.svg
│   │   │   ├── home_icon_performance.svg
│   │   │   ├── home_phone_ebay.png
│   │   │   ├── home_phone_ebay@1_5x.png
│   │   │   ├── home_phone_ebay@1x.png
│   │   │   ├── 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
│   │   │   ├── contribute@ar.md
│   │   │   ├── contribute@de.md
│   │   │   ├── contribute@es.md
│   │   │   ├── contribute@fr.md
│   │   │   ├── file-a-bug.md
│   │   │   └── github.md
│   │   ├── contribute.md
│   │   ├── get_started
│   │   │   ├── _blueprint.yaml
│   │   │   ├── create
│   │   │   │   ├── _blueprint.yaml
│   │   │   │   ├── basic_markup.md
│   │   │   │   ├── basic_markup@ar.md
│   │   │   │   ├── basic_markup@de.md
│   │   │   │   ├── basic_markup@es.md
│   │   │   │   ├── basic_markup@fr.md
│   │   │   │   ├── basic_markup@id.md
│   │   │   │   ├── basic_markup@it.md
│   │   │   │   ├── basic_markup@ja.md
│   │   │   │   ├── basic_markup@ko.md
│   │   │   │   ├── basic_markup@pl.md
│   │   │   │   ├── basic_markup@pt_BR.md
│   │   │   │   ├── basic_markup@ru.md
│   │   │   │   ├── basic_markup@th.md
│   │   │   │   ├── basic_markup@tr.md
│   │   │   │   ├── basic_markup@zh_CN.md
│   │   │   │   ├── include_image.md
│   │   │   │   ├── include_image@ar.md
│   │   │   │   ├── include_image@de.md
│   │   │   │   ├── include_image@es.md
│   │   │   │   ├── include_image@fr.md
│   │   │   │   ├── include_image@id.md
│   │   │   │   ├── include_image@it.md
│   │   │   │   ├── include_image@ja.md
│   │   │   │   ├── include_image@ko.md
│   │   │   │   ├── include_image@pl.md
│   │   │   │   ├── include_image@pt_BR.md
│   │   │   │   ├── include_image@ru.md
│   │   │   │   ├── include_image@th.md
│   │   │   │   ├── include_image@tr.md
│   │   │   │   ├── include_image@zh_CN.md
│   │   │   │   ├── prepare_for_discovery.md
│   │   │   │   ├── prepare_for_discovery@ar.md
│   │   │   │   ├── prepare_for_discovery@de.md
│   │   │   │   ├── prepare_for_discovery@es.md
│   │   │   │   ├── prepare_for_discovery@fr.md
│   │   │   │   ├── prepare_for_discovery@id.md
│   │   │   │   ├── prepare_for_discovery@it.md
│   │   │   │   ├── prepare_for_discovery@ja.md
│   │   │   │   ├── prepare_for_discovery@ko.md
│   │   │   │   ├── prepare_for_discovery@pl.md
│   │   │   │   ├── prepare_for_discovery@pt_BR.md
│   │   │   │   ├── prepare_for_discovery@ru.md
│   │   │   │   ├── prepare_for_discovery@th.md
│   │   │   │   ├── prepare_for_discovery@tr.md
│   │   │   │   ├── prepare_for_discovery@zh_CN.md
│   │   │   │   ├── presentation_layout.md
│   │   │   │   ├── presentation_layout@ar.md
│   │   │   │   ├── presentation_layout@de.md
│   │   │   │   ├── presentation_layout@es.md
│   │   │   │   ├── presentation_layout@fr.md
│   │   │   │   ├── presentation_layout@id.md
│   │   │   │   ├── presentation_layout@it.md
│   │   │   │   ├── presentation_layout@ja.md
│   │   │   │   ├── presentation_layout@ko.md
│   │   │   │   ├── presentation_layout@pl.md
│   │   │   │   ├── presentation_layout@pt_BR.md
│   │   │   │   ├── presentation_layout@ru.md
│   │   │   │   ├── presentation_layout@th.md
│   │   │   │   ├── presentation_layout@tr.md
│   │   │   │   ├── presentation_layout@zh_CN.md
│   │   │   │   ├── preview_and_validate.md
│   │   │   │   ├── preview_and_validate@ar.md
│   │   │   │   ├── preview_and_validate@de.md
│   │   │   │   ├── preview_and_validate@es.md
│   │   │   │   ├── preview_and_validate@fr.md
│   │   │   │   ├── preview_and_validate@id.md
│   │   │   │   ├── preview_and_validate@it.md
│   │   │   │   ├── preview_and_validate@ja.md
│   │   │   │   ├── preview_and_validate@ko.md
│   │   │   │   ├── preview_and_validate@pl.md
│   │   │   │   ├── preview_and_validate@pt_BR.md
│   │   │   │   ├── preview_and_validate@ru.md
│   │   │   │   ├── preview_and_validate@th.md
│   │   │   │   ├── preview_and_validate@tr.md
│   │   │   │   ├── preview_and_validate@zh_CN.md
│   │   │   │   ├── publish.md
│   │   │   │   ├── publish@ar.md
│   │   │   │   ├── publish@de.md
│   │   │   │   ├── publish@es.md
│   │   │   │   ├── publish@fr.md
│   │   │   │   ├── publish@id.md
│   │   │   │   ├── publish@it.md
│   │   │   │   ├── publish@ja.md
│   │   │   │   ├── publish@ko.md
│   │   │   │   ├── publish@pl.md
│   │   │   │   ├── publish@pt_BR.md
│   │   │   │   ├── publish@ru.md
│   │   │   │   ├── publish@th.md
│   │   │   │   ├── publish@tr.md
│   │   │   │   └── publish@zh_CN.md
│   │   │   ├── create.md
│   │   │   ├── create@ar.md
│   │   │   ├── create@de.md
│   │   │   ├── create@es.md
│   │   │   ├── create@fr.md
│   │   │   ├── create@id.md
│   │   │   ├── create@it.md
│   │   │   ├── create@ja.md
│   │   │   ├── create@ko.md
│   │   │   ├── create@pl.md
│   │   │   ├── create@pt_BR.md
│   │   │   ├── create@ru.md
│   │   │   ├── create@th.md
│   │   │   ├── create@tr.md
│   │   │   ├── create@zh_CN.md
│   │   │   ├── live_blog.md
│   │   │   ├── live_blog@ko.md
│   │   │   ├── login_requiring
│   │   │   │   ├── _blueprint.yaml
│   │   │   │   ├── add_comment.md
│   │   │   │   ├── add_comment@ko.md
│   │   │   │   ├── login.md
│   │   │   │   ├── login@ko.md
│   │   │   │   ├── logout.md
│   │   │   │   ├── logout@ko.md
│   │   │   │   ├── summary.md
│   │   │   │   └── summary@ko.md
│   │   │   ├── login_requiring.md
│   │   │   └── login_requiring@ko.md
│   │   ├── getting-started.md
│   │   ├── guides
│   │   │   ├── _blueprint.yaml
│   │   │   ├── author_develop
│   │   │   │   ├── _blueprint.yaml
│   │   │   │   ├── ads_on_amp
│   │   │   │   │   ├── _blueprint.yaml
│   │   │   │   │   ├── ads_getting_started.md
│   │   │   │   │   ├── ads_getting_started@ko.md
│   │   │   │   │   ├── ads_tips.md
│   │   │   │   │   └── ads_tips@ko.md
│   │   │   │   ├── ads_on_amp.md
│   │   │   │   ├── ads_on_amp@ko.md
│   │   │   │   ├── amp_replacements.md
│   │   │   │   ├── amp_replacements@ko.md
│   │   │   │   ├── iframes.md
│   │   │   │   ├── iframes@ko.md
│   │   │   │   ├── responsive_amp
│   │   │   │   │   ├── _blueprint.yaml
│   │   │   │   │   ├── art_direction.md
│   │   │   │   │   ├── art_direction@ko.md
│   │   │   │   │   ├── control_layout.md
│   │   │   │   │   ├── control_layout@ar.md
│   │   │   │   │   ├── control_layout@de.md
│   │   │   │   │   ├── control_layout@es.md
│   │   │   │   │   ├── control_layout@fr.md
│   │   │   │   │   ├── control_layout@id.md
│   │   │   │   │   ├── control_layout@it.md
│   │   │   │   │   ├── control_layout@ja.md
│   │   │   │   │   ├── control_layout@ko.md
│   │   │   │   │   ├── control_layout@pl.md
│   │   │   │   │   ├── control_layout@pt_BR.md
│   │   │   │   │   ├── control_layout@ru.md
│   │   │   │   │   ├── control_layout@th.md
│   │   │   │   │   ├── control_layout@tr.md
│   │   │   │   │   ├── control_layout@zh_CN.md
│   │   │   │   │   ├── custom_fonts.md
│   │   │   │   │   ├── custom_fonts@ko.md
│   │   │   │   │   ├── placeholders.md
│   │   │   │   │   ├── placeholders@ko.md
│   │   │   │   │   ├── style_pages.md
│   │   │   │   │   ├── style_pages@ar.md
│   │   │   │   │   ├── style_pages@de.md
│   │   │   │   │   ├── style_pages@es.md
│   │   │   │   │   ├── style_pages@fr.md
│   │   │   │   │   ├── style_pages@id.md
│   │   │   │   │   ├── style_pages@it.md
│   │   │   │   │   ├── style_pages@ja.md
│   │   │   │   │   ├── style_pages@ko.md
│   │   │   │   │   ├── style_pages@pl.md
│   │   │   │   │   ├── style_pages@pt_BR.md
│   │   │   │   │   ├── style_pages@ru.md
│   │   │   │   │   ├── style_pages@th.md
│   │   │   │   │   ├── style_pages@tr.md
│   │   │   │   │   └── style_pages@zh_CN.md
│   │   │   │   ├── responsive_amp.md
│   │   │   │   ├── responsive_amp@ar.md
│   │   │   │   ├── responsive_amp@de.md
│   │   │   │   ├── responsive_amp@es.md
│   │   │   │   ├── responsive_amp@fr.md
│   │   │   │   ├── responsive_amp@id.md
│   │   │   │   ├── responsive_amp@it.md
│   │   │   │   ├── responsive_amp@ja.md
│   │   │   │   ├── responsive_amp@ko.md
│   │   │   │   ├── responsive_amp@pl.md
│   │   │   │   ├── responsive_amp@pt_BR.md
│   │   │   │   ├── responsive_amp@ru.md
│   │   │   │   ├── responsive_amp@th.md
│   │   │   │   ├── responsive_amp@tr.md
│   │   │   │   ├── responsive_amp@zh_CN.md
│   │   │   │   ├── third_party_components.md
│   │   │   │   ├── third_party_components@ar.md
│   │   │   │   ├── third_party_components@de.md
│   │   │   │   ├── third_party_components@es.md
│   │   │   │   ├── third_party_components@fr.md
│   │   │   │   ├── third_party_components@id.md
│   │   │   │   ├── third_party_components@it.md
│   │   │   │   ├── third_party_components@ja.md
│   │   │   │   ├── third_party_components@ko.md
│   │   │   │   ├── third_party_components@pl.md
│   │   │   │   ├── third_party_components@pt_BR.md
│   │   │   │   ├── third_party_components@ru.md
│   │   │   │   ├── third_party_components@th.md
│   │   │   │   ├── third_party_components@tr.md
│   │   │   │   └── third_party_components@zh_CN.md
│   │   │   ├── author_develop.md
│   │   │   ├── debug
│   │   │   │   ├── _blueprint.yaml
│   │   │   │   ├── validate.md
│   │   │   │   ├── validate@ar.md
│   │   │   │   ├── validate@de.md
│   │   │   │   ├── validate@es.md
│   │   │   │   ├── validate@fr.md
│   │   │   │   ├── validate@id.md
│   │   │   │   ├── validate@it.md
│   │   │   │   ├── validate@ja.md
│   │   │   │   ├── validate@ko.md
│   │   │   │   ├── validate@pl.md
│   │   │   │   ├── validate@pt_BR.md
│   │   │   │   ├── validate@ru.md
│   │   │   │   ├── validate@th.md
│   │   │   │   ├── validate@tr.md
│   │   │   │   └── validate@zh_CN.md
│   │   │   ├── debug.md
│   │   │   ├── deploy
│   │   │   │   ├── _blueprint.yaml
│   │   │   │   ├── analytics_amp
│   │   │   │   │   ├── _blueprint.yaml
│   │   │   │   │   ├── analytics_basics.md
│   │   │   │   │   ├── analytics_basics@ar.md
│   │   │   │   │   ├── analytics_basics@de.md
│   │   │   │   │   ├── analytics_basics@es.md
│   │   │   │   │   ├── analytics_basics@fr.md
│   │   │   │   │   ├── analytics_basics@id.md
│   │   │   │   │   ├── analytics_basics@it.md
│   │   │   │   │   ├── analytics_basics@ja.md
│   │   │   │   │   ├── analytics_basics@ko.md
│   │   │   │   │   ├── analytics_basics@pl.md
│   │   │   │   │   ├── analytics_basics@pt_BR.md
│   │   │   │   │   ├── analytics_basics@ru.md
│   │   │   │   │   ├── analytics_basics@th.md
│   │   │   │   │   ├── analytics_basics@tr.md
│   │   │   │   │   ├── analytics_basics@zh_CN.md
│   │   │   │   │   ├── deep_dive_analytics.md
│   │   │   │   │   ├── deep_dive_analytics@ar.md
│   │   │   │   │   ├── deep_dive_analytics@de.md
│   │   │   │   │   ├── deep_dive_analytics@es.md
│   │   │   │   │   ├── deep_dive_analytics@fr.md
│   │   │   │   │   ├── deep_dive_analytics@id.md
│   │   │   │   │   ├── deep_dive_analytics@it.md
│   │   │   │   │   ├── deep_dive_analytics@ja.md
│   │   │   │   │   ├── deep_dive_analytics@ko.md
│   │   │   │   │   ├── deep_dive_analytics@pl.md
│   │   │   │   │   ├── deep_dive_analytics@pt_BR.md
│   │   │   │   │   ├── deep_dive_analytics@ru.md
│   │   │   │   │   ├── deep_dive_analytics@th.md
│   │   │   │   │   ├── deep_dive_analytics@tr.md
│   │   │   │   │   ├── deep_dive_analytics@zh_CN.md
│   │   │   │   │   ├── use_cases.md
│   │   │   │   │   ├── use_cases@ar.md
│   │   │   │   │   ├── use_cases@de.md
│   │   │   │   │   ├── use_cases@es.md
│   │   │   │   │   ├── use_cases@fr.md
│   │   │   │   │   ├── use_cases@id.md
│   │   │   │   │   ├── use_cases@it.md
│   │   │   │   │   ├── use_cases@ja.md
│   │   │   │   │   ├── use_cases@ko.md
│   │   │   │   │   ├── use_cases@pl.md
│   │   │   │   │   ├── use_cases@pt_BR.md
│   │   │   │   │   ├── use_cases@ru.md
│   │   │   │   │   ├── use_cases@th.md
│   │   │   │   │   ├── use_cases@tr.md
│   │   │   │   │   └── use_cases@zh_CN.md
│   │   │   │   ├── analytics_amp.md
│   │   │   │   ├── analytics_amp@ar.md
│   │   │   │   ├── analytics_amp@de.md
│   │   │   │   ├── analytics_amp@es.md
│   │   │   │   ├── analytics_amp@fr.md
│   │   │   │   ├── analytics_amp@id.md
│   │   │   │   ├── analytics_amp@it.md
│   │   │   │   ├── analytics_amp@ja.md
│   │   │   │   ├── analytics_amp@ko.md
│   │   │   │   ├── analytics_amp@pl.md
│   │   │   │   ├── analytics_amp@pt_BR.md
│   │   │   │   ├── analytics_amp@ru.md
│   │   │   │   ├── analytics_amp@th.md
│   │   │   │   ├── analytics_amp@tr.md
│   │   │   │   ├── analytics_amp@zh_CN.md
│   │   │   │   ├── discovery.md
│   │   │   │   ├── discovery@ar.md
│   │   │   │   ├── discovery@de.md
│   │   │   │   ├── discovery@es.md
│   │   │   │   ├── discovery@fr.md
│   │   │   │   ├── discovery@id.md
│   │   │   │   ├── discovery@it.md
│   │   │   │   ├── discovery@ja.md
│   │   │   │   ├── discovery@ko.md
│   │   │   │   ├── discovery@pl.md
│   │   │   │   ├── discovery@pt_BR.md
│   │   │   │   ├── discovery@ru.md
│   │   │   │   ├── discovery@th.md
│   │   │   │   ├── discovery@tr.md
│   │   │   │   ├── discovery@zh_CN.md
│   │   │   │   ├── engagement.md
│   │   │   │   └── engagement@ko.md
│   │   │   ├── 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
│   │   │   ├── experimental@ar.md
│   │   │   ├── experimental@de.md
│   │   │   ├── experimental@es.md
│   │   │   ├── experimental@fr.md
│   │   │   ├── experimental@id.md
│   │   │   ├── experimental@it.md
│   │   │   ├── experimental@ja.md
│   │   │   ├── experimental@pl.md
│   │   │   ├── experimental@pt_BR.md
│   │   │   ├── experimental@ru.md
│   │   │   ├── experimental@th.md
│   │   │   ├── experimental@tr.md
│   │   │   ├── experimental@zh_CN.md
│   │   │   ├── validation_errors.md
│   │   │   ├── validation_errors@ar.md
│   │   │   ├── validation_errors@de.md
│   │   │   ├── validation_errors@es.md
│   │   │   ├── validation_errors@fr.md
│   │   │   ├── validation_errors@id.md
│   │   │   ├── validation_errors@it.md
│   │   │   ├── validation_errors@ja.md
│   │   │   ├── validation_errors@pl.md
│   │   │   ├── validation_errors@pt_BR.md
│   │   │   ├── validation_errors@ru.md
│   │   │   ├── validation_errors@th.md
│   │   │   ├── validation_errors@tr.md
│   │   │   └── 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
│   │   ├── about-amp@ar.md
│   │   ├── about-amp@de.md
│   │   ├── about-amp@es.md
│   │   ├── about-amp@fr.md
│   │   ├── about-amp@id.md
│   │   ├── about-amp@it.md
│   │   ├── about-amp@ja.md
│   │   ├── about-amp@ko.md
│   │   ├── about-amp@pl.md
│   │   ├── about-amp@pt_BR.md
│   │   ├── about-amp@ru.md
│   │   ├── about-amp@th.md
│   │   ├── about-amp@tr.md
│   │   ├── about-amp@zh_CN.md
│   │   ├── about-how.yaml
│   │   ├── about-how@ar.yaml
│   │   ├── about-how@es.yaml
│   │   ├── about-how@fr.yaml
│   │   ├── about-how@id.yaml
│   │   ├── about-how@it.yaml
│   │   ├── about-how@ja.yaml
│   │   ├── about-how@ko.yaml
│   │   ├── about-how@pl.yaml
│   │   ├── about-how@pt_BR.yaml
│   │   ├── about-how@ru.yaml
│   │   ├── about-how@th.yaml
│   │   ├── about-how@tr.yaml
│   │   ├── 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
│   │   ├── how-amp-works@ar.md
│   │   ├── how-amp-works@es.md
│   │   ├── how-amp-works@fr.md
│   │   ├── how-amp-works@id.md
│   │   ├── how-amp-works@it.md
│   │   ├── how-amp-works@ja.md
│   │   ├── how-amp-works@ko.md
│   │   ├── how-amp-works@pl.md
│   │   ├── how-amp-works@pt_BR.md
│   │   ├── how-amp-works@ru.md
│   │   ├── how-amp-works@th.md
│   │   ├── how-amp-works@tr.md
│   │   ├── how-amp-works@zh_CN.md
│   │   ├── metrics.html
│   │   ├── overview.yaml
│   │   ├── overview@ar.yaml
│   │   ├── overview@de.yaml
│   │   ├── overview@es.yaml
│   │   ├── overview@fr.yaml
│   │   ├── overview@id.yaml
│   │   ├── overview@it.yaml
│   │   ├── overview@ja.yaml
│   │   ├── overview@ko.yaml
│   │   ├── overview@pl.yaml
│   │   ├── overview@pt_BR.yaml
│   │   ├── overview@ru.yaml
│   │   ├── overview@th.yaml
│   │   ├── overview@tr.yaml
│   │   ├── 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
│       │   ├── overview@ar.md
│       │   ├── overview@de.md
│       │   ├── overview@es.md
│       │   ├── overview@fr.md
│       │   ├── overview@id.md
│       │   ├── overview@it.md
│       │   ├── overview@ja.md
│       │   ├── overview@pl.md
│       │   ├── overview@pt_BR.md
│       │   ├── overview@ru.md
│       │   ├── overview@th.md
│       │   ├── overview@tr.md
│       │   ├── overview@zh_CN.md
│       │   ├── platform-involvement.md
│       │   ├── platform-involvement@ar.md
│       │   ├── platform-involvement@de.md
│       │   ├── platform-involvement@es.md
│       │   ├── platform-involvement@fr.md
│       │   ├── platform-involvement@id.md
│       │   ├── platform-involvement@it.md
│       │   ├── platform-involvement@ja.md
│       │   ├── platform-involvement@pl.md
│       │   ├── platform-involvement@pt_BR.md
│       │   ├── platform-involvement@ru.md
│       │   ├── platform-involvement@th.md
│       │   ├── platform-involvement@tr.md
│       │   ├── platform-involvement@zh_CN.md
│       │   ├── publisher-monetization.md
│       │   ├── publisher-monetization@ar.md
│       │   ├── publisher-monetization@de.md
│       │   ├── publisher-monetization@es.md
│       │   ├── publisher-monetization@fr.md
│       │   ├── publisher-monetization@id.md
│       │   ├── publisher-monetization@it.md
│       │   ├── publisher-monetization@ja.md
│       │   ├── publisher-monetization@pl.md
│       │   ├── publisher-monetization@pt_BR.md
│       │   ├── publisher-monetization@ru.md
│       │   ├── publisher-monetization@th.md
│       │   ├── publisher-monetization@tr.md
│       │   ├── 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&#37; 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/analytics_amp@fr.md:
--------------------------------------------------------------------------------

```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/washingtonpost_phone@1x.png 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&#37; 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&#37;+ 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>
```

