This is page 5 of 24. Use http://codebase.md/cloudflare/docs/imgs/claudemcp.gif?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/assets/img/home/teads_logo.svg:
--------------------------------------------------------------------------------
```
1 | <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
1 | ---
2 | $title: Art direction with srcset, sizes & heights
3 | $order: 4
4 | toc: true
5 | ---
6 | [TOC]
7 |
8 | ## srcset
9 |
10 | Use the `srcset` attribute to control an element’s assets
11 | based on varying media expressions.
12 | In particular, use it for all [`amp-img`](/docs/reference/amp-img.html) tags
13 | to specify which image assets to use based on varying screen sizes.
14 |
15 | In this simple example,
16 | `srcset` specifies which image to use based on the screen width.
17 | The `w` descriptor tells the browser the width
18 | of each image in the list:
19 |
20 | [sourcecode:html]
21 | <amp-img
22 | src="wide.jpg" width="640" height="480"
23 | srcset="wide.jpg 640w,
24 | narrow.jpg 320w">
25 | </amp-img>
26 | [/sourcecode]
27 |
28 | {% call callout('Note', type='note') %}
29 | AMP supports srcset with the `w` descriptor across all browsers.
30 | {% endcall %}
31 |
32 | Learn more about creating responsive images using `srcset`
33 | in [Using Responsive Images (Now)](http://alistapart.com/article/using-responsive-images-now).
34 |
35 | ## sizes
36 |
37 | You can also use the `sizes` attribute along with `srcset`.
38 | The `sizes` attribute describes how to calculate the element size
39 | based on any media expression.
40 | Based on the element’s calculated size,
41 | the user agent selects the most relative source supplied by the `srcset` attribute.
42 |
43 | Consider the following example:
44 |
45 | [sourcecode:html]
46 | <amp-img
47 | src="wide.jpg" width="640" height="480"
48 | srcset="wide.jpg 640w,
49 | narrow.jpg 320w"
50 | sizes="(min-width: 650px) 50vw, 100vw">
51 | </amp-img>
52 | [/sourcecode]
53 |
54 | The `sizes` attribute defines the element’s width to be 50% the size of the viewport
55 | when the viewport is 650px or more.
56 | For example, if the viewport is 800px,
57 | the element’s width is set to 400px.
58 | The browser then selects the `srcset` resource relative to 400px,
59 | assuming the device pixel ratio is 1,
60 | which in this instance is `narrow.jpg` (320px).
61 |
62 | {% call callout('Important', type='caution') %}
63 | When sizes attribute is specified along with width and height,
64 | layout defaults to `responsive`.
65 | {% endcall %}
66 |
67 | Learn more about how `sizes` and `srcset` attributes compare
68 | to media queries in this
69 | [Srcset and sizes](https://ericportis.com/posts/2014/srcset-sizes/) blog post.
70 |
71 | ## heights
72 |
73 | All AMP custom elements that allow `responsive` layout, also support the `heights` attribute.
74 | The value of this attribute is a sizes expression based on media expressions
75 | as similar to the [img sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img),
76 | but with two key differences:
77 |
78 | 1. It applies to the height and not width of the element.
79 | 2. Percent values are allowed, e.g. `86%`. If a percent value is used, it indicates the percent
80 | of the element's width.
81 |
82 | When the `heights` attribute is specified along with `width` and `height`, the `layout` is defaulted to `responsive`.
83 |
84 | An example:
85 |
86 | [sourcecode:html]
87 | <amp-img src="https://acme.org/image1.png"
88 | width="320" height="256"
89 | heights="(min-width:500px) 200px, 80%">
90 | </amp-img>
91 | [/sourcecode]
92 |
93 | In this example, the height of the element by default will be 80% of the width, but for the viewport
94 | wider than `500px` it will be capped at `200px`.
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/who_lines1.svg:
--------------------------------------------------------------------------------
```
1 | <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:
--------------------------------------------------------------------------------
```
1 | <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:
--------------------------------------------------------------------------------
```
1 | <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
1 | $title@: AMP for Ad Tech Platforms
2 | class: about-who-vertical
3 | $order: 1
4 | $parent: /content/learn/who-uses-amp.yaml
5 | components:
6 | - carousel
7 |
8 | vertical_class: adtech centered
9 |
10 | hero:
11 | title@: A faster way to grow your business
12 | paragraph@: "The average mobile site takes 19 seconds to load over a 3G connection. Coupled with the fact that conversions fall by 12% for every additional second a webpage takes to load, you can safely assume two things: speed equals performance, and most advertiser campaigns have room to improve. That’s where you come in. As an SSP, DSP, analytics provider, or anything in between, embracing speed means improving campaign performance, delivering quality user experiences, and establishing yourself as the adtech platform for the fast web. Join the hundreds of technology platforms currently supporting the open source AMP ecosystem."
13 | hero_icon: adtech/adtech_icon_intro.svg
14 | hero_icon_width: 76
15 | hero_icon_height: 60
16 | lines_img: adtech/lines.svg
17 | lines_img_width: 410
18 | lines_img_height: 260
19 |
20 | users:
21 | - name: Sharethrough
22 | logo: adtech/sharethrough_logo.png
23 | logo_width: 1232
24 | logo_height: 467
25 | class: sharethrough
26 |
27 | - name: TripleLift
28 | logo: adtech/triplelift_logo.png
29 | logo_width: 2500
30 | logo_height: 625
31 | class: triplelift
32 |
33 | - name: Teads
34 | logo: adtech/teads_logo.svg
35 | logo_width: 75
36 | logo_height: 28
37 | class: teads
38 |
39 | - name: Index Exchange
40 | logo: adtech/indexexchange_logo.png
41 | logo_width: 500
42 | logo_height: 131
43 | class: indexexchange
44 |
45 | why:
46 | title@: Amplify your impact
47 | reasons:
48 | - title@: Increase your reach
49 | 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.
50 | icon: adtech/adtech_icon_reach.svg
51 |
52 | - title@: Maximize your revenue
53 | paragraph@: Speeding up ads is the fastest way to boost performance. <a href="https://github.com/ampproject/amphtml/blob/master/ads/google/a4a/docs/a4a-readme.md">AMP Ads</a> load as fast as content, so they are more viewable and more likely to be engaged with. Triplelift saw a 10%+ increase in viewability and engagement with AMP ads. Join the <a href="/learn/who-uses-amp/amp-ads/">AMP Ads Initiative</a> to improve performance and grow your revenue.
54 | icon: adtech/adtech_icon_revenue.svg
55 |
56 | - title@: Build for a sustainable future
57 | 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.
58 | icon: adtech/adtech_icon_customize.svg
59 |
60 | case:
61 | title@: Adtech success stories
62 | cases:
63 | - filename: teads.md
64 | - filename: plista.md
65 | lines_img: adtech/lines.svg
66 | lines_img_width: 410
67 | lines_img_height: 260
68 |
69 | cta:
70 | title@: Get Started Building
71 | link_text@: Tutorials
72 | link_url: /content/docs/get_started/create.md
73 |
```
--------------------------------------------------------------------------------
/views/partials/header.html:
--------------------------------------------------------------------------------
```html
1 | <header class="header fixed">
2 | {% include "/views/partials/promo_banner.html" %}
3 |
4 | <div class="container">
5 | <div class="nav-container">
6 | <div class="left-nav alt">
7 | <a href="{{g.doc('/content/pages/home.html', locale=doc.locale).url.path}}" class="tab header-title"><span></span></a>
8 |
9 | <div class="tabs">
10 | {% for entry in menu %}
11 | <div class="tab{% if doc.pod_path.split('/')[2] == entry.collection %} active{% endif %}">
12 | <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>
13 | <div class="list-container">
14 | <div class="list-shadow"></div>
15 | <ul>
16 | {% if entry.children %}
17 | {% for subEntry in entry.children %}
18 | <li{% if subEntry.href.startswith('http') %} class="external"{% endif %} {% if subEntry.collection %} class="has-sublist" {% endif %}>
19 | <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>
20 | {% if subEntry.collection %}
21 | <ul class="sublist">
22 | {% set menuCollection = g.collection(subEntry.collection) %}
23 | {% for item in menuCollection.docs(recursive=false, locale=doc.locale) %}
24 | <li{% if item.goto %} class="external"{% endif %}>
25 | {% if item.goto_internal %}
26 | <a href="{{g.doc(item.goto_internal).url.path}}">{{_(item.title)}}</a>
27 | {% else %}
28 | <a href="{{item.goto or item.url.path}}" {% if item.goto %} target="_blank" {% endif %}>{{_(item.title)}}</a>
29 | {% endif %}
30 | </li>
31 | {% endfor %}
32 | </ul>
33 | {% endif %}
34 | </li>
35 | {% endfor %}
36 | {% else %}
37 | {% set menuCollection = g.collection(entry.collection) %}
38 | {% for item in menuCollection.docs(recursive=false, locale=doc.locale) %}
39 | {% if item.goto_internal %}
40 | <a href="{{g.doc(item.goto_internal).url.path}}">{{_(item.title)}}</a>
41 | {% else %}
42 | <a href="{{item.goto or item.url.path}}">{{_(item.title)}}</a>
43 | {% endif %}
44 | {% endfor %}
45 | {% endif %}
46 | </ul>
47 | </div>
48 | </div>
49 | {% endfor %}
50 | </div>
51 | </div>
52 | <div class="right alt">
53 | {% include "/views/partials/search.html" %}
54 | {% include "/views/partials/lang_switcher.html" %}
55 | <button class="tab hamburger" id="menu-button" on='tap:sidebar.toggle'></button>
56 | </div>
57 | </div>
58 | </div>
59 | </header>
60 |
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/publishers/publisher_icon_business.svg:
--------------------------------------------------------------------------------
```
1 | <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
1 | {% extends "/views/base.html" %}
2 |
3 | {% set navmarkup %}
4 | {% include "/views/partials/breadcrumb-nav.html" %}
5 | {% endset %}
6 |
7 | {% block main %}
8 | {{ navmarkup|safe }}
9 |
10 | <div class="container xl about-overview-block">
11 | <section class="hero">
12 | <div class="images">
13 | <amp-img class="triangle"
14 | noloading
15 | height=1575
16 | width=1076
17 | layout=responsive
18 | src="/static/img/about/overview/{{doc.hero.triangle_img}}">
19 | </amp-img>
20 | <amp-img class="line1"
21 | noloading
22 | height=522
23 | width=583
24 | layout=responsive
25 | src="/static/img/about/overview/{{doc.hero.line1_img}}">
26 | </amp-img>
27 | <amp-img class="line2"
28 | noloading
29 | height=327
30 | width=359
31 | layout=responsive
32 | src="/static/img/about/overview/{{doc.hero.line2_img}}">
33 | </amp-img>
34 | <amp-img class="phone"
35 | noloading
36 | height=1568
37 | width=1844
38 | layout=responsive
39 | srcset="{{doc.hero.phone_img_base + '.png 1844w'}},
40 | {{doc.hero.phone_img_base + '@1_5x.png 1217w'}},
41 | {{doc.hero.phone_img_base + '@1x.png 922w'}}"
42 | src="{{doc.hero.phone_img_base + '.png'}}">
43 | </amp-img>
44 | </div>
45 | <div class="text">
46 | <h1>{{_(doc.hero.title)}}</h1>
47 | <a class="button" href="{{doc.hero.cta_url}}">
48 | {{_(doc.hero.cta)}}
49 | <span class="arrow"></span>
50 | </a>
51 |
52 | </div>
53 | </section>
54 |
55 | <section class="core">
56 | <h2 class="h1">{{_(doc.core.title)}}</h2>
57 | <amp-accordion>
58 | {% for component in doc.core.components %}
59 | <section>
60 | <header>
61 | <h4>{{_(component.title)}}</h4>
62 | <div class="subtitle">{{_(component.subtitle)|markdown|safe}}</div>
63 | </header>
64 |
65 | <div class="core-content">
66 | <div class="description">{{_(component.description)|markdown|safe}}</div>
67 | {% if component.example %}
68 | {% set example = g.doc(component.example, locale=doc.locale) %}
69 | {{example.html|safe}}
70 | {% endif %}
71 | {% if component.description2 %}
72 | <div class="description">{{_(component.description2)|markdown|safe}}</div>
73 | {% endif %}
74 | </div>
75 | </section>
76 | {% endfor %}
77 | </amp-accordion>
78 | </section>
79 | </div>
80 |
81 | <div class="video" id="video">
82 | <amp-img class="line1 desktop-up"
83 | noloading
84 | height=363
85 | width=563
86 | layout=responsive
87 | src="/static/img/about/overview/{{doc.video.line1_img}}">
88 | </amp-img>
89 | <amp-img class="line2 desktop-up"
90 | noloading
91 | height=191
92 | width=254
93 | layout=responsive
94 | src="/static/img/about/overview/{{doc.video.line2_img}}">
95 | </amp-img>
96 | <amp-youtube
97 | data-videoid="{{doc.video.id}}"
98 | layout="responsive"
99 | width="480" height="270">
100 | </amp-youtube>
101 | </div>
102 |
103 | {% with cta = doc.cta %}
104 | {% include "/views/partials/footer-cta.html" %}
105 | {% endwith %}
106 | {% include "/views/partials/footer.html" %}
107 |
108 | {% endblock %}
```
--------------------------------------------------------------------------------
/assets/sass/_cards.scss:
--------------------------------------------------------------------------------
```scss
1 | .card-container {
2 | box-sizing: border-box;
3 | display: flex;
4 | justify-content: space-between;
5 | padding: 20px 5px;
6 | }
7 |
8 | .card {
9 | @extend %text-base;
10 | @extend %text-body;
11 | background: $color-white;
12 | box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.075);
13 | box-sizing: border-box;
14 | display: inline-block;
15 | flex: 0 0 31%; // IE10: calc not allowed in flex
16 | flex: 0 0 calc(33% - 30px);
17 | flex-basis: calc(33% - 30px);
18 | height: 90%;
19 | margin: 10px 5px;
20 | padding: 10px;
21 | position: relative;
22 | transition: transform 0.3s, box-shadow 0.3s;
23 |
24 | &::before {
25 | background: $gradient-bold;
26 | content: '';
27 | left: 0;
28 | height: 2px;
29 | position: absolute;
30 | right: 0;
31 | top: -2px;
32 | }
33 |
34 | &.centered {
35 | align-items: center;
36 | text-align: center;
37 | }
38 |
39 | &:hover {
40 | box-shadow: 0px 3px 50px 0 rgba(0, 0, 0, 0.075);
41 | transform: translateY(-5px);
42 | }
43 |
44 | &--spacer {
45 | box-shadow: none;
46 | height: 0;
47 | padding: 0;
48 |
49 | &::before {
50 | display: none;
51 | }
52 |
53 | &:hover {
54 | box-shadow: none;
55 | }
56 | }
57 | }
58 |
59 | .card-inner {
60 | display: inline-flex;
61 | flex-direction: column;
62 | height: 100%;
63 | justify-content: space-between;
64 | width: 100%;
65 | }
66 |
67 | .card-type {
68 | color: $color-ampblue;
69 | margin-bottom: 15px;
70 | }
71 |
72 | .card-content {
73 | font-weight: 300;
74 | text-transform: none;
75 | }
76 |
77 | .card-date {
78 | margin-top: 10px;
79 | }
80 |
81 | .card-section-heading {
82 | font-size: 30px;
83 | margin: 50px 10px 0;
84 | }
85 |
86 | // for grids in support, build, guides, etc pages
87 | .card-container.grid {
88 | flex-wrap: wrap;
89 |
90 | &::after {
91 | content: '';
92 | display: block;
93 | flex: 0 0 31%; //IE 10: calc not allowed in flex
94 | flex: 0 0 calc(33% - 30px);
95 | flex-basis: calc(33% - 30px); // IE 11
96 | margin: 10px 5px;
97 | visibility: hidden;
98 | }
99 |
100 | .card {
101 | display: flex;
102 | height: auto;
103 | min-height: 400px;
104 | padding: 0;
105 |
106 | &:hover {
107 | .card-link p::before {
108 | animation: .5s 1 cta-line;
109 | }
110 | }
111 | }
112 |
113 | .card-inner {
114 | display: flex;
115 | height: auto;
116 | padding: 50px;
117 | width: 100%;
118 | }
119 |
120 | .card-title {
121 | display: block;
122 | flex: 1 0 auto;
123 | hyphens: none;
124 | margin-bottom: 1em;
125 |
126 | h2 {
127 | font-size: 36px;
128 | }
129 | }
130 |
131 | .card-link p {
132 | @extend a.underlined;
133 | color: $color-ampblue;
134 | display: inline;
135 | margin: 0;
136 | padding: 0;
137 | position: relative;
138 |
139 | &::before {
140 | bottom: -5px;
141 | height: 2px;
142 | }
143 | }
144 | }
145 |
146 | // for case studies
147 | .card-container.case {
148 | .card-inner {
149 | padding: 50px;
150 | }
151 |
152 | .card-date {
153 | &::before {
154 | content: ' | ';
155 | display: inline;
156 | margin: 0 12px;
157 | }
158 | }
159 |
160 | .card-logo {
161 | align-items: center;
162 | display: flex;
163 | height: 40px;
164 | margin: 1em 0;
165 | }
166 |
167 | // .card-title {
168 | // margin-bottom: 1em;
169 | // }
170 | }
171 |
172 | @include max-screen($mobile-breakpoint) {
173 | .card-container.grid,
174 | .card-container.case {
175 | .card {
176 | flex: 0 0 48%; // IE10: calc not allowed in flex;
177 | flex: 0 0 calc(50% - 30px);
178 | flex-basis: calc(50% - 30px); // IE 11
179 | }
180 |
181 | .card-inner {
182 | // padding: 10%;
183 | }
184 |
185 | .card-title {
186 | margin-bottom: 2em;
187 | }
188 | }
189 |
190 | .card-section-heading {
191 | margin: 50px 0 0;
192 | }
193 | }
194 |
195 | @include max-screen($tablet-portrait-breakpoint) {
196 | .card-container.grid,
197 | .card-container.case {
198 | .card {
199 | flex: 0 0 100%;
200 | margin: 10px 0;
201 | min-height: 300px;
202 | }
203 | }
204 | }
205 |
```
--------------------------------------------------------------------------------
/content/learn/who/publishers.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: AMP for Publishers
2 | class: about-who-vertical
3 | $order: 0
4 | $parent: /content/learn/who-uses-amp.yaml
5 | components:
6 | - carousel
7 |
8 | vertical_class: publishers
9 |
10 | hero:
11 | title@: Improve user engagement with fast, compelling experiences.
12 | 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.
13 | hero_img_base: /static/img/about/who-use-amp/publishers/publisher_phone_cnn
14 | hero_img_width: 1079
15 | hero_img_height: 1316
16 | triangle_img: hero_triangle.png
17 | triangle_img_width: 1424
18 | triangle_img_height: 2095
19 | hero_icon: publishers/publisher_icon_intro.svg
20 | hero_icon_width: 76
21 | hero_icon_height: 60
22 |
23 | users:
24 | - name: The New York Times
25 | logo: publishers/nyt_logo.svg
26 | logo_width: 306
27 | logo_height: 40
28 | class: nyt
29 |
30 | - name: Globo
31 | logo: publishers/globo_logo.svg
32 | logo_width: 57
33 | logo_height: 33
34 | class: globo
35 |
36 | - name: Washington Post
37 | logo: publishers/wapo_logo.png
38 | logo_width: 1280
39 | logo_height: 197
40 | class: wapo
41 |
42 | - name: Wired
43 | logo: publishers/wired_logo.png
44 | logo_width: 1298
45 | logo_height: 263
46 | class: wired
47 |
48 | why:
49 | title@: How AMP can help publishers
50 | reasons:
51 | - title@: Enable compelling, consistently fast experiences
52 | 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.
53 | icon: publishers/publisher_icon_fast.svg
54 |
55 | - title@: Strengthen your business while maintaining control
56 | 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.
57 | icon: publishers/publisher_icon_simple.svg
58 |
59 | - title@: Reduce complexity in your operations.
60 | 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.
61 | icon: publishers/publisher_icon_business.svg
62 |
63 | case:
64 | title@: See how other publishers have found success with AMP
65 | cases:
66 | - filename: washingtonpost.md
67 | - filename: wired.md
68 |
69 | cta:
70 | title@: Get Started Building
71 | link_text@: Tutorials
72 | link_url: /content/docs/get_started/create.md
73 |
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/design_icon_ux.svg:
--------------------------------------------------------------------------------
```
1 | <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:
--------------------------------------------------------------------------------
```
1 | <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
1 | ---
2 | $order: 9
3 | $title: Terra
4 | $date: March 6, 2017
5 | $category: Publishers
6 | $parent: /content/learn/case-studies.html
7 | class: case-study post-detail
8 |
9 | components:
10 | - social-share
11 |
12 | headline: Terra drives mobile viewership up with AMP
13 | thumb: "case-studies/terra_thumb.jpg"
14 | results:
15 | - stat: 2x
16 | description: Increase in page speed
17 | - stat: 2x
18 | description: More time spent on AMP pages than on other mobile pages (Brazil)
19 | - stat: 3,175%
20 | description: increase in total clicks (all countries)
21 | - stat: 33%
22 | description: increase in clickthrough rate (all countries)
23 |
24 | logo:
25 | src: "case-studies/terra_logo.png"
26 | width: 128
27 | height: 95
28 | download: "case-studies/terra.pdf"
29 |
30 | ---
31 |
32 | <div class="img-left">
33 | <amp-img width="800" height="1371" layout="responsive" src="/static/img/case-studies/terra_framed1.png"></amp-img>
34 | </div>
35 |
36 | 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.
37 |
38 | ## Solution
39 |
40 | 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.
41 |
42 | 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.”
43 |
44 | 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.
45 |
46 | ## Results
47 |
48 | <div class="img-right">
49 | <amp-img width="800" height="1371" layout="responsive" src="/static/img/case-studies/terra_framed2.png"></amp-img>
50 | </div>
51 |
52 | 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:
53 |
54 | - 3,175% increase in total clicks on AMP pages
55 | - 33% increase in clickthrough rate on AMP pages
56 |
57 | “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.
58 |
59 | 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:
--------------------------------------------------------------------------------
```
1 | <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:
--------------------------------------------------------------------------------
```
1 | <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
1 | ---
2 | $order: 4
3 | $title: plista
4 | $date: October 7, 2016
5 | $category: Advertisers
6 | $parent: /content/learn/case-studies.html
7 | class: case-study post-detail
8 |
9 | components:
10 | - social-share
11 |
12 | headline: plista grows publisher revenue & user engagement with AMP
13 | thumb: "case-studies/plista_thumb.jpg"
14 | featured:
15 | description: ""
16 | results:
17 | - stat: 133%
18 | description: AVG growth in CPMs
19 | - stat: 220%
20 | description: AVG growth in CTRs
21 | logo:
22 | src: "case-studies/plista_logo.png"
23 | width: 90
24 | height: 32
25 | download: "case-studies/plista.pdf"
26 | ---
27 |
28 | 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.
29 |
30 |
31 | #### Speed: A new key performance indicator
32 |
33 | 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.
34 |
35 | #### Speed = Revenue
36 |
37 | “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.
38 |
39 | <amp-img width="1296" height="811" layout="responsive" src="/static/img/case-studies/plista_graphic.png"></amp-img>
40 |
41 | #### Building the open source project together
42 |
43 | “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.
44 |
45 | > “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.
46 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/engagement.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Improve User Engagement
3 | $order: 9
4 | ---
5 | Here are some quick tips to improve user engagement with AMP.
6 |
7 | ### Help readers identify you with consistent branding and rich content across AMP and non-AMP pages
8 |
9 | - **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.
10 |
11 | - **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).
12 |
13 | - **Keep AMP pages current.** Dynamically update live blogs with [`amp-live-list`](https://www.ampproject.org/docs/reference/components/amp-live-list).
14 |
15 | ### Optimize for user engagement and retention
16 |
17 | - **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
18 | incorporate interactive elements that AMP does not natively support.
19 |
20 | - **Create personalized user journeys.** Offer a login button, and if your content
21 | lives behind a paywall, implement your rules and offers using [`amp-access`](https://www.ampproject.org/docs/reference/components/amp-access).
22 |
23 | - **Extend onward journeys.** Link to related or suggested articles and other
24 | relevant sections of your site.
25 |
26 | - **Personalize content** by including recommendations through [`amp-list`](https://www.ampproject.org/docs/reference/components/amp-list).
27 |
28 | - **Implement a menu** with [`amp-sidebar`](https://www.ampproject.org/docs/reference/components/amp-sidebar) to encourage users to browse the rest
29 | of your site.
30 |
31 | - **Help readers share your content** with [`amp-social-share`](https://www.ampproject.org/docs/reference/components/amp-social-share) and your
32 | own share buttons.
33 |
34 | - **Cultivate new interactions** such as lead generation, newsletter signup, and
35 | comment support with [`amp-form`](https://www.ampproject.org/docs/reference/components/amp-form).
36 |
37 | - **Aim for ad types that offer a good reader experience.** Explore AMP ad
38 | 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
39 | monetization [best practices](/docs/guides/ads/ads_tips.html).
40 |
41 | - **Drive app downloads.** Include an app install link in a banner with
42 | [`amp-app-banner`](https://www.ampproject.org/docs/reference/components/amp-app-banner).
43 |
44 | - **Ensure a fast transition** to your non-AMP Progressive Web App (PWA) site for
45 | readers. Use [`amp-install-serviceworker`](https://www.ampproject.org/docs/reference/components/amp-install-serviceworker) to populate your cache.
46 |
47 | ### Participate in the open-source AMP Project to help shape its development
48 |
49 | - **Watch the AMP roadmap** for updates and features at [ampproject.org/roadmap](https://www.ampproject.org/roadmap).
50 |
51 | - **Get involved.** Contribute source code, file bugs, or offer feedback
52 | 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).
53 |
54 | - **Learn** how to use AMP components with [AMP by Example](https://ampbyexample.com/).
55 |
```
--------------------------------------------------------------------------------
/assets/img/home/home_icon_performance.svg:
--------------------------------------------------------------------------------
```
1 | <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>
```
--------------------------------------------------------------------------------
/content/learn/who/amp-ads.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: AMP Ads
2 | class: about-who-vertical
3 | $order: 3
4 | $hidden: true
5 | $parent: /content/learn/who-uses-amp.yaml
6 | components:
7 | - carousel
8 |
9 | vertical_class: amp-ads centered
10 |
11 | hero:
12 | title@: Better advertising on a faster web.
13 | paragraph@: We can’t fix the web if we don’t fix ads. Today’s ads fail to meet advertisers’ goals because they are slow, unpredictable and disruptive. The open-source AMP Ads Initiative aims to make advertising on the web better with faster, lighter and more secure ad experiences, starting with ads and extending beyond the click to the pages users land on.
14 | lines_img: amp-ads/lines.svg
15 | lines_img_width: 410
16 | lines_img_height: 260
17 |
18 | users:
19 | - name: Google
20 | logo: amp-ads/google_logo.png
21 | logo_width: 466
22 | logo_height: 156
23 | class: google
24 |
25 | - name: DoubleClick
26 | logo: amp-ads/doubleclick_logo.png
27 | logo_width: 1726
28 | logo_height: 372
29 | class: doubleclick
30 |
31 | - name: CloudFlare
32 | logo: amp-ads/cloudflare_logo.png
33 | logo_width: 1088
34 | logo_height: 156
35 | class: cloudflare
36 |
37 | - name: TripleLift
38 | logo: amp-ads/triplelift_logo.png
39 | logo_width: 2500
40 | logo_height: 625
41 | class: triplelift
42 |
43 | why:
44 | title@: Why AMP Ads
45 | reasons:
46 | - title@: Speed is the fastest way to drive performance
47 | paragraph@: The median load time for an AMP page is less than one second but the average ad still takes 5 seconds to load over 3G connections – that’s 4 seconds too late. When ads are faster, they’re more viewable, more effective, and more likely to perform well. Boost performance by speeding up ads with AMP Ads.
48 | icon: amp-ads/speed_icon.svg
49 |
50 | - title@: Lighter ads improve brand perception
51 | paragraph@: Heavy and unpredictable ad experiences slow down the page, cost users money, and negatively impact perception of both the advertiser and the publisher. AMP Ads are 3x lighter than traditional ads, helping to ensure a positive brand experience.
52 | icon: amp-ads/ads_icon.svg
53 |
54 | - title@: Smart and coordinated ads boost campaign ROI
55 | paragraph@: The average mobile page makes 107 uncoordinated ad server requests. Redundant data requests slow down the page and prevent your ad from loading. AMP Ads leverage smart components like amp-analytics to reuse code and eliminate unnecessary data requests. As a result, AMP Ads access more data while loading faster. And when ads load faster, they’re more likely to exceed advertiser campaign goals and publisher revenue expectations.
56 | icon: amp-ads/roi_icon.svg
57 |
58 | points:
59 | title@: Simple to build, easy to scale. Reduce complexity with AMP Ads.
60 | pointlist:
61 | - title@: Use your existing resources
62 | description@: AMP Ads are a creative format built using HTML and CSS, not a new technology. As a result, you can use your existing development resources to create and serve ads that are faster, lighter, and more effective.
63 | - title@: Build once, serve everywhere.
64 | description@: AMP Ads can serve on both AMP and non-AMP pages so you can build your AMP Ad once and deliver a memorable brand experience everywhere.
65 |
66 | large_cta:
67 | title@: Join the AMP Ads initiative
68 | subtitle@: Whether you’re an advertiser, ad tech platform, or publisher, fix the state of advertising by joining the AMP Ads Initiative today.
69 | cta@: Join Now
70 | cta_url: https://github.com/ampproject/amphtml/blob/master/ads/google/a4a/docs/a4a-readme.md
71 | lines_left: /static/img/about/who-use-amp/amp-ads/lines_bottom2.svg
72 | lines_left_width: 325
73 | lines_left_height: 303
74 | lines_right: /static/img/about/who-use-amp/amp-ads/lines_bottom1.svg
75 | lines_right_width: 325
76 | lines_right_height: 237
77 |
```
--------------------------------------------------------------------------------
/views/partials/sidebar.html:
--------------------------------------------------------------------------------
```html
1 | <amp-sidebar id='sidebar' side='{% if doc.locale.is_rtl %}left{% else %}right{% endif %}' layout='nodisplay'>
2 | <form class="menu-layer primary" action="/" target="_top">
3 | <button type="reset" class="close-button" id="menu-button" on='tap:sidebar.toggle'></button>
4 | <div class="items">
5 | {% for entry in menu %}
6 | {% if entry.children %}
7 | <label class="menu-item item-layer-1 has-sub-level{% if doc.pod_path.split('/')[2] == entry.collection %} active{% endif %}"><input type="checkbox">
8 | {{_(entry.get('copy'))}}
9 | <div class="submenu menu-layer secondary">
10 | <div class="return-button">Back</div>
11 | <button type="reset" class="close-button" id="menu-button" on='tap:sidebar.toggle'></button>
12 | <div class="items">
13 | {% for subEntry in entry.children %}
14 | {% if subEntry.collection %}
15 | <label class="menu-item item-layer-2 has-sub-level"><input type="checkbox">{{_(subEntry.get('copy'))}}
16 | <div class="submenu menu-layer tertiary">
17 | <div class="return-button">Back</div>
18 | <button type="reset" class="close-button" id="menu-button" on='tap:sidebar.toggle'></button>
19 | <div class="items">
20 | <a class="menu-item item-layer-3" href="{{ g.doc(subEntry.get('href'), locale=doc.locale).url.path }}">{{_(subEntry.get('copy'))}}</a>
21 | {% set menuCollection = g.collection(subEntry.collection) %}
22 | {% for item in menuCollection.docs(recursive=false, locale=doc.locale) %}
23 | <a class="menu-item item-layer-3{% if item.goto %} external{% endif %}" href="{{item.goto or item.url.path}}">{{_(item.title)}}</a>
24 | {% endfor %}
25 | </div>
26 | </div>
27 | </label>
28 | {% else %}
29 | <a class="menu-item item-layer-2{% if subEntry.href.startswith('http') %} external{% endif %}" 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 %}">{{_(subEntry.get('copy'))}}</a>
30 | {% endif %}
31 | {% endfor %}
32 | </div>
33 | </div>
34 | </label>
35 | {% elif entry.collection %}
36 | <label class="menu-item item-layer-1 has-sub-level{% if doc.pod_path.split('/')[2] == entry.collection %} active{% endif %}"><input type="checkbox">
37 | {{_(entry.get('copy'))}}
38 | <div class="submenu menu-layer secondary">
39 | <div class="return-button">Back</div>
40 | <button type="reset" class="close-button" id="menu-button" on='tap:sidebar.toggle'></button>
41 | <div class="items">
42 | <a class="menu-item item-layer-2" href="{{ g.doc(entry.get('href'), locale=doc.locale).url.path }}">{{_(entry.get('copy'))}} Overview</a>
43 | {% set menuCollection = g.collection(entry.collection) %}
44 | {% for item in menuCollection.docs(recursive=false, locale=doc.locale) %}
45 | <a class="menu-item item-layer-2{% if item.goto %} external{% endif %}" href="{{item.goto or item.url.path}}">{{_(item.title)}}</a>
46 | {% endfor %}
47 | </div>
48 | </div>
49 | </label>
50 | {% else %}
51 | <a class="menu-item item-layer-1{% if entry.href.startswith('http') %} 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>
52 | {% endif %}
53 | {% endfor %}
54 | </div>
55 | {% include "/views/partials/lang_switcher.html" %}
56 | </form>
57 | </amp-sidebar>
```
--------------------------------------------------------------------------------
/content/includes/list-blog.yaml:
--------------------------------------------------------------------------------
```yaml
1 | blogs:
2 |
3 | - type: Blog
4 | title: "New Industry Benchmarks for Mobile Page Speed"
5 | id: new-industry-benchmarks-for-mobile-page-speed
6 | author: amphtml
7 | role:
8 | origin: "https://amphtml.wordpress.com/2017/02/28/new-industry-benchmarks-for-mobile-page-speed/amp/"
9 | excerpt: "The following is an excerpt from a Think with Google article by Daniel An, Global Product Lead, Mobile, Google. The average time it takes to fully load a mobile landing page is 22 seconds, according to a new analysis. Yet 53% of mobile site visitors leave a page that takes longer than three seconds to load. That’s […]"
10 | avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
11 | datedata: 2017-02-28T13:56:02-08:00
12 | date: "February 28, 2017"
13 |
14 | - type: Blog
15 | title: "Grow Your Business with Ads on AMP"
16 | id: grow-your-business-with-ads-on-amp
17 | author: Vamsee Jasti
18 | role: Product Manager, AMP Project
19 | origin: "https://amphtml.wordpress.com/2017/02/27/grow-your-business-with-ads-on-amp/amp/"
20 | excerpt: "We understand that every business is different, but one thing common to them all in today’s mobile driven world is the need to ensure a fast user experience across all screens. That is why we believe the growing AMP ecosystem is so important. It brings together a diverse community of publishers, advertisers, and technology platforms […]"
21 | avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
22 | datedata: 2017-02-27T11:18:47-08:00
23 | date: "February 27, 2017"
24 |
25 | - type: Blog
26 | title: "AMP Roadmap Update for Mid-Q1 2017"
27 | id: amp-roadmap-update-for-mid-q1-2017
28 | author: Eric Lindley
29 | role: Product Manager, AMP Project
30 | origin: "https://amphtml.wordpress.com/2017/02/18/amp-roadmap-update-for-mid-q1-2017/amp/"
31 | excerpt: "We’ve updated the AMP Roadmap with the details on progress during the first quarter of 2017, and you can read below for some of the highlights. Format Interactivity is a major focus for us this quarter as we build out the AMP format’s capabilities. amp-bind is a binding protocol that introduces lower-level methods for building […]"
32 | avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
33 | datedata: 2017-02-17T16:09:17-08:00
34 | date: "February 17, 2017"
35 |
36 | - type: Blog
37 | title: "Better galleries and forms in AMP"
38 | id: 1056
39 | author: Eric Lindley
40 | role: Product Manager
41 | origin: "https://amphtml.wordpress.com/2017/02/15/1056/amp/"
42 | excerpt: "We just released a couple of small tweaks in the AMP library that can make a big difference in building a better user experience. First, a new JavaScript method (goToSlide) supports advancing <amp-carousel> to a particular slide on user tap/click. This enables significant UX enhancements to image galleries. Second, we’ve made it easier to integrate […]"
43 | avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
44 | datedata: 2017-02-15T10:29:48-08:00
45 | date: "February 15, 2017"
46 |
47 | - type: Blog
48 | title: "What’s in an AMP URL?"
49 | id: whats-in-an-amp-url
50 | author: amphtml
51 | role:
52 | origin: "https://amphtml.wordpress.com/2017/02/06/whats-in-an-amp-url/amp/"
53 | excerpt: "The following was posted on the Google Developers Blog by Alex Fischer, Software Engineer, Google Search. TL;DR: Today, we’re adding a feature to the AMP integration in Google Search that allows users to access, copy, and share the canonical URL of an AMP document. But before diving deeper into the news, let’s take a step […]"
54 | avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
55 | datedata: 2017-02-06T11:12:42-08:00
56 | date: "February 6, 2017"
57 |
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
1 | core:
2 | title@: AMP pages are built with 3 core components.
3 | components:
4 | - title@: AMP HTML
5 | subtitle@: |
6 | **AMP HTML** adalah HTML dengan beberapa pembatasan untuk kinerja yang bisa diandalkan
7 | dan beberapa ekstensi untuk membangun materi kaya yang melampaui HTML dasar.
8 | description@: |
9 | AMP HTML pada dasarnya adalah HTML yang diperluas dengan properti AMP khusus.
10 | File AMP HTML paling sederhana tampak seperti ini:
11 | example: /content/includes/html-example.md
12 | description2@: |
13 | Meski sebagian besar tag dalam halaman AMP HTML adalah tag HTML reguler,
14 | sebagian tag HTML digantikan dengan tag spesifik AMP (lihat juga
15 | [Tag HTML dalam spesifikasi AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
16 | Elemen khusus ini disebut sebagai komponen AMP HTML,
17 | membuat pola-pola umum menjadi mudah diimplementasikan berdasarkan kinerja.
18 | <p>Misalnya, tag [`amp-img`](/docs/reference/amp-img.html)
19 | menyediakan dukungan `srcset` lengkap meski dalam browser yang belum mendukungnya.
20 | Pelajari cara [membuat halaman AMP HTML pertama Anda](/docs/get_started/create.html).
21 | - title@: AMP JS
22 | subtitle@: |
23 | Pustaka **AMP JS** memastikan perenderan halaman AMP HTML yang cepat.
24 | description@: |
25 | [Pustaka AMP JS](https://github.com/ampproject/amphtml/tree/master/src) mengimplementasikan
26 | semua [praktik kinerja terbaik AMP](/docs/get_started/technical_overview.html),
27 | mengelola pemuatan sumber daya dan memberi Anda tag khusus seperti yang disebut di atas,
28 | yang semuanya memastikan perenderan halaman Anda dengan cepat.
29 | <p>Di antara optimalisasi terbesar adalah fakta bahwa hal tersebut memastikan semua yang berasal dari sumber daya eksternal menjadi asinkron, sehingga tidak ada satu pun yang bisa menghalangi perenderan di halaman.
30 | <p>Teknik kinerja lainnya meliputi dilakukannya sandbox semua iframe, perhitungan awal layout setiap elemen pada halaman sebelum sumber daya dimuat dan menonaktifkan pemilih CSS yang lambat.
31 | <p>Untuk mengetahui selengkapnya tentang tidak hanya [optimalisasi](/docs/get_started/technical_overview.html) namun juga pembatasannya, [baca spesifikasi AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
32 | - title@: AMP Cache
33 | subtitle@: |
34 | **Google AMP Cache** (secara opsional) menghasilkan halaman AMP HTML.
35 | description@: |
36 | Google AMP Cache adalah jaringan penyajian materi berbasis proxy
37 | untuk menyajikan semua dokumen AMP yang valid.
38 | Jaringan ini mengambil halaman AMP HTML, menempatkannya dalam cache, dan memperbaiki halaman kinerja secara otomatis.
39 | Ketika menggunakan Google AMP Cache, semua file JS dan semua gambar yang dimuat
40 | dari asal yang sama yang menggunakan
41 | [HTTP 2.0](https://http2.github.io/) untuk efisiensi maksimum.
42 | <p>Cache ini juga disertai dengan
43 | [sistem validasi](https://github.com/ampproject/amphtml/tree/master/validator)
44 | bawaan yang memastikan bahwa halaman dijamin bekerja,
45 | dan halaman tidak bergantung pada sumber daya eksternal.
46 | Sistem validasi ini menjalankan serangkaian pernyataan
47 | yang mengonfirmasi terpenuhinya markup halaman sesuai dengan spesifikasi AMP HTML.
48 | <p>Versi validator lainnya hadir dalam bentuk dibundel dengan setiap halaman AMP. Versi ini bisa mencatat kesalahan validasi secara langsung ke konsol browser ketika halaman dirender,
49 | sehingga Anda bisa melihat bagaimana perubahan kompleks dalam kode Anda
50 | mungkin berdampak pada kinerja dan pengalaman pengguna.
51 | <p>Ketahui selengkapnya tentang [menguji halaman AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Styling & Layout
3 | $order: 0
4 | toc: true
5 | ---
6 | [TOC]
7 |
8 | Styling and layout on AMP HTML pages is very similar to normal HTML pages – in
9 | both cases, you'll use CSS.
10 |
11 | However, AMP limits some use of CSS for performance and usability reasons, while
12 | expanding responsive design capabilities with features like [placeholders & fallbacks](/docs/guides/responsive/placeholders.html),
13 | [advanced art direction via srcset](/docs/guides/responsive/art_direction.html) and the [layout attribute](/docs/guides/responsive/control_layout.html) for better control over how your elements display.
14 |
15 | {% call callout('Tip', type='success') %}
16 | It is super easy to make elements responsive in AMP. Just put `layout="responsive"` on them.
17 | {% endcall %}
18 |
19 | ## Add styles to a page
20 |
21 | Add all CSS inside a `<style amp-custom>` tag in the head of the document.
22 | For example:
23 |
24 | [sourcecode:html]
25 | <!doctype html>
26 | <head>
27 | ...
28 | <style amp-custom>
29 | /* any custom styles go here. */
30 | body {
31 | background-color: white;
32 | }
33 | amp-img {
34 | border: 5px solid black;
35 | }
36 |
37 | amp-img.grey-placeholder {
38 | background-color: grey;
39 | }
40 | </style>
41 | ...
42 | </head>
43 | [/sourcecode]
44 |
45 | {% call callout('Important', type='caution') %}
46 | Make sure there’s only one `<style amp-custom>` tag on your page,
47 | as more than one isn’t allowed in AMP.
48 | {% endcall %}
49 |
50 | Define component styles with class or element selectors
51 | using common CSS properties. For example:
52 |
53 | [sourcecode:html]
54 | <body>
55 | <p>Hello, Kitty.</p>
56 | <amp-img
57 | class="grey-placeholder"
58 | src="https://placekitten.com/g/500/300"
59 | srcset="/img/cat.jpg 640w,
60 | /img/kitten.jpg 320w"
61 | width="500"
62 | height="300"
63 | layout="responsive">
64 | </amp-img>
65 | </body>
66 | [/sourcecode]
67 |
68 | {% call callout('Important', type='caution') %}
69 | Check that your styles are supported in AMP;
70 | some styles aren't for performance reasons
71 | (see also [Supported CSS](/docs/guides/responsive/style_pages.html)).
72 | {% endcall %}
73 |
74 | ## Layout elements responsively
75 |
76 | Specify the size and position for all visible AMP elements
77 | by providing a `width` and `height` attribute.
78 | These attributes imply the aspect ratio of the element,
79 | which can then scale with the container.
80 |
81 | Set the layout to responsive.
82 | This sizes the element to the width of its container element
83 | and resizes its height automatically to the aspect ratio given by width and height attributes.
84 |
85 | {% call callout('Read on', type='read') %}
86 | Learn more about [supported layouts in AMP](/docs/guides/responsive/control_layout.html)
87 | {% endcall %}
88 |
89 | ## Provide placeholders & fallbacks
90 |
91 | The built-in support for placeholders and fallbacks means your users never have to stare at a blank screen again.
92 |
93 | {% call callout('Read on', type='read') %}
94 | Learn more about [Placeholders and fallbacks](/docs/guides/responsive/placeholders.html)
95 | {% endcall %}
96 |
97 | ## Art direct your images
98 |
99 | AMP supports both `srcset` and `sizes` attributes to give you fine grained control, of which images to load in which scenario.
100 |
101 | {% call callout('Read on', type='read') %}
102 | Learn more about [art direction with srcset and sizes](/docs/guides/responsive/art_direction.html)
103 | {% endcall %}
104 |
105 | ## Validate your styles and layout
106 |
107 | Use the AMP validator to test
108 | your page's CSS and layout values.
109 |
110 | The validator confirms that your page’s CSS doesn’t exceed 50,000 bytes limit,
111 | checks for disallowed styles, and ensures that the page's layout
112 | is supported and correctly formatted.
113 | See also this complete list of [Style and layout errors](/docs/reference/validation_errors.html#style-and-layout-errors).
114 |
115 | Example error in console for page with CSS that exceeds the 50,000 bytes limit:
116 |
117 | <amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
118 |
119 | {% call callout('Read on', type='read') %}
120 | Learn more about how to [validate and fix your AMP pages](/docs/guides/validate.html)
121 | {% endcall %}
122 |
```
--------------------------------------------------------------------------------
/content/learn/overview@pt_BR.yaml:
--------------------------------------------------------------------------------
```yaml
1 | core:
2 | title@: AMP pages are built with 3 core components.
3 | components:
4 | - title@: AMP HTML
5 | subtitle@: |
6 | **AMP HTML** é o HTML com algumas restrições para um desempenho confiável
7 | e algumas extensões para a criar conteúdo avançado além do HTML básico.
8 | description@: |
9 | O AMP HTML é basicamente o HTML ampliado com propriedades de AMP personalizadas.
10 | O arquivo AMP HTML mais simples tem esta aparência:
11 | example: /content/includes/html-example.md
12 | description2@: |
13 | Embora a maioria das tags em uma página em AMP HTML sejam tags normais de HTML,
14 | algumas são substituídas por tags específicas do AMP (consulte também
15 | [Tags HTML na especificação do AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
16 | Esses elementos personalizados, chamados de componentes AMP HTML,
17 | facilitam a implementação de padrões comuns, resultando em um bom desempenho.
18 | <p>Por exemplo, a tag [`amp-img`](/docs/reference/amp-img.html)
19 | proporciona suporte total a `srcset` mesmo em navegadores que ainda não são compatíveis com esse recurso.
20 | Saiba como [criar sua primeira página em AMP HTML](/docs/get_started/create.html).
21 | - title@: AMP JS
22 | subtitle@: |
23 | A biblioteca de **AMP JS** assegura a renderização rápida de páginas em AMP HTML.
24 | description@: |
25 | A [biblioteca de AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implementa
26 | todas as [melhores práticas de desempenho do AMP](/docs/get_started/technical_overview.html),
27 | administra o carregamento de recursos e oferece as tags personalizadas mencionadas acima,
28 | tudo para assegurar a renderização rápida de sua página.
29 | <p>Uma das principais otimizações é o fato de que ela torna assíncrono tudo o que vem de recursos externos, de modo que nenhum elemento da página possa bloquear a renderização de outros elementos.
30 | <p>Entre outras técnicas de desempenho está incluída a criação de uma sandbox para todos os iframes, o cálculo prévio do layout de cada elemento da página antes que os recursos sejam carregados e a desativação de seletores CSS lentos.
31 | <p>Para saber mais não só sobre as [otimizações](/docs/get_started/technical_overview.html) mas também as limitações, [leia a especificação do AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
32 | - title@: AMP Cache
33 | subtitle@: |
34 | O **Google AMP Cache** entrega (opcionalmente) as páginas em AMP HTML.
35 | description@: |
36 | O Google AMP Cache é uma rede de entrega de conteúdo baseado em proxy
37 | para todos os documentos AMP válidos.
38 | Ele recupera todas as páginas em AMP HTML, as armazena em cache e melhora o seu desempenho automaticamente.
39 | Ao usar o Google AMP Cache, o documento, todos os arquivos JS e todas as imagens são carregadas
40 | a partir da mesma origem que está usando
41 | [HTTP 2.0](https://http2.github.io/) para obter a máxima eficiência.
42 | <p>O cache também vem com um
43 | [sistema de validação](https://github.com/ampproject/amphtml/tree/master/validator)
44 | integrado que confirma a garantia de funcionamento da página
45 | e sua não dependência de recursos externos.
46 | O sistema de validação executa uma série de declarações
47 | que confirmam que a marcação da página atende às especificações do AMP HTML.
48 | <p>Outra versão do validador é fornecida em conjunto com todas as páginas AMP. Essa versão pode registrar erros de validação diretamente no console do navegador quando a página é renderizada,
49 | permitindo que você veja como alterações complexas em seu código
50 | podem afetar o desempenho e a experiência do usuário.
51 | <p>Saiba mais sobre [como testar suas páginas em AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
1 | core:
2 | title@: AMP pages are built with 3 core components.
3 | components:
4 | - title@: AMP HTML
5 | subtitle@: |
6 | **AMP-HTML** ist HTML mit einigen Einschränkungen für eine zuverlässige Leistung und einigen Erweiterungen für die Erstellung ansprechender Inhalte, die über einfaches HTML hinausgehen.
7 | description@: |
8 | AMP-HTML ist im Grunde HTML, das um benutzerdefinierte AMP-Eigenschaften erweitert wurde.
9 | Die einfachste Version einer AMP-HTML-Datei sieht so aus:
10 | example: /content/includes/html-example.md
11 | description2@: |
12 | Die meisten Tags einer AMP-HTML-Seite sind normale HTML-Tags, einige werden aber durch AMP-spezifische Tags ersetzt. Mehr über HTML-Tags [erfahren Sie auch in der AMP-Spezifikation](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
13 | Diese AMP-spezifischen und benutzerdefinierten Elemente, AMP-HTML-Komponenten genannt, ermöglichen eine einfache und effiziente Implementierung von gängigen Mustern.
14 | <p>Das Tag [`amp-img`](/docs/reference/amp-img.html) beispielsweise bietet selbst in Browsern, die dies noch nicht unterstützen, vollständigen `srcset`-Support.
15 | [Lesen Sie hier, wie Sie eine AMP-Seite erstellen.](/docs/get_started/create.html)
16 | - title@: AMP JS
17 | subtitle@: |
18 | Die **AMP-JS-Bibliothek** sorgt dafür, dass AMP-HTML-Seiten schnell aufgebaut werden.
19 | description@: |
20 | Die [AMP-JS-Bibliothek](https://github.com/ampproject/amphtml/tree/master/src) hat mehrere Funktionen, die gemeinsam für ein schnelles Rendering Ihrer Seite sorgen: Alle [Best Practices zur AMP-Leistung](/docs/get_started/technical_overview.html) werden implementiert, das Laden von Ressourcen wird verwaltet und die oben erwähnten benutzerdefinierten Tags werden bereitgestellt.
21 | <p>Zu den größten Optimierungen gehört, dass alles, was aus externen Ressourcen stammt, asynchron bereitgestellt wird. So kann kein Seitenelement die Darstellung eines anderen blockieren.
22 | <p>Weitere Technologien für eine verbesserte Leistung sind Sandbox-Verfahren für alle iFrames, die Vorberechnung des Layouts aller Seitenelemente, bevor Ressourcen geladen werden, und die Deaktivierung langsamer CSS-Selektoren.
23 | <p>Weitere Informationen sowohl zu den [Optimierungen](/docs/get_started/technical_overview.html) als auch den Beschränkungen [finden Sie in der AMP-HTML-Spezifikation](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
24 | - title@: AMP Cache
25 | subtitle@: |
26 | Über den **AMP-Cache von Google** können AMP-HTML-Seiten aus dem Cache bereitgestellt werden.
27 | description@: |
28 | Der [AMP-Cache von Google](https://developers.google.com/amp/cache/) ist ein proxybasiertes Content Delivery Network (CDN) zum Bereitstellen aller gültigen AMP-Dokumente.
29 | AMP-HTML-Seiten werden abgerufen, im Cache gespeichert und die Seitenleistung wird automatisch verbessert.
30 | Bei der Verwendung des AMP-Cache von Google werden das Dokument, alle JS-Dateien und alle Bilder aus derselben Quelle geladen, die [HTTP 2.0](https://http2.github.io/) für maximale Effizienz nutzt.
31 | <p>In den Cache ist außerdem ein [Validierungssystem](https://github.com/ampproject/amphtml/tree/master/validator) integriert, über das bestätigt wird, dass die Seite funktioniert und nicht von externen Ressourcen abhängig ist.
32 | Das Validierungssystem führt eine Reihe von Assertionen aus, um zu prüfen, ob das Markup der Seite die AMP-HTML-Spezifikation erfüllt.
33 | <p>Eine weitere Version des Validierungstools ist Teil jeder AMP-Seite. Diese Version kann Validierungsfehler beim Darstellen der Seite direkt in der Browserkonsole protokollieren. So können Sie sehen, wie komplexe Änderungen in Ihrem Code sich auf die Leistung und Nutzererfahrung auswirken.
34 | <p>[Lesen Sie hier, wie Sie Ihre AMP-HTML-Seiten testen.](/docs/guides/validate.html)
35 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/discovery.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Make Your Page Discoverable
3 | $order: 1
4 | toc: true
5 | ---
6 | [TOC]
7 |
8 |
9 | In some cases, you might want to have both a non-AMP and an AMP version of the same page, for example, a news article. Consider this: If Google Search finds the non-AMP version of that page, how does it know there’s an AMP version of it?
10 |
11 | ### Linking pages with <link>
12 |
13 | In order to solve this problem, we add information about the AMP page to the non-AMP page and vice versa, in the form of `<link>` tags in the `<head>`.
14 |
15 | Add the following to the non-AMP page:
16 |
17 | [sourcecode:html]
18 | <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
19 | [/sourcecode]
20 |
21 | And this to the AMP page:
22 |
23 | [sourcecode:html]
24 | <link rel="canonical" href="https://www.example.com/url/to/full/document.html">
25 | [/sourcecode]
26 |
27 | ### What if I only have one page?
28 |
29 | If you only have one page, and that page is an AMP page, you must still add the canonical link to it, which will then simply point to itself:
30 |
31 | [sourcecode:html]
32 | <link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
33 | [/sourcecode]
34 |
35 | ## Integrate with third-party platforms through additional metadata
36 |
37 | Sometimes a third-party site (that embeds your AMP page or includes links to it) needs to know more about your page other than the fact that it is an AMP page. The questions a platform might ask about your page are things like “Are you a news article?”, “Or a video?”, or “Do you have a screenshot and short description?”.
38 |
39 | This isn’t just relevant for AMP pages but for all web pages. For some platforms, this metadata is additional, for others it is a requirement, meaning they **won’t show links to your content if you didn’t include the right metadata**. Make sure you include the right metadata for the platforms you want your content to appear on.
40 |
41 | ### Use Schema.org for most search engines
42 |
43 | [Schema.org](http://schema.org/) offers open vocabularies to add meta data to all sorts of things. In the case of AMP, the properties that make sense in context include the specific type of content (i.e. ‘news article’), the headline, the published date and associated preview images.
44 |
45 | Example:
46 |
47 | [sourcecode:html]
48 | <script type="application/ld+json">
49 | {
50 | "@context": "http://schema.org",
51 | "@type": "NewsArticle",
52 | "mainEntityOfPage": "http://cdn.ampproject.org/article-metadata.html",
53 | "headline": "Lorem Ipsum",
54 | "datePublished": "1907-05-05T12:02:41Z",
55 | "dateModified": "1907-05-05T12:02:41Z",
56 | "description": "The Catiline Orations continue to beguile engineers and designers alike -- but can it stand the test of time?",
57 | "author": {
58 | "@type": "Person",
59 | "name": "Jordan M Adler"
60 | },
61 | "publisher": {
62 | "@type": "Organization",
63 | "name": "Google",
64 | "logo": {
65 | "@type": "ImageObject",
66 | "url": "http://cdn.ampproject.org/logo.jpg",
67 | "width": 600,
68 | "height": 60
69 | }
70 | },
71 | "image": {
72 | "@type": "ImageObject",
73 | "url": "http://cdn.ampproject.org/leader.jpg",
74 | "height": 2000,
75 | "width": 800
76 | }
77 | }
78 | </script>
79 | [/sourcecode]
80 |
81 | More examples can be found in [ampproject examples folder](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples), including the alternative HTML attribute syntax).
82 |
83 | Note: This Schema.org definition is a requirement to make your content eligible to appear in the demo of the [Google Search news carousel (try on mobile)](https://g.co/ampdemo).
84 | See also [Top Stories with AMP](https://developers.google.com/structured-data/carousels/top-stories), and the [Structured Data Testing Tool](https://developers.google.com/structured-data/testing-tool/).
85 |
86 | ### Other metadata for even more platforms
87 |
88 | Head to the [Social Discovery guide at Web Fundamentals](https://developers.google.com/web/fundamentals/discovery-and-monetization/social-discovery/) to learn about all the other different ways of preparing your content for discovery and distribution.
89 |
```
