This is page 10 of 20. Use http://codebase.md/cloudflare/docs/imgs/%7B%7Bg.url(parentDoc.pod_path,%20locale=usedDoc.locale).path%7D%7D?page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/publishers/publisher_icon_fast.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 121.81 116.64"><defs><style>.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-2,.cls-4,.cls-8,.cls-9{fill:none;}.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-18,.cls-19,.cls-2,.cls-3,.cls-4,.cls-5,.cls-7,.cls-8,.cls-9{stroke-miterlimit:10;}.cls-1,.cls-2{stroke-width:5.45px;opacity:0.8;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-18,.cls-19,.cls-3,.cls-5,.cls-7{fill:#fff;}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke-width:0.95px;stroke:url(#linear-gradient-4);}.cls-18,.cls-19,.cls-5{fill-opacity:0.9;}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{fill: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);}.cls-10{stroke:url(#linear-gradient-10);}.cls-11{stroke:url(#linear-gradient-11);}.cls-12{stroke:url(#linear-gradient-12);}.cls-13{stroke:url(#linear-gradient-13);}.cls-14{stroke:url(#linear-gradient-14);}.cls-15{stroke:url(#linear-gradient-15);}.cls-16{stroke:url(#linear-gradient-16);}.cls-17{fill:#0dd7ff;fill-opacity:0.7;}.cls-18{stroke:url(#linear-gradient-17);}.cls-19{stroke:url(#linear-gradient-18);}</style><linearGradient id="linear-gradient" x1="-7413.3" y1="219.71" x2="-7378.42" y2="219.71" gradientTransform="translate(7328.11 -1479.22) rotate(-10.05)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0389ff"/><stop offset="0.5" stop-color="#0dd7ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-2" x1="-7416.92" y1="228.36" x2="-7357.93" y2="228.36" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" y1="60.33" x2="70" y2="60.33" 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-4" x1="0.27" y1="44.33" x2="69.73" y2="44.33" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-5" x1="-1302.69" y1="-2808.96" x2="-1246.66" y2="-2808.96" gradientTransform="matrix(0.79, -0.45, 0.1, 1.21, 1341.68, 2889.78)" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-6" x1="59.09" y1="79.96" x2="73.67" y2="71.72" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-7" x1="-1277.63" y1="-2795.2" x2="-1270.73" y2="-2795.2" gradientTransform="matrix(0.79, -0.45, 0.1, 1.21, 1341.68, 2889.78)" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-8" x1="-1275.16" y1="-2819.77" x2="-1275.16" y2="-2822.72" gradientTransform="matrix(0.79, -0.45, 0.1, 1.21, 1341.68, 2889.78)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd7ff"/><stop offset="0.49" stop-color="#0389ff"/><stop offset="1" stop-color="#1c79c4"/></linearGradient><linearGradient id="linear-gradient-9" x1="-19.73" y1="2434.35" x2="-19.73" y2="2431.41" gradientTransform="matrix(0.63, 0.54, -0.49, 1.17, 1281.8, -2786.19)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-10" x1="-1350.51" y1="-1343.81" x2="-1350.51" y2="-1346.76" gradientTransform="matrix(0.79, -0.19, -0.07, 1.27, 1045.59, 1512.68)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-11" x1="831.71" y1="3407.9" x2="831.71" y2="3404.95" gradientTransform="matrix(0.53, 0.74, -0.6, 1.05, 1675.78, -4149.19)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-12" x1="2176.65" y1="4412.96" x2="2176.65" y2="4410.01" gradientTransform="matrix(0.37, 0.97, -0.71, 0.85, 2383.49, -5792.46)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-13" x1="9838.49" y1="-7424.56" x2="9838.49" y2="-7427.51" gradientTransform="matrix(-0.49, 1.17, 0.63, 0.54, 9551.99, -7464.28)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-14" x1="12288.4" y1="-4240.39" x2="12288.4" y2="-4243.33" gradientTransform="matrix(-0.75, 0.69, 0.26, 1.09, 10425.35, -3793.05)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-15" x1="8726.68" y1="-8084.68" x2="8726.68" y2="-8087.63" gradientTransform="matrix(-0.37, 1.25, 0.71, 0.31, 8983.6, -8282.91)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-16" x1="7140.99" y1="-8616.44" x2="7140.99" y2="-8619.39" gradientTransform="matrix(-0.19, 1.29, 0.77, 0.01, 8085.76, -9017.99)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-17" x1="8.75" y1="57.83" x2="49.25" y2="57.83" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-18" x1="8.75" y1="66.08" x2="41.75" y2="66.08" xlink:href="#linear-gradient-3"/></defs><title>publisher_icon_fast</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="99.5" y1="19.83" x2="68.86" y2="36.74"/><line class="cls-2" x1="120.5" y1="20.83" x2="67.5" y2="49.83"/><polygon class="cls-3" points="0.5 55.83 0.5 103.83 69.5 64.83 69.5 16.83 0.5 55.83"/><line class="cls-4" x1="0.5" y1="63.83" x2="69.5" y2="24.83"/><path class="cls-5" d="M84,71.9C82.53,53.54,71.58,44.18,59.55,51S38.94,78.2,40.41,96.56Z"/><path class="cls-6" d="M62.5,82.53l1.57,1.31L70.91,67a.2.2,0,0,0-.36-.18L61,83.33"/><path class="cls-7" d="M64.93,82.69c-.16-2-1.33-3-2.62-2.24s-2.21,2.92-2.05,4.88,1.33,3,2.62,2.24S65.09,84.66,64.93,82.69Z"/><line class="cls-8" x1="59.16" y1="51.21" x2="59.44" y2="54.77"/><line class="cls-9" x1="73.78" y1="50.31" x2="72.33" y2="53.76"/><line class="cls-10" x1="66.55" y1="48.93" x2="66.35" y2="52.69"/><line class="cls-11" x1="78.3" y1="54.22" x2="76.54" y2="57.32"/><line class="cls-12" x1="81.37" y1="60.32" x2="79.29" y2="62.82"/><line class="cls-13" x1="47.17" y1="64.74" x2="49.03" y2="66.32"/><line class="cls-14" x1="52.79" y1="56.09" x2="53.55" y2="59.3"/><line class="cls-15" x1="42.96" y1="74.83" x2="45.04" y2="75.76"/><line class="cls-16" x1="41.09" y1="83.72" x2="43.38" y2="83.76"/><circle class="cls-17" cx="21.17" cy="115.49" r="1.15"/><circle class="cls-17" cx="26.15" cy="105.15" r="1.15"/><circle class="cls-17" cx="31.49" cy="109.67" r="1.15"/><circle class="cls-17" cx="35" cy="103.82" r="1.15"/><circle class="cls-17" cx="34.49" cy="95.15" r="1.15"/><circle class="cls-17" cx="77.17" cy="21.49" r="1.15"/><circle class="cls-17" cx="7.17" cy="56.49" r="1.15" transform="translate(-49.77 57.41) rotate(-83.69)"/><circle class="cls-17" cx="3.97" cy="58.15" r="1.15" transform="translate(-54.27 55.7) rotate(-83.69)"/><circle class="cls-17" cx="10.37" cy="54.83" r="1.15" transform="translate(-45.27 59.11) rotate(-83.69)"/><circle class="cls-17" cx="82.15" cy="11.15" r="1.15"/><circle class="cls-17" cx="87.49" cy="15.67" r="1.15"/><circle class="cls-17" cx="91" cy="9.82" r="1.15"/><circle class="cls-17" cx="90.49" cy="1.15" r="1.15"/><line class="cls-18" x1="9" y1="69.33" x2="49" y2="46.33"/><line class="cls-19" x1="9" y1="75.33" x2="41.5" y2="56.83"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/latest/blog/new-default-placeholders-for-ads-in-amp.md:
--------------------------------------------------------------------------------
```markdown
---
class: post-blog post-detail
type: Blog
$title: New default placeholders for ads in AMP
id: new-default-placeholders-for-ads-in-amp
author: Vamsee Jasti
role: Product Manager, AMP Project
origin: "https://amphtml.wordpress.com/2017/02/02/new-default-placeholders-for-ads-in-amp/amp/"
excerpt: "We want to share a somewhat small but visually impactful feature that we are planning to launch on AMP. Content loads incredibly fast on AMP pages, but traditional ads often load relatively slowly. This leaves blank areas on publisher pages, which is a poor reading experience for the user as it can feel like the […]"
avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
date_data: 2017-02-02T13:14:47-08:00
$date: February 2, 2017
$parent: /content/latest/list-blog.html
components:
- social-share
---
<div class="amp-wp-article-content">
<p><span style="font-weight:400;">We want to share a somewhat small but visually impactful feature that we are planning to launch on AMP. </span></p>
<p>Content loads incredibly fast on AMP pages, but traditional ads often load relatively slowly. This leaves blank areas on publisher pages, which is a poor reading experience for the user as it can feel like the page is missing content.</p>
<p><span style="font-weight:400;">To deliver faster, lighter and more secure ads that are as fast as your AMP content, consider switching over to </span><a href="https://github.com/ampproject/amphtml/blob/master/ads/google/a4a/docs/a4a-readme.md" target="_blank">AMP Ads</a><span style="font-weight:400;">.</span></p>
<p><span style="font-weight:400;">In the meantime, in order to address the issue of blank ad spaces, we’ve added two default features to every ad placement on AMP pages. If an ad does not have a publisher-configured placeholder, AMP will automatically add:</span></p>
<ol>
<li style="font-weight:400;"><span style="font-weight:400;">A clearly marked “Ad” label</span></li>
<li style="font-weight:400;"><span style="font-weight:400;">A subtle loading animation at the top indicating that the ad is loading</span></li>
</ol>
<p style="text-align:center;"><img data-attachment-id="1006" data-permalink="https://amphtml.wordpress.com/2017/02/02/new-default-placeholders-for-ads-in-amp/fansided/" data-orig-file="https://amphtml.files.wordpress.com/2017/02/fansided.gif?w=660&h=526" data-orig-size="660,526" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="fansided" data-image-description="" data-medium-file="https://amphtml.files.wordpress.com/2017/02/fansided.gif?w=660&h=526?w=300" data-large-file="https://amphtml.files.wordpress.com/2017/02/fansided.gif?w=660&h=526?w=660" class=" size-full wp-image-1006 aligncenter" src="https://amphtml.files.wordpress.com/2017/02/fansided.gif?w=660&h=526" alt="fansided" width="660" height="526" /></p>
<p style="text-align:center;"><i><span style="font-weight:400;">The new default ad loading indicator and placeholder feature</span></i></p>
<p><span style="font-weight:400;">The clearly labeled placeholder allows the user to focus on the content and selectively shift their attention to ads. It also ensures that the user doesn’t think there</span><span style="font-weight:400;"> is missing content while the ad is loading.</span></p>
<p><img data-attachment-id="997" data-permalink="https://amphtml.wordpress.com/2017/02/02/new-default-placeholders-for-ads-in-amp/ad-animation/" data-orig-file="https://amphtml.files.wordpress.com/2017/02/ad-animation.gif?w=660" data-orig-size="480,82" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="ad-animation" data-image-description="" data-medium-file="https://amphtml.files.wordpress.com/2017/02/ad-animation.gif?w=660?w=300" data-large-file="https://amphtml.files.wordpress.com/2017/02/ad-animation.gif?w=660?w=480" class=" size-full wp-image-997 aligncenter" src="https://amphtml.files.wordpress.com/2017/02/ad-animation.gif?w=660" alt="ad-animation" /></p>
<p style="text-align:center;"><span style="font-weight:400;"> </span><i><span style="font-weight:400;"> A close-up of the subtle loading indicator</span></i></p>
<p><span style="font-weight:400;">We realize this could be a breaking change for a few publishers who have already configured </span><a href="https://www.ampproject.org/docs/reference/components/amp-ad#placeholder" target="_blank">default placeholders </a><span style="font-weight:400;">o</span><span style="font-weight:400;">n</span> <span style="font-weight:400;">t</span><span style="font-weight:400;">h</span><span style="font-weight:400;">e</span><span style="font-weight:400;">i</span><span style="font-weight:400;">r</span> <span style="font-weight:400;">p</span><span style="font-weight:400;">a</span><span style="font-weight:400;">g</span><span style="font-weight:400;">e</span><span style="font-weight:400;">s</span><span style="font-weight:400;">, but these change come with significant user benefits described above. Publisher-configured placeholders will always retain full control over the ad loading experience.</span></p>
<p><span style="font-weight:400;">We recommend that you try out how this treatment fits with existing content by </span><a href="https://www.ampproject.org/docs/reference/experimental" target="_blank">opting into the AMP dev channel</a><span style="font-weight:400;"> and subscribing into the ‘amp-ad-loading-ux’ experiment. This change is planned for a production release on Thursday Feb 9th, 2017.</span></p>
<p><span style="font-weight:400;">We look forward to your </span><a href="https://github.com/ampproject/amphtml/issues/5918"><span style="font-weight:400;">feedback</span></a><span style="font-weight:400;">!</span></p>
<p><i><span style="font-weight:400;">Posted by Vamsee Jasti, Product Manager, AMP Project</span></i></p><br /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/amphtml.wordpress.com/993/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/amphtml.wordpress.com/993/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=amphtml.wordpress.com&blog=102788268&post=993&subd=amphtml&ref=&feed=1" width="1" height="1" />
</div>
```
--------------------------------------------------------------------------------
/content/docs/reference/common_attributes.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Common Attributes
$order: 3
---
AMP provides a set of common attributes that are extended to many AMP components (and HTML elements). This document describes each of the following attributes:
* [fallback](#fallback)
* [heights](#heights)
* [layout](#layout)
* [media](#media)
* [noloading](#noloading)
* [on](#on)
* [placeholder](#placeholder)
* [sizes](#sizes)
* [width and height](#width-and-height)
## fallback
A fallback is a convention that allows the element to communicate to the reader that the browser does not support the element or that loading the underlying resource failed. The `fallback` attribute can be placed on any HTML element that is a direct child of an AMP element that supports fallbacks. The exact behavior with respect to the fallback is up to the element's implementation but typically the fallback element would be shown in place of the regular element.
Often used with: images, animations, audio, and videos
Example:
[sourcecode:html]
<amp-anim src="animated.gif" width="466" height="355" layout="responsive" >
<div fallback>Cannot play animated images on this device.</div>
</amp-anim>
[/sourcecode]
For more information, see [Placeholders & fallbacks](https://www.ampproject.org/docs/guides/responsive/placeholders).
## heights
All AMP elements that support the `responsive` layout, also support the `heights` attribute. The value of this attribute is a sizes expression based on media expressions, similar to the [sizes attribute on `img` tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) but with two key differences:
1. The value applies to the height, not the width of the element.
2. Percent values are allowed. A percent value indicates the percent of the element's width. For example, a value of `80%` indicates that the height of the element will be 80% of the element's width.
{% call callout('Note', type='note') %}
When the `heights` attribute is specified along with `width` and `height`, the `layout` is defaulted to `responsive`.
{% endcall %}
Example:
[sourcecode:html]
<amp-img src="amp.png"
width="320" height="256"
heights="(min-width:500px) 200px, 80%">
</amp-img>
[/sourcecode]
For more information, see [Art direction with srcset, sizes & heights](https://www.ampproject.org/docs/guides/responsive/art_direction).
## layout
AMP provides a set of [layouts](https://www.ampproject.org/docs/guides/responsive/control_layout#the-layout-attribute) that specify how an AMP component behaves in the document layout. You can specify a layout for a component by adding the `layout` attribute with one of the supported layout values for the element (see the element's documentation for what values are supported).
Example:
[sourcecode:html]
<amp-img src="/img/amp.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image">
</amp-img>
[/sourcecode]
For more information, see [Layout & Media queries](https://www.ampproject.org/docs/guides/responsive/control_layout) and the [Layout Spec](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md).
## media
All AMP elements support the `media` attribute. The value of `media` is a media query. If the query does not match, the element is not rendered and its resources and potentially its child resources will not be fetched. If the browser window changes size or orientation, the media queries are re-evaluated and elements are hidden and shown based on the new results.
Example:
[sourcecode:html]
<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width="466"
height="355" layout="responsive"></amp-img>
<amp-img
media="(max-width: 649px)"
src="narrow.jpg"
width="527"
height="193" layout="responsive"></amp-img>
[/sourcecode]
For more information, see [Layout & Media queries](https://www.ampproject.org/docs/guides/responsive/control_layout#element-media-queries).
## noloading
The `noloading` attribute indicates whether the "loading indicator" should be turned **off** for this element. Many AMP elements show a "loading indicator", which is a basic animation that shows that the element has not yet fully loaded.
Often used with: images, animations, videos, and ads
Example:
[sourcecode:html]
<amp-img src="card.jpg"
noloading
height="190"
width="297"
layout="responsive">
</amp-img>
[/sourcecode]
## on
The `on` attribute is used to install event handlers on elements. The events that are supported depend on the element.
Often used with: lightboxes, sidebars, live lists, and forms
Syntax:
[sourcecode:text]
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
[/sourcecode]
Example:
[sourcecode:html]
<button on="tap:my-lightbox">Open lightbox</button>
<amp-lightbox id="my-lightbox" layout="nodisplay">
...
</amp-lightbox>
[/sourcecode]
For more information, see [Actions and Events in AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-actions-and-events.md).
## placeholder
The `placeholder` attribute indicates that the element marked with this attribute acts as a placeholder for the parent AMP element. The attribute can be placed on any HTML element that is a direct child of an AMP element that supports placeholders. By default, the placeholder is immediately shown for the AMP element, even if the AMP element's resources have not been downloaded or initialized. Once ready, the AMP element typically hides its placeholder and shows the content. The exact behavior with respect to the placeholder is up to the element's implementation.
Often used with: images, animations, videos, and ads
Example:
[sourcecode:html]
<amp-anim src="animated.gif" width="466" height="355" layout="responsive">
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>
[/sourcecode]
For more information, see [Placeholders & fallbacks](https://www.ampproject.org/docs/guides/responsive/placeholders).
## sizes
All AMP elements that support the `responsive` layout, also support the `sizes` attribute. The value of the `sizes` attribute is a sizes expression as described in the [sizes attribute on `img` tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), but extended to all elements, not just images.
Example:
[sourcecode:html]
<amp-img src="amp.png"
width="400" height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw">
</amp-img>
[/sourcecode]
For more information, see [Art direction with srcset, sizes & heights](https://www.ampproject.org/docs/guides/responsive/art_direction).
## width and height
For some [layouts](https://www.ampproject.org/docs/guides/responsive/control_layout#the-layout-attribute), AMP components must have a `width` and `height` attribute that contains an integer pixel value.
Example:
[sourcecode:html]
<amp-anim width="245"
height="300"
src="/img/cat.gif"
alt="cat animation">
</amp-anim>
[/sourcecode]
For more information, see [Layout & Media queries](https://www.ampproject.org/docs/guides/responsive/control_layout) and the [Layout Spec](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md).
```
--------------------------------------------------------------------------------
/views/about-who-vertical.html:
--------------------------------------------------------------------------------
```html
{% extends "/views/base.html" %}
{% set navmarkup %}
{% include "/views/partials/breadcrumb-nav.html" %}
{% endset %}
{% block main %}
<div class="about-who-block {{doc.vertical_class}}">
{{ navmarkup|safe }}
<div class="container xl">
<section class="hero">
{% if doc.hero.hero_icon %}
<amp-img class="icon"
noloading
width="{{doc.hero.hero_icon_width}}"
height="{{doc.hero.hero_icon_height}}"
layout=responsive
src="/static/img/about/who-use-amp/{{doc.hero.hero_icon}}">
</amp-img>
{% endif %}
<div class="hero-images desktop-only">
{% if doc.hero.triangle_img %}
<amp-img class="triangle"
noloading
width="{{doc.hero.triangle_img_width}}"
height="{{doc.hero.triangle_img_height}}"
layout=responsive
src="/static/img/about/who-use-amp/{{doc.hero.triangle_img}}">
</amp-img>
{% endif %}
{% if doc.hero.lines_img %}
<amp-img class="lines"
noloading
width="{{doc.hero.lines_img_width}}"
height="{{doc.hero.lines_img_height}}"
layout=responsive
src="/static/img/about/who-use-amp/{{doc.hero.lines_img}}">
</amp-img>
{% endif %}
{% if doc.hero.hero_img_base %}
<amp-img class="phones"
noloading
width="{{doc.hero.hero_img_width}}"
height="{{doc.hero.hero_img_height}}"
layout=responsive
srcset="{{doc.hero.hero_img_base + '.png ' ~ doc.hero.hero_img_width ~ 'w'}},
{{doc.hero.hero_img_base + '@1_5x.png ' ~ (doc.hero.hero_img_width * 0.66) ~ 'w'}},
{{doc.hero.hero_img_base + '@1x.png ' ~ (doc.hero.hero_img_width * 0.5) ~ 'w'}}"
src="{{doc.hero.hero_img_base + '.png'}}">
</amp-img>
{% endif %}
</div>
<p class="label">{{doc.title}}</p>
<div class="tablet-wrapper">
<h1 class="title">{{_(doc.hero.title)}}</h1>
<p class="small paragraph">{{_(doc.hero.paragraph)}}</p>
</div>
<div class="example-users">
{% for user in doc.hero.users %}
<div class="example-user-logo{% if user.class %} {{user.class}}{% endif %}">
<amp-img
noloading
width={{user.logo_width}}
height={{user.logo_height}}
layout=responsive
src="/static/img/about/who-use-amp/{{user.logo}}">
</amp-img>
</div>
{% endfor %}
</div>
</section>
<section class="why-use">
<h3>{{_(doc.why.title)}}</h3>
<div class="reasons desktop">
{% for reason in doc.why.reasons %}
<div class="reason">
<amp-img
noloading
height=140
layout=fixed-height
src="/static/img/about/who-use-amp/{{reason.icon}}">
</amp-img>
<h4>{{_(reason.title)}}</h4>
<p class="small">{{_(reason.paragraph)}}</p>
</div>
{% endfor %}
</div>
<div class="reasons tablet">
<amp-carousel class="latest-carousel"
height="550"
layout="fixed-height"
type="slides">
<div class="card-container">
{% for reason in doc.why.reasons %}
<div class="reason card">
<amp-img
noloading
height=150
width=150
layout=responsive
src="/static/img/about/who-use-amp/{{reason.icon}}">
</amp-img>
<h4>{{_(reason.title)}}</h4>
<div><p class="small">{{_(reason.paragraph)}}</p></div>
</div>
{% if loop.last and loop.index is not divisibleby 2 %}
{% for number in range(0, 2 - loop.index % 2) %}
<div class="card card--spacer"></div>
{% endfor %}
{% endif %}
{% if not loop.last and loop.index is divisibleby 2 %}
</div>
<div class="card-container">
{% endif %}
{% endfor %}
</div>
</amp-carousel>
</div>
<div class="reasons mobile">
<amp-carousel class="latest-carousel"
height="550"
layout="fixed-height"
type="slides">
{% for reason in doc.why.reasons %}
<div class="card-container">
<div class="reason card">
<amp-img
noloading
height=150
width=150
layout=responsive
src="/static/img/about/who-use-amp/{{reason.icon}}">
</amp-img>
<h4>{{_(reason.title)}}</h4>
<div><p class="small">{{_(reason.paragraph)}}</p></div>
</div>
</div>
{% endfor %}
</amp-carousel>
</div>
</section>
{% if doc.points %}
{% with points = doc.points %}
{% include "/views/partials/points.html" %}
{% endwith %}
{% endif %}
{% if doc.case %}
<section class="case-study">
<h3>{{_(doc.case.title)}}</h3>
<div class="card-container grid case desktop">
{% for case in doc.case.cases %}
{% set locale = doc.locale %}
{% with doc = g.doc('/content/learn/case-studies/' ~ case.filename, locale=doc.locale), isCase = true %}
{% include "/views/partials/grid-card.html" %}
{% endwith %}
{% endfor %}
</div>
<amp-carousel
height="430"
layout="fixed-height"
type="slides">
{% for case in doc.case.cases %}
<div class="card-container grid case">
{% with doc = g.doc('/content/learn/case-studies/' ~ case.filename, locale=doc.locale), isCase = true %}
{% include "/views/partials/grid-card.html" %}
{% endwith %}
</div>
{% endfor %}
</amp-carousel>
{% if doc.case.lines_img %}
<amp-img class="lines"
noloading
width={{doc.case.lines_img_width}}
height={{doc.case.lines_img_height}}
layout=responsive
src="/static/img/about/who-use-amp/{{doc.case.lines_img}}">
</amp-img>
{% endif %}
</section>
{% endif %}
</div>
{% if doc.large_cta %}
{% with large_cta = doc.large_cta %}
{% include "/views/partials/large-cta.html" %}
{% endwith %}
{% endif %}
</div>
{% if doc.cta %}
{% with cta = doc.cta %}
{% include "/views/partials/footer-cta.html" %}
{% endwith %}
{% endif %}
{% include "/views/partials/footer.html" %}
{% endblock %}
```
--------------------------------------------------------------------------------
/assets/sass/pages/_case-study.scss:
--------------------------------------------------------------------------------
```scss
// case-studies landing page
.case-studies {
.wrap::before {
transform: skewY(-36deg);
transform-origin: top left;
}
.post-title,
.post-tag {
text-align: center;
}
.post-tag {
@extend %text-label;
color: $color-ampblue;
display: block;
padding-bottom: 25px;
}
.post-title {
margin: 0 auto;
max-width: 700px;
}
amp-img {
margin: 0;
}
}
// individual case study pages
.case-study {
.post-header,
.post-footer {
margin: 0 auto;
padding: 0;
}
.post-footer {
margin-top: 90px;
h2 {
margin-bottom: 60px;
text-align: center;
}
}
.post-logo {
margin: 25px auto;
width: 200px;
}
&--slate {
.post-logo {
width: 150px;
}
}
.post-results {
background: $gradient-med-faded;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 0 -120px;
padding: 75px 75px 135px 75px;
}
.share-module {
.share-buttons {
top: -291px;
amp-social-share {
bottom: 0;
top: auto;
}
}
.control[expanded] + section amp-social-share {
&:nth-child(1) {
transform: translateY(-$share-button-size-full * 4);
}
&:nth-child(2) {
transform: translateY(-$share-button-size-full * 3);
}
&:nth-child(3) {
transform: translateY(-$share-button-size-full * 2);
}
&:nth-child(4) {
transform: translateY(-$share-button-size-full);
}
}
}
.result {
flex: 1 1 auto;
margin: 20px;
}
.result-stat,
.result-description {
margin: 0;
text-align: center;
}
.result-stat {
color: $color-brightblue;
font-size: 120px;
font-weight: 200;
line-height: 120px;
margin-bottom: 10px;
overflow-wrap: normal;
white-space: nowrap;
word-break: normal;
word-wrap: normal;
}
.post-results--small .result-stat {
font-size: 70px;
}
.result-description {
@extend %text-label;
color: $color-ampblue;
font-weight: 300;
line-height: 24px;
margin: 0 auto;
max-width: 175px;
}
.post-download {
margin-top: 50px;
}
.img-right,
.img-left {
display: inline-block;
min-width: 350px;
width: 35%;
}
.img-right {
float: right;
margin-left: 25px;
margin-right: -30%;
&.wapo amp-img {
top: 50px;
transform: scale(1.1);
transform-origin: left center;
}
&.gizmodo amp-img {
top: 70px;
transform: scale(1.3);
transform-origin: left center;
}
&.wired amp-img {
transform: scale(1.1);
transform-origin: left top;
}
&.slate amp-img {
top: 20px;
transform: scale(1.4);
transform-origin: left center;
}
&.relay amp-img {
top: 40px;
transform: scale(1.1);
transform-origin: left center;
}
&.teads {
margin-bottom: -70px;
}
}
.img-left {
float: left;
margin-left: -30%;
margin-right: 25px;
&.gizmodo {
margin-bottom: 80px;
amp-img {
right: 30px;
top: 110px;
transform: scale(1.4);
transform-origin: right center;
}
}
&.wired {
margin-bottom: 120px;
amp-img {
left: 40%;
top: 90px;
transform: scale(2.3);
transform-origin: right center;
}
}
&.slate amp-img {
top: 20px;
transform: scale(1.4);
transform-origin: right center;
}
&.relay {
margin-bottom: 50px;
amp-img {
right: 10px;
top: 100px;
transform: scale(1.4);
transform-origin: right center;
}
}
}
.img-mobile {
display: none;
}
.card {
flex: 0 0 calc(50% - 20px);
flex-basis: calc(50% - 20px);
}
// overriding _post-detail.scss styles
.wrap::before {
content: none;
}
&.post-detail .post-content li::before {
margin-right: 20px;
position: static;
}
.post-sheet {
margin: -60px auto 0 auto;
padding-top: 100px;
}
.post-video {
margin: 40px 0;
}
.post-content {
amp-img {
margin: 0;
}
a {
&.cta {
font-weight: 400;
letter-spacing: .56px;
text-transform: uppercase;
}
}
h4:not(:first-child) {
margin-top: 2em;
}
blockquote {
border: 0;
font-size: 16px;
font-style: normal;
margin: 2.5em 0;
padding-left: 2.5em;
p {
color: $color-ampblue;
+ p:last-child {
color: $color-grey-md;
font-size: 14px;
}
}
}
}
}
@include max-screen($mobile-breakpoint) {
.case-studies {
.post-title,
.post-tag {
text-align: left;
text-align: start;
}
.post-tag {
padding-bottom: 10px;
}
.post-title {
max-width: none;
}
}
.case-study {
.post-logo {
margin: 0;
}
.post-results {
margin: 0;
padding: 60px 30px;
}
.result {
margin: 10px;
}
.result-stat {
font-size: 85px;
line-height: 85px;
}
.result-description {
line-height: 16px;
}
.img-right,
.img-left {
min-width: 200px;
}
.img-right {
margin-right: 0;
}
.img-left {
margin-left: 0;
}
.post-sheet {
margin-top: 0;
padding-top: 40px;
}
.share-module {
.text-label {
display: none;
}
}
.post-content {
blockquote {
font-size: 14px;
p + p:last-child {
font-size: 12px;
}
}
}
.post-footer {
h2 {
margin-bottom: 0;
}
}
}
}
@include max-screen($mobile-medium-breakpoint) {
.case-study {
.post-logo {
max-width: 150px;
}
&--slate {
.post-logo {
max-width: 100px;
}
}
.post-results {
padding: 30px;
}
.result {
margin: 10px;
}
.result-stat {
font-size: 72px;
line-height: 72px;
}
.post-download {
margin-top: 30px;
}
.post-sheet {
margin-top: 0;
}
.post-content {
blockquote {
margin: 1.5em 0;
padding-left: 1.5em;
}
}
.img-right,
.img-left {
display: block;
float: none;
margin: 0;
width: auto;
}
.img-right {
&.wapo amp-img {
left: 10%;
top: 50px;
}
&.gizmodo amp-img {
left: 20%;
top: 50px;
}
&.wired amp-img {
left: 13%;
top: 20px;
}
&.slate amp-img {
left: 10%;
top: 70px;
}
&.relay amp-img {
left: 13%;
}
&.teads amp-img {
left: 17%;
}
}
.img-left {
&.gizmodo {
amp-img {
right: 20%;
}
}
&.wired {
margin-bottom: 180px;
amp-img {
left: 30%;
}
}
&.slate amp-img {
right: 20%;
top: 50px;
}
&.relay {
amp-img {
right: 20%;
}
}
}
.img-desktop {
display: none;
}
.img-mobile {
display: block;
}
}
}
```
--------------------------------------------------------------------------------
/content/support/faqs/overview.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: AMP Overview
$order: 0
$parent: /content/support/faqs.md
class: faqs
cta:
title@: Next FAQ
link_text@: Platform and Technology Company Involvement
link_url: /content/support/faqs/platform-involvement.md
faq:
- title@: What is the Accelerated Mobile Pages project?
answer@: |
The Accelerated Mobile Pages (“AMP”) Project is an open source initiative that came out of discussions between publishers and technology companies about the need to improve the entire mobile content ecosystem for everyone -- publishers, consumer platforms, creators, and users.
Today, the expectation is that content should load super fast and be easy to explore. The reality is that content can take several seconds to load, or, because the user abandons the slow page, never fully loads at all. Accelerated Mobile Pages are web pages designed to load near instantaneously -- they are a step towards a better mobile web for all.
- title@: What are the benefits of Accelerated Mobile Pages?
answer@: |
Speed matters and instant is the ideal. Research has shown higher bounce rates associated with slower-loading web pages. Using the AMP format will make it far more compelling for people to consume and engage with more content. But this isn’t just about speed and performance. We also want to promote enhanced distribution so that publishers can take advantage of the open web’s potential for their content to appear everywhere quickly -- across platforms and apps -- which can lead to more revenue via ads and subscriptions.
- title@: How do Accelerated Mobile Pages work?
answer@: |
Accelerated Mobile Pages are just like any other HTML page, but with a limited set of allowed technical functionality that is defined and governed by the open source AMP spec. Just like all web pages, Accelerated Mobile Pages will load in any modern browser or app webview.
AMP files take advantage of various technical and architectural approaches that prioritize speed to provide a faster experience for users. AMP developers can use a rich and growing library of web components that offer the ability to embed rich media objects like video and social posts, display advertising, or collect analytics. The goal is not to homogenize how content looks and feels, but instead to build a more common technical core between pages that speeds up load times.
In addition, AMP files can be cached in the cloud in order to reduce the time content takes to get to a user’s mobile device. By using the AMP format, content producers are making the content in AMP files available to be cached by third parties. Under this type of framework, publishers continue to control their content, but platforms can easily cache or mirror the content for optimal delivery speed to users. Google has provided the [Google AMP Cache](https://developers.google.com/amp/cache/) that can be used by anyone at no cost, and all AMPs will be cached by the Google AMP Cache. Other companies may build their own AMP cache as well.
In summary, the goal is that the combination of limited technical functionality with a distribution system built around caching will lead to better performing pages, and increased audience development for publishers.
- title@: Why does the Accelerated Mobile Pages Project take an open source approach?
answer@: |
The companies involved in the project want to make the mobile web work better for all -- not just for one platform, one set of technologies, or one set of publishers. Making the project open source enables people to share and contribute their ideas and code for making the mobile web fast. We are just at the beginning of that journey and we look forward to other publishers and technology companies joining along the way.
- title@: Who can use Accelerated Mobile Pages?
answer@: |
The project is open to all players in the ecosystem - publishers, consumer platforms, and creators. To get an idea who some of the companies and sites are who use AMP, head to the [Who page](/who).
- title@: What are the consequences of using Accelerated Mobile Pages?
answer@: |
By using the AMP format, content producers are making the content in AMP files available to be crawled, indexed & displayed (subject to the robots exclusion protocol) and cached by third parties.
- title@: As a publisher, what responsibilities do I have when using Accelerated Mobile Pages?
answer@: |
If a publisher collects data from users who view its AMP pages, such data collection is governed by the publisher’s privacy policy. It is the publisher’s responsibility to disclose its privacy policy, ideally by including a link to it within each of the publisher’s AMP pages.
Furthermore, the laws in many jurisdictions, such as in the European Union, require a publisher to give visitors information about cookies and other forms of local storage used on the publisher’s web pages (including AMP pages). In many cases, these laws also require that the publisher obtain consent. It is the publisher’s responsibility to determine, based on its use of cookies, what type of notice would be appropriate. Additional information and tools for generating cookie notices can be found at www.cookiechoices.org. Note that the AMP component [amp-user-notification](https://www.ampproject.org/docs/reference/components/amp-user-notification) provides a way to display a dismissable notification to the user.
If an AMP page is shown within a viewer on a third party platform, such as a Google AMP Viewer on Google Search, the viewer may be a hybrid environment in which the AMP publisher and the third party platform may each collect data about the user. In such a case, data collection by each party is governed by that party’s privacy policy (i.e., in a hybrid viewer environment, data collected by the AMP publisher is governed by its privacy policy and data collected by the third party platform is governed by the platform’s privacy policy). It is each party’s responsibility to disclose its privacy policy and comply with relevant data regulations, including European laws relating to its use of cookies.
- title@: What type of content works best using Accelerated Mobile Pages?
answer@: |
The goal is for all published content, from news stories to videos and from blogs to photographs and GIFs, to work using Accelerated Mobile Pages.
- title@: As a publisher, does making my content work for Accelerated Mobile Pages entail more work?
answer@: |
In short, not much. Since “AMP HTML” is built entirely out of existing web technologies, the development process mirrors the one publishers are already using today. Publishers can familiarize themselves with the [AMP HTML specification](https://www.ampproject.org/docs/reference/spec) on GitHub. For those used to the current process, we don’t expect a significant learning curve.
- title@: How can a publisher get content into AMP HTML?
answer@: |
Publishers and Content Management System (CMS) providers can develop an integration with their CMS to generate AMP content. Automattic has already published a [WordPress AMP plugin](https://wordpress.org/plugins/amp/) and we hope that all content management systems will add support for AMP HTML pages.
---
```
--------------------------------------------------------------------------------
/assets/sass/_doc-nav.scss:
--------------------------------------------------------------------------------
```scss
.doc-sidebar {
border-left: 3px solid $color-grey-lt;
border-right: 3px solid $color-grey-lt;
bottom: 0;
display: flex;
flex-direction: column;
left: 0;
position: fixed;
top: $header-height;
width: 350px;
z-index: 1;
.current-header {
background: $gradient-anglebuild;
padding: 35px 30px 20px;
margin: 0 -3px;
h1 {
color: $color-white;
}
h1 {
font-size: 40px;
}
}
.current-sections {
flex: 1 1 auto;
height: 0;
overflow: auto;
padding: 30px;
}
ul, ol, li {
list-style-type: none;
}
li {
background: none;
border: none;
position: relative;
padding: 0;
}
.section-name {
background: none;
border: none;
margin: 0;
position: relative;
&:hover {
background: #f4fcfe;
}
a {
@extend %text-base;
@extend %text-small;
font-size: 20px;
}
}
li {
& > .section-name.open > a {
color: $color-ampblue;
}
}
li.top-level {
& > .section-name {
padding: 20px;
&::before {
background: $gradient-bold;
bottom: 0;
content: '';
left: 0;
position: absolute;
top: 0;
width: 2px;
}
}
&.expandable {
.section-name {
padding-right: 30px;
}
& > .section-name::after {
@include sprite(carat);
content: '';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%) rotate(180deg);
}
.section-name.current::after,
.section-name.open::after {
transform: translateY(-50%);
}
}
a.external {
background: no-repeat right 3px / 20px;
display: inline-block;
padding-right: 16px;
width: 95%;
&:hover {
background-image: url('/static/img/ic_open_in_new_black.svg');
}
}
}
li.sub-level {
& > .section-name {
@extend .small;
padding: 5px 20px 5px 20px;
a {
color: black;
display: inline-block;
font-size: 16px;
line-height: 1.3;
}
&.current a {
color: $color-ampblue;
}
}
&.expandable {
.section-name::after {
color: $color-grey-ltmd;
content: '+';
font-size: 20px;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.section-name.current,
.section-name.open {
&::after {
content: '–';
}
}
}
li {
color: $color-grey-md;
padding-left: 30px;
.section-name {
&::after {
display: none;
}
a {
display: inline-block;
font-size: 14px;
line-height: 1.5;
}
}
&:hover {
background: #f4fcfe;
}
}
}
.navigation {
background: white;
border-right: 3px solid $color-grey-lt;
display: flex;
width: 350px;
.previous, .next {
@extend %text-base;
@extend %text-body;
border-bottom: 3px solid $color-grey-lt;
border-top: 3px solid $color-grey-lt;
color: $color-black-95;
display: flex;
flex-direction: column;
flex: 1 1 auto;
justify-content: center;
min-height: 50px;
padding: 15px 20px;
position: relative;
transition: color 0.3s;
width: 0;
&:before {
background: $gradient-anglebuild;
bottom: 0;
content: '';
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.3s;
z-index: 0;
}
&::after {
content: '';
height: 20px;
position: absolute;
top: 50%;
transition: transform 0.3s;
transform: translateY(-50%);
width: 20px;
}
.navigation-label {
z-index: 2;
}
.subtitle {
color: $color-ampblue;
font-size: 12px;
margin: 0;
}
&:hover {
color: white;
&:before {
opacity: 1;
}
&::after {
background: url(/static/img/arrow.svg) center/cover no-repeat;
}
}
}
.previous {
border-right: 3px solid $color-grey-lt;
text-align: right;
padding-left: 50px;
&::after {
background: url(/static/img/arrow-blue.svg) center/cover no-repeat;
left: 30px;
transform: translateY(-50%) rotate(180deg);
}
&:hover::after {
transform: translate(-15px, -50%) rotate(180deg);
}
}
.next {
padding-right: 50px;
&::after {
background: url(/static/img/arrow-blue.svg) center/cover no-repeat;
right: 30px;
}
&:hover::after {
transform: translate(15px, -50%);
}
}
}
@include max-screen($mobile-breakpoint) {
border: none;
border-bottom: 3px solid $color-grey-lt;
display: block;
margin: 0 -22px;
padding: 0 22px;
position: static;
width: 100%;
.current-header {
background: white;
padding: 20px 30px;
.breadcrumb {
color: $color-grey-md;
}
h1 {
color: $color-black-95;
margin-bottom: 0;
}
}
.current-sections {
height: auto;
padding: 5px 20px 30px;
}
li.top-level {
& > .section-name {
padding: 5px 15px;
}
}
li.sub-level {
& > .section-name {
padding: 5px 15px;
}
}
.navigation {
display: none;
}
}
}
.doc-footer {
border-left: 3px solid $color-grey-lt;
margin-left: 353px;
.cta-line.left {
display: none;
}
@include max-screen($mobile-breakpoint) {
border: 0;
margin-left: 0;
}
}
.rtl {
.doc-sidebar {
left: auto;
right: 0;
li.top-level {
a.external {
background-position: left 3px;
padding: 0 0 0 16px;
}
& > .section-name {
&::before {
left: auto;
right: 0;
}
}
&.expandable {
& > .section-name {
padding: 20px 20px 20px 30px;
}
.section-name {
&::after {
left: 10px;
right: auto;
}
}
}
}
li.sub-level > .section-name {
padding: 5px 20px 5px 30px;
}
.navigation {
border-left: 3px solid $color-grey-lt;
border-right: 0;
.next {
padding: 15px 20px 15px 50px;
&::after {
left: 30px;
right: auto;
transform: translateY(-50%) rotate(180deg);
}
&:hover::after {
transform: translate(-15px, -50%) rotate(180deg);
}
}
.previous {
border-left: 3px solid $color-grey-lt;
border-right: 0;
padding: 15px 50px 15px 20px;
.navigation-label {
padding-right: 10px;
}
&::after {
left: auto;
right: 30px;
transform: translateY(-50%);
}
&:hover::after {
transform: translate(15px, -50%);
}
}
}
}
.doc-footer {
margin: 0 353px 0 0;
border-left: 0;
border-right: 3px solid $color-grey-lt;
@include max-screen($mobile-breakpoint) {
border: 0;
margin-right: 0;
}
}
}
```
--------------------------------------------------------------------------------
/assets/sass/pages/_roadmap.scss:
--------------------------------------------------------------------------------
```scss
@mixin roadmap-stage($color, $number, $rtl) {
@if $rtl {
border-left: 0;
border-right: 1px solid $color;
} @else {
border-left: 1p x solid $color;
border-right: 0;
}
&:after {
border: 1px solid $color;
color: $color;
content: $number + '';
}
li {
&:before {
background: $color;
}
}
}
.roadmap .content {
.about,
.description,
.forecast {
ul, ol {
padding-left: .7em;
li {
list-style-type: none;
position: relative;
&::before {
content: '\2022 ';
color: $color-ampblue;
position: absolute;
left: -.8em;
}
}
}
}
.description,
.forecast {
ul, ol {
padding-left: 1.4em;
}
}
.stages li {
list-style-type: none;
}
.workstream-title {
background: $gradient-bold;
padding: 1em 16px;
margin-bottom: 0;
text-align: center;
h4,
p {
color: $color-white;
margin: 0 0 5px 0;
}
}
.post-content {
.forecast,
.description,
.plan {
h4 {
@extend %text-label;
color: $color-ampblue;
padding-left: 1em;
}
p,
li,
a {
font-size: 14px;
}
li p {
margin-top: 10px;
}
}
.forecast,
.description {
h4 {
padding-left: 1.9em;
}
}
}
.workstream-headings,
.forecast h4 {
position: relative;
&::after {
background: $gradient-bold;
bottom: -1px;
content: '';
height: 1px;
left: 0;
position: absolute;
right: 0;
}
}
strong {
font-weight: 400;
}
section {
padding-left: 0;
}
.about {
margin: 2em 0;
ul {
margin: 0;
list-style-type: square;
}
div {
margin-bottom: 1em;
}
}
.workstream {
margin-bottom: 1em;
background: #fff;
box-shadow: 0px 1px 6px rgba(0,0,0,0.1);
width: 112%;
position: relative;
left: -6%;
ul {
width: 100%;
}
}
.workstream-flex {
display: flex;
}
.description {
flex: 1 1 45%;
padding: 1em;
padding-right: 2em;
}
.workstream-flex:not(.workstream-headings) .description {
border-right: 1px solid $color-lightblue;
}
.plan {
flex: 1 1 55%;
// min-width: 300px;
display: flex;
flex-wrap: wrap;
padding: 1em;
padding-bottom: 0;
h4 {
display: none;
}
}
.workstream-headings {
margin: 0 20px;
padding: 15px 0;
.description {
padding-bottom: 0;
padding-left: 0;
}
.plan h4 {
display: block;
}
}
.themes,
.forecast {
ul {
list-style-type: square;
margin-top: 0;
margin-bottom: 0;
}
}
.forecast {
padding: 1em;
h4 {
padding-bottom: 17px;
}
ul {
padding-top: 10px;
padding-bottom: 30px;
}
}
/* Stages magic deluxe flex win */
.stages {
margin: -4px 0 0 0;
margin-left: -21px;
padding: 30px 1em 0 0;
display: flex;
flex-wrap: wrap;
> li {
padding: 25px 0 30px 12px;
position: relative;
flex: 1 1 100%;
&:last-child {
padding-bottom: 1em;
}
&::before {
content: attr(data-description);
position: absolute;
top: -1px;
left: 24px;
color: $color-black;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
right: 0;
white-space: nowrap;
}
&::after {
position: absolute;
top: 0;
left: -14px;
background: #fff;
border-radius: 20px;
width: 24px;
height: 24px;
display: block;
text-align: center;
line-height: 24px;
}
li {
position: relative;
&::before {
content: "";
width: 8px;
height: 1px;
display: block;
position: absolute;
// border-radius: 10px;
top: 12px;
left: -24px;
}
}
}
.stage-0 { @include roadmap-stage($color-lightblue, 0, false); }
.stage-1 { @include roadmap-stage(#10c4f5, 1, false); }
.stage-2 { @include roadmap-stage(#12b5ea, 2, false); }
.stage-3 { @include roadmap-stage(#15a6e0, 3, false); }
.stage-4 { @include roadmap-stage(#1797d5, 4, false); }
.stage-5 { @include roadmap-stage(#1a88cB, 5, false); }
.stage-6 { @include roadmap-stage($color-ampblue, 6, false); }
ul {
margin: 0;
padding: 0;
margin-left: 12px;
padding-top: 3px;
}
}
}
.roadmap.rtl .content {
.post-content {
.forecast, .description {
h4 {
padding-left: 0;
padding-right: 1.9em;
}
}
.plan {
h4 {
padding-left: 0;
padding-right: 1em;
}
}
}
.workstream {
left: auto;
right: -6%;
}
.workstream-flex:not(.workstream-headings) .description {
border-left: 1px solid $color-lightblue;
border-right: 0;
}
.description {
padding-left: 2em;
padding-right: 1em;
}
.about, .description, .forecast {
ul, ol {
padding: 0 .7em 0 0;
li::before {
left: auto;
right: -.8em;
}
}
}
.stages {
margin: -4px -21px 0 0;
padding: 30px 0 0 1em;
ul {
margin: 0 12px 0 0;
}
& > li{
padding: 25px 12px 30px 0;
&::after {
left: auto;
right: -14px;
}
&::before {
left: 0;
right: 24px;
}
li::before {
left: auto;
right: -24px;
}
}
.stage-0 { @include roadmap-stage($color-lightblue, 0, true); }
.stage-1 { @include roadmap-stage(#10c4f5, 1, true); }
.stage-2 { @include roadmap-stage(#12b5ea, 2, true); }
.stage-3 { @include roadmap-stage(#15a6e0, 3, true); }
.stage-4 { @include roadmap-stage(#1797d5, 4, true); }
.stage-5 { @include roadmap-stage(#1a88cB, 5, true); }
.stage-6 { @include roadmap-stage($color-ampblue, 6, true); }
}
}
/* Them responsive awesomeness */
@include max-screen($mobile-breakpoint) {
.roadmap .content {
.share-module {
.text-label {
display: none;
}
}
.post-content.post-sheet {
padding-top: 5px;
}
.workstream-flex {
flex-wrap: wrap;
}
.stages {
margin-left: 24px;
}
.post-content .description h4 {
padding-left: 1.4em;
}
.workstream-flex {
.plan {
padding: 20px;
h4 {
display: block;
width: 100%;
padding: 0 0 15px 1.4em;
position: relative;
&::after {
background: $gradient-bold;
bottom: -1px;
content: '';
height: 1px;
left: 0;
position: absolute;
right: 0;
}
}
}
}
.workstream-flex:not(.workstream-headings) .description {
border-right: 0;
}
.workstream-headings {
.plan {
display: none;
}
}
}
.roadmap.rtl .content {
.stages {
margin-right: 24px;
}
.post-content .description h4 {
padding-right: 1.4em;
}
.workstream-flex .plan h4 {
padding: 0 1.4em 15px 0;
}
.workstream-flex:not(.workstream-headings) .description {
border-left: 0;
}
}
}
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/style_pages.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Supported CSS
$order: 0
toc: true
---
[TOC]
Like all web pages, AMP pages are styled with CSS,
but you can’t reference external stylesheets
(with the exception of [custom fonts](#the-custom-fonts-exception)).
Also certain styles are disallowed due to performance implications;
inline style attributes aren't allowed.
All styles must live in the head of the document
(see [Add styles to a page](/docs/guides/responsive_amp.html#add-styles-to-a-page)).
But you can use CSS preprocessors and templating to build static pages
to better manage your content.
{% call callout('Note', type='note') %}
AMP components come with default styles
to make authoring responsive pages reasonably easy.
These styles are defined in the [`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css).
{% endcall %}
## Disallowed styles
The following styles aren’t allowed in AMP pages:
<table>
<thead>
<tr>
<th class="col-thirty" data-th="Banned style">Banned style</th>
<th data-th="Description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Banned style">Inline style attributes</td>
<td data-th="Description">All styles must be defined in the <code><head></code> of the page,
within a <code><style amp-custom></code> tag.</td>
</tr>
<tr>
<td data-th="Banned style"><code>!important</code> qualifier </td>
<td data-th="Description">Usage is not allowed.
This is a necessary requirement to enable AMP to enforce its element sizing rules.</td>
</tr>
<tr>
<td data-th="Banned style"><code><link rel=”stylesheet”></code></td>
<td data-th="Description">Disallowed with the exception of <a href="#the-custom-fonts-exception">custom fonts</a>.</td>
</tr>
<tr>
<td data-th="Banned style"><code>*</code> (universal selector)</td>
<td data-th="Description">Negative performance implications and could be used
to circumvent other selector restrictions.</td>
</tr>
<tr>
<td data-th="Banned style"><code>:not()</code></td>
<td data-th="Description">Could be used to simulate the universal selector.</td>
</tr>
<tr>
<td data-th="Banned style">Pseudo-selectors, pseudo-classes, and pseudo-elements</td>
<td data-th="Description">Pseudo-selectors, pseudo-classes and pseudo-elements are only allowed
in selectors that contain tag names and those tag names must not start with <code>amp-</code>.
Example OK: <code>a:hover, div:last-of-type</code>
Example not OK: <code>amp-img:hover, amp-img:last-of-type</code></td>
</tr>
<tr>
<td data-th="Banned style"><code>-amp-</code> class and <code>i-amp-</code> tag names</td>
<td data-th="Description">Class names, in author stylesheets, may not start with the string <code>-amp-</code>. These are reserved for internal use by the AMP runtime. It follows, that the user's stylesheet may not reference CSS selectors for <code>-amp-</code> classes and <code>i-amp</code> tags.</td>
</tr>
<tr>
<td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
<td data-th="Description">These properties are not allowed
for security reasons.</td>
</tr>
<tr>
<td data-th="Banned style"><code>filter</code></td>
<td data-th="Description">Blacklisted due to performance concerns.</td>
</tr>
</tbody>
</table>
## Restricted styles
The following styles are allowed, but are restricted in terms of which values
they support:
<table>
<thead>
<tr>
<th class="col-thirty" data-th="Banned style">Restricted style</th>
<th data-th="Description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Restricted style"><code>transition</code> property</td>
<td data-th="Description">Only GPU-accelerated properties (currently <code>opacity</code>, <code>transform</code> and <code>-vendorPrefix-transform</code>).</td>
</tr>
<tr>
<td data-th="Restricted style"><code>@keyframes {...}</code></td>
<td data-th="Description">Only GPU-accelerated properties (currently <code>opacity</code>, <code>transform</code> and <code>-vendorPrefix-transform</code>).</td>
</tr>
</tbody>
</table>
## The custom fonts exception
AMP pages can’t include external stylesheets, with the exception of custom fonts.
{% call callout('Read on', type='success') %}
Learn more about [custom fonts in AMP](/docs/guides/responsive/custom_fonts.html).
{% endcall %}
## Using CSS preprocessors
The generated output of preprocessors works just as well in AMP as any other web page.
For example, the [ampproject.org](https://www.ampproject.org/) site uses
[Sass](http://sass-lang.com/).
(We use [Grow](http://grow.io/) to build the static AMP pages
that make up the [ampproject.org](https://www.ampproject.org/) site.)
When using preprocessors,
pay special attention to what you include; load only what your pages use.
For example, the
[head.html](https://github.com/ampproject/docs/blob/master/views/partials/head.html)
includes all required AMP mark-up and the inlined CSS from the `*.scss` source files.
It also includes the custom element script for
[`amp-youtube`](/docs/reference/extended/amp-youtube.html), among others,
so that many pages across the site can include embedded youtube videos.
[sourcecode:html]{% raw %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<title>Accelerated Mobile Pages Project</title>
<link rel="icon" href="/static/img/amp_favicon.png">
<link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
<link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet">
<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>
{% endraw %}[/sourcecode]
To see how the above translates into formatted AMP HTML,
view the source for any page in [ampproject.org](https://www.ampproject.org/).
(In Chrome, right-click and `View Page Source`.)
```
--------------------------------------------------------------------------------
/content/learn/how-amp-works.md:
--------------------------------------------------------------------------------
```markdown
---
$title: How AMP Works
$order: 1
$hidden: true
components:
- youtube
---
[TOC]
The following optimizations combined are the reason AMP pages are so fast they appear to load instantly:
If you'd rather listen than read, the following video by AMP engineering lead Malte Ubl gives a similar overview than the following paragraphs.
<amp-youtube
data-videoid="hVRkG1CQScA"
layout="responsive"
width="480" height="270">
</amp-youtube>
## Allow only asynchronous scripts
JavaScript is powerful,
it can modify just about every aspect of the page,
but it can also block DOM construction and delay page rendering
(see also [Adding interactivity with JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
To keep JavaScript from delaying page rendering,
AMP allows only asynchronous JavaScript.
AMP pages can’t include any author-written JavaScript.
Instead of using JavaScript,
interactive page features are handled in custom AMP elements.
The custom AMP elements may have JavaScript under the hood,
but they’re carefully designed to make sure they don’t cause performance degradation.
While third-party JS is allowed in iframes,
it cannot block rendering.
For example, if third-party JS uses the
[super-bad-for-performance `document.write` API](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
it does not block rendering the main page.
## Size all resources statically
External resources such as images, ads or iframes must state their size in the HTML
so that AMP can determine each element’s size and position before resources are downloaded.
AMP loads the layout of the page without waiting for any resources to download.
AMP uncouples document layout from resource layout.
Only one HTTP request is needed to layout the entire doc
([+fonts](#font-triggering-must-be-efficient)).
Since AMP is optimized to avoid expensive style recalculations and layouts in the browser,
there won’t be any re-layout when resources load.
## Don’t let extension mechanisms block rendering
AMP doesn’t let extension mechanisms block page rendering.
AMP supports extensions for things like
[lightboxes](/docs/reference/extended/amp-lightbox.html),
[instagram embeds](/docs/reference/extended/amp-instagram.html),
[tweets](/docs/reference/extended/amp-twitter.html), etc.
While these require additional HTTP requests,
those requests do not block page layout and rendering.
Any page that uses a custom script must tell the AMP system
that it will eventually have a custom tag.
For example, the [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
script tells the system that there will be an `amp-iframe` tag.
AMP creates the iframe box before it even knows what it will include:
[sourcecode:html]
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
## Keep all third-party JavaScript out of the critical path
Third-party JS likes to use synchronous JS loading.
They also like to `document.write` more sync scripts.
For example, if you have five ads on your page, and each of them cause three synchronous loads,
each with a 1 second latency connection,
you’re in 15 seconds of load time just for JS loading.
AMP pages allow third-party JavaScript but only in sandboxed iframes.
By restricting them to iframes, they can’t block the execution of the main page.
Even if they trigger multiple style re-calculations,
their tiny iframes have very little DOM.
The time it takes to do style-recalculations and layouts are restricted by DOM size,
so the iframe recalculations are very fast compared
to recalculating styles and layout for the page.
## All CSS must be inline and size-bound
CSS blocks all rendering, it blocks page load, and it tends to get bloated.
In AMP HTML pages, only inline styles are allowed.
This removes 1 or often more HTTP requests from the critical rendering path
compared to most web pages.
Also, the inline style sheet has a maximum size of 50 kilobytes.
While this size is big enough for very sophisticated pages,
it still requires the page author to practice good CSS hygiene.
## Font triggering must be efficient
Web fonts are super large, so
[web font optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
is crucial to performance.
On a typical page that has a few sync scripts and a few external style sheets,
the browser waits and waits to start downloading these huge fonts until all this happens.
The AMP system declares zero HTTP requests until fonts start downloading.
This is only possible because all JS in AMP has the async attribute
and only inline style sheets are allowed;
there’s no HTTP requests blocking the browser from downloading fonts.
## Minimize style recalculations
Each time you measure something, it triggers style recalculations which are expensive
because the browser has to layout the entire page.
In AMP pages, all DOM reads happen first before all the writes.
This ensures there’s the max of one recalc of styles per frame.
Learn more about impact of style and layout recalculations on
[rendering performance](https://developers.google.com/web/fundamentals/performance/rendering/).
## Only run GPU-accelerated animations
The only way to have fast optimizations is to run them on the GPU.
GPU knows about layers, it knows how to perform some things on these layers,
it can move them, it can fade them, but it can’t update the page layout;
it will hand that task over to the browser, and that’s not good.
The rules for animation-related CSS ensure that animations can be GPU-accelerated.
Specifically, AMP only allows animating and transitioning on transform and opacity
so that page layout isn’t required.
Learn more about
[using transform and opacity for animation changes](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
## Prioritize resource loading
AMP controls all resource downloads: it prioritizes resource loading,
loading only what’s needed, and prefetches lazy-loaded resources.
When AMP downloads resources, it optimizes downloads
so that the currently most important resources are downloaded first.
Images and ads are only downloaded if they are likely to be seen by the user,
above the fold, or if the user is likely to quickly scroll to them.
AMP also prefetches lazy-loaded resources.
Resources are loaded as late as possible, but prefetched as early as possible.
That way things load very fast but CPU is only used
when resources are actually shown to users.
## Load pages in an instant
The new [preconnect API](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
is used heavily to ensure HTTP requests are as fast as possible when they are made.
With this,
a page can be rendered before the user explicitly states they’d like to navigate to it;
the page might already be available by the time the user actually selects it,
leading to instant loading.
While prerendering can be applied to all web content,
it can also use up a lot of bandwidth and CPU. AMP is optimized to reduce both of these factors. Prerendering only downloads resources above the fold
and prerendering doesn’t render things that might be expensive in terms of CPU.
When AMP documents get prerendered for instant loading,
only resources above the fold are actually downloaded.
When AMP documents get prerendered for instant loading,
resources that might use a lot of CPU (like third-party iframes) do not get downloaded.
Learn more about
[why AMP HTML doesn’t take full advantage of the preload scanner](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
## Help make AMP faster
AMP is an open-source effort.
We need your help to make AMP even faster.
Learn [how to contribute](/docs/support/contribute.html).
```
--------------------------------------------------------------------------------
/content/docs/reference/components.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Components / Tags
$order: 0
---
The AMP HTML library provides components that are classified as:
- **built-in**: Components that are included in the base library, such as `amp-img` and `amp-pixel`.
- **[extended](https://github.com/ampproject/amphtml/blob/master/extensions/README.md)**: Extensions to the base library that must be explicitly included in the document as custom elements (e.g., `<script async custom-element="amp-audio" ...`).
- **[experimental](experimental.html)**: Components that are released but are not yet ready for wide use.
Here are the components grouped by category:
- [Ads & Analytics](#ads-and-analytics)
- [Dynamic Content](#dynamic-content)
- [Layout](#layout)
- [Media](#media)
- [Presentation](#presentation)
- [Social](#social)
### Ads and Analytics
| Component | Description |
| --------- | ----------- |
| [`amp-access-laterpay`](components/amp-access-laterpay.html) | Allows publishers to easily integrate with the [LaterPay](https://www.laterpay.net/) micropayments platform.
| [`amp-ad`](components/amp-ad.html) | A container to display an ad. |
| [`amp-analytics`](components/amp-analytics.html) | Captures analytics data from an AMP document. |
| [`amp-call-tracking`](components/amp-call-tracking.html) | Dynamically replaces a phone number in a hyperlink to enable call tracking. |
| [`amp-experiment`](components/amp-experiment.html) | Can be used to conduct user experience experiments on an AMP document. |
| [`amp-pixel`](components/amp-pixel.html) | A tracking pixel to count page views. |
| [`amp-sticky-ad`](components/amp-sticky-ad.html) | Provides a way to display and stick ad content at the bottom of the page.|
### Dynamic Content
| Component | Description |
| --------- | ----------- |
| [`amp-access`](components/amp-access.html) | Provides an AMP paywall and subscription support. |
| [`amp-bind`](components/amp-bind.html) | Allows elements to mutate in response to user actions or data changes via data binding and simple JS-like expressions. |
| [`amp-form`](components/amp-form.html) | Provides form support. |
| [`amp-install-serviceworker`](components/amp-install-serviceworker.html) | Installs a ServiceWorker. |
| [`amp-list`](components/amp-list.html) | Dynamically downloads data and creates list items using a template. |
| [`amp-live-list`](components/amp-live-list.html) | Provides a way to display and update content live. |
| [`amp-mustache`](components/amp-mustache.html) | Allows rendering of [`Mustache.js`](https://github.com/janl/mustache.js/) templates. |
| [`amp-selector`](components/amp-selector.html) | Represents a control that presents a menu of options and lets the user choose from it. |
| [`amp-user-notification`](components/amp-user-notification.html) | Displays a dismissable notification to the user. |
### Layout
| Component | Description |
| --------- | ----------- |
| [`amp-accordion`](components/amp-accordion.html) | Provides a way for viewers to have a glance at the outline of the content and jump to a section of their choice at will. |
| [`amp-app-banner`](components/amp-app-banner.html) | A wrapper and minimal UI for a cross-platform, fixed-position banner showing a call-to-action to install an app. |
| [`amp-carousel`](components/amp-carousel.html) | Displays multiple similar pieces of content along a horizontal axis. |
| [`amp-fx-flying-carpet`](components/amp-fx-flying-carpet.html) | Wraps its children in a unique full-screen scrolling container allowing you to display a full-screen ad without taking up the entire viewport. |
| [`amp-iframe`](components/amp-iframe.html) | Displays an iframe. |
| [`amp-lightbox`](components/amp-lightbox.html) | Allows for a “lightbox” or similar experience. |
| [`amp-sidebar`](components/amp-sidebar.html) | Provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus. |
### Media
| Component | Description |
| --------- | ----------- |
| [`amp-anim`](components/amp-anim.html) | Manages an animated image, typically a GIF. |
| [`amp-apester-media`](components/amp-apester-media.html) | Displays an [Apester](https://apester.com/) smart unit. |
| [`amp-audio`](components/amp-audio.html) | Replaces the HTML5 `audio` tag. |
| [`amp-brid-player`](components/amp-brid-player.html) | Displays a [Brid.tv](https://www.brid.tv/) player. |
| [`amp-brightcove`](components/amp-brightcove.html) | Displays a Brightcove [Video Cloud](https://www.brightcove.com/en/online-video-platform) or [Perform](https://www.brightcove.com/en/perform) player. |
| [`amp-dailymotion`](components/amp-dailymotion.html) | Displays a [Dailymotion](https://www.dailymotion.com) video. |
| [`amp-google-vrview-image`](components/amp-google-vrview-image) | Displays a VR image. |
| [`amp-hulu`](components/amp-hulu.html) | Displays a simple embedded [Hulu](http://www.hulu.com/) video. |
| [`amp-image-lightbox`](components/amp-image-lightbox.html) | Allows for an “image lightbox” or similar experience. |
| [`amp-img`](components/amp-img.html) | Replaces the HTML5 `img` tag. |
| [`amp-izlesene`](components/amp-izlesene.html) | Displays an [Izlesene](https://www.izlesene.com/) video. |
| [`amp-jwplayer`](components/amp-jwplayer.html) | Displays a cloud-hosted [JW Player](https://www.jwplayer.com/). |
| [`amp-kaltura-player`](components/amp-kaltura-player.html) | Displays the Kaltura Player as used in [Kaltura's Video Platform](https://corp.kaltura.com/). |
| [`amp-o2-player`](components/amp-o2-player.html) | Displays an [AOL O2Player](http://on.aol.com/). |
| [`amp-ooyala-player`](components/amp-ooyala-player.html) | Displays an [Ooyala](https://www.ooyala.com/) video. |
| [`amp-playbuzz`](components/amp-playbuzz.html) | Displays any [Playbuzz](http://www.playbuzz.com/) content (e.g., list, poll, etc.). |
| [`amp-reach-player`](components/amp-reach-player.html) | Displays a [Beachfront Reach](https://beachfrontreach.com/) video player. |
| [`amp-soundcloud`](components/amp-soundcloud.html) | Displays a [Soundcloud](https://soundcloud.com/) clip. |
| [`amp-springboard-player`](components/amp-springboard-player.html) | Displays a [Springboard Platform](http://publishers.springboardplatform.com/users/login) video player. |
| [`amp-video`](components/amp-video.html) | Replaces the HTML5 `video` tag. |
| [`amp-vimeo`](components/amp-vimeo.html) | Displays a [Vimeo](https://vimeo.com/) video. |
| [`amp-youtube`](components/amp-youtube.html) | Displays a [YouTube](https://www.youtube.com/) video. |
### Presentation
| Component | Description |
| --------- | ----------- |
| [`amp-animation`](components/amp-animation.html) | Defines and displays an animation. |
| [`amp-dynamic-css-classes`](components/amp-dynamic-css-classes.html) | Adds several dynamic CSS class names onto the HTML element. |
| [`amp-fit-text`](components/amp-fit-text.html) | Expands or shrinks font size to fit the content within the space given. |
| [`amp-font`](components/amp-font.html) | Triggers and monitors the loading of custom fonts. |
| [`amp-viz-vega`](components/amp-viz-vega.html) | Displays visualizations created by using [Vega](https://vega.github.io/vega/) visualization grammar.|
### Social
| Component | Description |
| --------- | ----------- |
| [`amp-facebook`](components/amp-facebook.html) | Displays a Facebook post or video. |
| [`amp-gfycat`](components/amp-gfycat.html) | Displays a [Gfycat](https://gfycat.com) video GIF. |
| [`amp-instagram`](components/amp-instagram.html) | Displays an Instagram embed. |
| [`amp-pinterest`](components/amp-pinterest.html) | Displays a Pinterest widget or Pin It button. |
| [`amp-reddit`](components/amp-reddit.html) | Displays a Reddit comment or post embed. |
| [`amp-social-share`](components/amp-social-share.html) | Displays a social share button. |
| [`amp-twitter`](components/amp-twitter.html) | Displays a Twitter tweet. |
| [`amp-vine`](components/amp-vine.html) | Displays a Vine simple embed. |
```
--------------------------------------------------------------------------------
/content/pages/home.html:
--------------------------------------------------------------------------------
```html
---
$title: Accelerated Mobile Pages Project
$path: /
$localization:
path: /{locale}/
description: The Accelerated Mobile Pages (AMP) Project is an open source initiative that makes it easy for publishers to create mobile-friendly content once and have it load instantly everywhere.
class: home
components:
- carousel
---
{% set home = g.doc('/content/includes/home.yaml', locale=doc.locale) %}
{% set blog = g.doc('/content/includes/list-blog.yaml', locale=doc.locale) %}
{% set case_studies = g.doc('/content/includes/case-studies.yaml', locale=doc.locale) %}
<section class="hero">
<div class="container">
<div class="hero-image">
<div class="lines">
{% include "/views/partials/lines.html" %}
</div>
<div class="phone">
<amp-img
noloading
height=1423
width=1200
layout=responsive
srcset="{{home.hero.phone_img_base + '.png 750w'}},
{{home.hero.phone_img_base + '@1_5x.png 600w'}},
{{home.hero.phone_img_base + '@1x.png 400w'}}"
src="{{home.hero.phone_img_base + '.png'}}">
</amp-img>
</div>
<div class="latest-mobile tablet-down">
<h2 class="latest-label">{{_(home.hero.carousel_title)}}</h2>
<amp-carousel class="latest-carousel"
height="200"
layout="flex-item"
type="slides">
{% for article in blog.blogs %}
{% if loop.index <= 6 %}
<div class="card-container">
<a href="{{g.doc('/content/latest/blog/' ~ article.id ~ '.md', locale=doc.locale).url.path}}" class="card">
<div class="card-inner">
<div class="card-type text-label news">
{{_('News')}}
</div>
<div class="card-content small">
{{article.title}}
</div>
<div class="card-date light">
{{article.date}}
</div>
</div>
</a>
</div>
{% endif %}
{% endfor %}
</amp-carousel>
</div>
</div>
<div class="hero-content">
<div class="intro-container">
<h1>{{_(home.hero.title)}}</h1>
<p class="intro">{{_(home.hero.content)}}</p>
<a class="button" href="{{g.doc(home.hero.cta_url, locale=doc.locale).url.path}}">
{{_(home.hero.cta)}}
</a>
<br class="tablet-down">
<span class="cta_connector light">{{_('or')}}</span>
<a class="underlined cta" href="{{g.doc(home.hero.secondary_cta_url, locale=doc.locale).url.path}}">{{_(home.hero.secondary_cta)}}</a>
</div>
<div class="latest tablet-up">
<h3 class="latest-label light">{{_(home.hero.carousel_title)}}</h3>
<amp-carousel class="latest-carousel tablet-up"
height="255"
layout="flex-item"
type="slides">
<div class="card-container">
{% for article in blog.blogs %}
<a href="{{g.doc('/content/latest/blog/' ~ article.id ~ '.md', locale=doc.locale).url.path}}" class="card">
<div class="card-inner">
<div class="card-type text-label news">
{{_('News')}}
</div>
<div class="card-content small">
{{article.title}}
</div>
<div class="card-date light">
{{article.date}}
</div>
</div>
</a>
{% if loop.last and loop.index is not divisibleby 3 %}
{% for number in range(0, 3 - loop.index % 3) %}
<div class="card card--spacer"></div>
{% endfor %}
{% endif %}
{% if not loop.last and loop.index is divisibleby 3 %}
</div>
<div class="card-container">
{% endif %}
{% endfor %}
</div>
</amp-carousel>
</div>
</div>
</div>
</section>
<section class="benefits">
<h1>{{_(home.benefits.title)}}</h1>
<div class="benefits-row">
{% for card in home.benefits.cards %}
<div class="benefit">
<div class="benefit-image">
<amp-img
noloading
height={{card.img_height}}
width={{card.img_width}}
layout=responsive
src="{{card.img}}">
</amp-img>
</div>
<div class="benefit-content">
<h3 class="title">{{_(card.title)}}</h3>
<div class="desc">{{_(card.content)}}</div>
</div>
</div>
{% endfor %}
</div>
</section>
<section class="experience">
<div class="experience-content">
<h1>{{_(home.experience.title)}}</h1>
<p>{{_(home.experience.content)}}</p>
</div>
<div class="experience-image">
<div class="bg">
<amp-img
noloading
height=2095
width=1424
layout=responsive
src="{{home.experience.bg_img}}">
</amp-img>
</div>
<div class="lines">
<amp-img
noloading
height=956
width=781
layout=responsive
src="{{home.experience.lines_img}}">
</amp-img>
</div>
<div class="phone">
<amp-img
noloading
height=1316
width=1079
layout=responsive
srcset="{{home.experience.phone_img_base + '.png 1079w'}},
{{home.experience.phone_img_base + '@1_5x.png 719w'}},
{{home.experience.phone_img_base + '@1x.png 540w'}}"
src="{{home.experience.phone_img_base + '.png'}}">
</amp-img>
</div>
</div>
</section>
<section class="success-stories">
<h1>{{_(home.success_stories.title)}}</h1>
<div class="container">
<div class="row">
<div class="twelve columns">
<amp-carousel class="success-carousel desktop-up"
height="400"
layout="flex-item"
type="slides">
<div class="card-container">
{% for card in home.success_stories.cards %}
<a class="card centered {{card.class}}" href="{{g.doc(card.url, locale=doc.locale).url.path}}">
<div class="card-inner">
<div class="card-content">
<p>{{_(card.quote)}}</p>
</div>
<amp-img class="card-icon"
noloading
height="{{card.img_height}}"
width="{{card.img_width}}"
layout=responsive
src="{{card.img}}">
</amp-img>
</div>
</a>
{% if loop.last and loop.index is not divisibleby 3 %}
{% for number in range(0, 3 - loop.index % 3) %}
<div class="card card--spacer"></div>
{% endfor %}
{% endif %}
{% if not loop.last and loop.index is divisibleby 3 %}
</div>
<div class="card-container">
{% endif %}
{% endfor %}
</div>
</amp-carousel>
<amp-carousel class="success-carousel mobile-down"
height="400"
layout="flex-item"
type="slides">
{% for card in home.success_stories.cards %}
<div class="card-container">
<div class="card centered {{card.class}}">
<div class="card-inner">
<div class="card-content">
<h2>{{_(card.quote)}}</h2>
</div>
<amp-img class="card-icon"
noloading
height="{{card.img_height}}"
width="{{card.img_width}}"
layout=responsive
src="{{card.img}}">
</amp-img>
</div>
</div>
</div>
{% endfor %}
</amp-carousel>
</div>
</div>
</div>
</section>
{% with large_cta = home.large_cta %}
{% include "/views/partials/large-cta.html" %}
{% endwith %}
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/control_layout.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Layout & Media queries
$order: 1
toc: true
---
[TOC]
AMP supports both **media queries** & **element queries**, plus comes with a powerful, built-in way to control the **layout** of individual elements. The `layout` attribute makes working with and creating fully responsive design much easier than if you'd use CSS alone.
## Responsive images, made easy
Create responsive images by specifying the `width` and `height`, setting layout to `responsive`,
and indicating with [`srcset`](/docs/guides/responsive/art_direction.html)
which image asset to use based on varying screen sizes:
[sourcecode:html]
<amp-img
src="/img/narrow.jpg"
srcset="/img/wide.jpg 640w,
/img/narrow.jpg 320w"
width="1698"
height="2911"
layout="responsive"
alt="an image">
</amp-img>
[/sourcecode]
This `amp-img` element automatically fits the width
of its container element,
and its height is automatically set to the aspect ratio
determined by the given width and height. Try it out by resizing this browser window:
<amp-img src="/static/img/background.jpg" width="1920" height="1080" layout="responsive"></amp-img>
{% call callout('Tip', type='success') %}
See our side-by-side live demo of `amp-img` for a basic and advanced example: [Live Demo](https://ampbyexample.com/components/amp-img/)
{% endcall %}
## The layout attribute
The `layout` attribute gives you easy, per-element control over how your element
should render on screen. Many of these things are possible with pure CSS – but
they're much harder, and require a myriad of hacks. Use the `layout` attribute instead.
### Supported values for the `layout` attribute
The following values can be used in the `layout` attribute:
<table>
<thead>
<tr>
<th data-th="Layout type" class="col-twenty">Layout type</th>
<th data-th="Width/height required" class="col-twenty">Width/height required</th>
<th data-th="Behavior">Behavior</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Layout type" class="col-twenty"><code>nodisplay</code></td>
<td data-th="Description" class="col-twenty">No</td>
<td data-th="Behavior">Element not displayed. This layout can be applied to every AMP element. The component takes up zero space on the screen as if its display style was none. It’s assumed that the element can display itself on user action, for example, <a href="/docs/reference/extended/amp-lightbox.html"><code>amp-lightbox</code></a>.</td>
</tr>
<tr>
<td data-th="Layout type" class="col-twenty"><code>fixed</code></td>
<td data-th="Description" class="col-twenty">Yes</td>
<td data-th="Behavior">Element has a fixed width and height with no responsiveness supported. The only exceptions are <a href="/docs/reference/amp-pixel.html"><code>amp-pixel</code></a> and <a href="/docs/reference/extended/amp-audio.html"><code>amp-audio</code></a> elements.</td>
</tr>
<tr>
<td data-th="Layout type" class="col-twenty"><code>responsive</code></td>
<td data-th="Description" class="col-twenty">Yes</td>
<td data-th="Behavior">Element sized to the width of its container element and resizes its height automatically to the aspect ratio given by width and height attributes. This layout works very well for most of AMP elements, including <a href="/docs/reference/amp-img.html"><code>amp-img</code></a>, <a href="/docs/reference/amp-video.html"><code>amp-video</code></a>. Available space depends on the parent element and can also be customized using <code>max-width</code> CSS.</td>
</tr>
<tr>
<td data-th="Layout type" class="col-twenty"><code>fixed-height</code></td>
<td data-th="Description" class="col-twenty">Height only</td>
<td data-th="Behavior">Element takes the space available to it but keeps the height unchanged. This layout works well for elements such as <a href="/docs/reference/extended/amp-carousel.html"><code>amp-carousel</code></a> that involves content positioned horizontally. The <code>width</code> attribute must not be present or must be equal to <code>auto</code>.</td>
</tr>
<tr>
<td data-th="Layout type" class="col-twenty"><code>fill</code></td>
<td data-th="Description" class="col-twenty">No</td>
<td data-th="Behavior">Element takes the space available to it, both width and height. In other words, the layout of a fill element matches its parent.</td>
</tr>
<tr>
<td data-th="Layout type" class="col-twenty"><code>container</code></td>
<td data-th="Description" class="col-twenty">No</td>
<td data-th="Behavior">Element lets its children define its size, much like a normal HTML <code>div</code>. The component is assumed to not have specific layout itself but only act as a container. Its children are rendered immediately.</td>
</tr>
<tr>
<td data-th="Layout type" class="col-twenty"><code>flex-item</code></td>
<td data-th="Description" class="col-twenty">No</td>
<td data-th="Behavior">Element and other elements in its parent take the parent container's remaining space when the parent is a flexible container (i.e., <code>display:flex</code>). The element size is determined by the parent element and the number of other elements inside the parent according to the <code>display:flex</code> CSS layout.</td>
</tr>
</tbody>
</table>
### What if width and height are undefined?
In a few cases if `width` or `height` are not specified,
the AMP runtime can default these values as the following:
* [`amp-pixel`](/docs/reference/amp-pixel.html): Both width and height are defaulted to 0.
* [`amp-audio`](/docs/reference/extended/amp-audio.html): The default width and height are inferred from browser.
### What if the <code>layout</code> attribute isn’t specified?
If the <code>layout</code> attribute isn't specified, AMP tries to infer or guess
the appropriate value:
<table>
<thead>
<tr>
<th data-th="Rule">Rule</th>
<th data-th="Inferred layout" class="col-thirty">Inferred layout</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Rule"><code>height</code> is present and <code>width</code> is absent or equals to <code>auto</code></td>
<td data-th="Inferred layout"><code>fixed-height</code></td>
</tr>
<tr>
<td data-th="Rule"><code>width</code> or <code>height</code> attributes are present along with the <code>sizes</code> attribute</td>
<td data-th="Inferred layout"><code>responsive</code></td>
</tr>
<tr>
<td data-th="Rule"><code>width</code> or <code>height</code> attributes are present</td>
<td data-th="Inferred layout"><code>fixed</code></td>
</tr>
<tr>
<td data-th="Rule"><code>width</code> and <code>height</code> are not present</td>
<td data-th="Inferred layout"><code>container</code></td>
</tr>
</tbody>
</table>
## Using media queries
### CSS media queries
Use [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media)
to control how the page layout looks and behaves, as you would do on any other website.
When the browser window changes size or orientation,
the media queries are re-evaluated and elements are hidden and shown
based on the new results.
{% call callout('Tip', type='success') %}
Learn more about controlling layout by applying media queries in [Use CSS media queries for responsiveness](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en).
{% endcall %}
### Element media queries
One extra feature for responsive design available in AMP is the `media` attribute.
This attribute can be used on every AMP element;
it works similar to media queries in your global stylesheet,
but only impacts the specific element on a single page.
For example, here we have 2 images with mutually exclusive media queries.
[sourcecode:html]
<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width=466
height=355
layout="responsive">
</amp-img>
[/sourcecode]
Depending on the screen width, one or the other will be fetched and rendered.
[sourcecode:html]
<amp-img
media="(max-width: 649px)"
src="narrow.jpg"
width=527
height=193
layout="responsive">
</amp-img>
[/sourcecode]
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: CSS yang Didukung
---
Seperti halnya semua laman web, laman AMP ditata dengan CSS,
tetapi Anda tidak dapat mereferensikan stylesheet eksternal
(dengan pengecualian [font khusus](#the-custom-fonts-exception)).
Gaya tertentu juga tidak diperbolehkan karena implikasi performa;
atribut gaya sebaris tidak diperbolehkan.
Semua gaya harus berada di bagian head dokumen
(lihat [Menambahkan gaya ke laman](/docs/guides/validate.html#add-styles-to-a-page)).
Tetapi Anda dapat menggunakan prapemrosesan CSS dan pemberian template untuk membuat laman statis
guna mengelola konten dengan lebih baik.
**Catatan:**
Komponen AMP dilengkapi dengan gaya default
agar pembuatan laman responsif menjadi sangat mudah.
Gaya ini ditentukan di
[`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css).
[TOC]
## Menggunakan prapemrosesan CSS
Keluaran prapemrosesan yang dihasilkan juga berfungsi di AMP seperti laman web lain.
Misalnya, situs [ampproject.org](https://www.ampproject.org/) menggunakan
[Sass](http://sass-lang.com/).
(Kami menggunakan [Grow](http://grow.io/) untuk membuat laman AMP statis
yang membentuk situs [ampproject.org](https://www.ampproject.org/).)
Jika menggunakan prapemrosesan,
perhatikan baik-baik apa yang Anda sertakan; hanya muat laman yang digunakan.
Misalnya,
[head.html](https://github.com/ampproject/docs/blob/master/views/partials/head.html)
menyertakan semua markup AMP yang dibutuhkan dan CSS sebaris dari file sumber `*.scss`.
Hal tersebut juga menyertakan skrip elemen khusus untuk
[`amp-youtube`](/docs/reference/extended/amp-youtube.html), di antara yang lain,
sehingga berbagai laman di situs dapat menyertakan video youtube yang disematkan.
[sourcecode:html] {% raw %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<title>Accelerated Mobile Pages Project</title>
<link rel="shortcut icon" href="/static/img/amp_favicon.png">
<link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
<link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>
{% endraw %} [/sourcecode]
Untuk mengetahui cara hal di atas dialihkan ke HTML AMP terformat,
lihat sumber laman apa pun di [ampproject.org](https://www.ampproject.org/).
(Di Chrome, klik kanan dan `Lihat Sumber Laman`.)
## Gaya terlarang
Gaya berikut tidak diizinkan di laman AMP:
<table>
<thead>
<tr>
<th data-th="Banned style">Gaya yang dicekal</th>
<th data-th="Description">Deskripsi</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Banned style">Atribut gaya sebaris</td>
<td data-th="Description">Semua gaya harus ditentukan di <code><head></code> laman,
dalam tag <code><style amp-custom></code>.</td>
</tr>
<tr>
<td data-th="Banned style"><code>!</code>kualifikasi penting </td>
<td data-th="Description">Penggunaan tidak diizinkan.
Hal ini merupakan persyaratan yang dibutuhkan untuk mengaktifkan AMP guna menerapkan aturan pengubahan ukuran elemen.</td>
</tr>
<tr>
<td data-th="Banned style"><code><link rel=”stylesheet”></code></td>
<td data-th="Description">Dilarang dengan pengecualian [font khusus](#the-custom-fonts-exception).</td>
</tr>
<tr>
<td data-th="Banned style"><code>*</code> (pemilih universal)</td>
<td data-th="Description">Implikasi performa negatif dan dapat digunakan
untuk mengelak dari pembatasan pemilih lainnya.</td>
</tr>
<tr>
<td data-th="Banned style"><code>:not()</code></td>
<td data-th="Description">Dapat digunakan untuk menyimulasikan pemilih universal.</td>
</tr>
<tr>
<td data-th="Banned style">Pemilih Pseudo, kelas pseudo, dan elemen pseudo</td>
<td data-th="Description">Pemilih Pseudo, kelas pseudo, dan elemen pseudo hanya diizinkan
di pemilih yang berisi nama tag, dan nama tag tersebut tidak boleh dimulai dengan <code>amp-</code>.
Contoh yang diizinkan: <code>a:hover, div:last-of-type</code>
Contoh yang dilarang: <code>amp-img:hover, amp-img:last-of-type</code></td>
</tr>
<tr>
<td data-th="Banned style">Kelas <code>-amp-</code> dan nama tag <code>i-amp-</code></td>
<td data-th="Description">Nama kelas, di stylesheet penulis, tidak boleh dimulai dengan <code>-amp-</code> string. Hal ini hanya untuk penggunaan internal oleh waktu proses AMP. Karena itu, stylesheet pengguna tidak boleh mereferensikan pemilih CSS untuk kelas <code>-amp-</code> dan tag <code>i-amp</code>.</td>
</tr>
<tr>
<td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
<td data-th="Description">Properti ini tidak diizinkan
untuk alasan keamanan.</td>
</tr>
<tr>
<td data-th="Banned style"><code>filter</code></td>
<td data-th="Description">Dimasukkan ke daftar hitam karena masalah performa.</td>
</tr>
</tbody>
</table>
## Properti animasi dan transisi yang dimasukkan dalam daftar putih
AMP hanya mengizinkan transisi dan animasi properti
yang dapat dipercepat oleh GPU di browser umum.
Saat ini, proyek AMP memasukkan ke daftar putih `opacity`, `transform`,
dan `-vendorPrefix-transform`.
Pada contoh berikut, `<property>` harus dimasukkan ke dalam daftar putih:
* `transition <property> (Also -vendorPrefix-transition)`
* @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
Properti `overflow` (dan `overflow-y`, `overflow-x`)
tidak boleh diberi gaya “auto” atau “scroll”.
Tidak ada elemen yang ditentukan pengguna di dokumen AMP yang boleh memiliki bilah gulir.
## Pengecualian font khusus
Laman AMP tidak dapat menyertakan stylesheet eksternal, dengan pengecualian font khusus.
2 metode yang didukung untuk menyebutkan font khusus adalah
tag tautan yang mengarahkan ke penyedia font yang masuk dalam daftar putih dan penyertaan `@font-face`.
Penyedia font hanya dapat dimasukkan dalam daftar putih
jika mereka mendukung integrasi hanya CSS dan menyajikannya melalui HTTPS.
Saat ini, hanya font asal tersebut yang dimasukkan dalam daftar putih
dan diizinkan untuk disajikan melalui tag tautan:
* [https://fast.fonts.net](https://fast.fonts.net)
* [https://fonts.googleapis.com](https://fonts.googleapis.com)
Contoh tag tautan yang mengarah ke penyedia font yang masuk dalam daftar putih, Google Fonts:
[sourcecode:html]
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
[/sourcecode]
Atau, Anda dapat menggunakan [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face).
Font yang disertakan melalui `@font-face` harus diambil
melalui skema HTTP atau HTTPS.
```
--------------------------------------------------------------------------------
/content/latest/blog/ads-on-the-web-will-get-better-with-amp-heres-how.md:
--------------------------------------------------------------------------------
```markdown
---
class: post-blog post-detail
type: Blog
$title: Ads on the web will get better with AMP. Here’s how.
id: ads-on-the-web-will-get-better-with-amp-heres-how
author: Richard Gingras
role: VP – News, Google
origin: "https://amphtml.wordpress.com/2017/01/30/ads-on-the-web-will-get-better-with-amp-heres-how/amp/"
excerpt: "There are a lot of bad ads on the web today — ads that are slow, janky and don’t necessarily deliver great user experiences when they include annoying pop-ups or cause content to reflow on your screen. The net result: users install ad blockers, making it difficult for publishers to fund the content they’re creating, […]"
avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
date_data: 2017-01-30T11:44:52-08:00
$date: January 30, 2017
$parent: /content/latest/list-blog.html
components:
- social-share
---
<div class="amp-wp-article-content">
<p><span style="font-weight:400;">There are a lot of bad ads on the web today — ads that are slow, janky and don’t necessarily deliver great user experiences when they include annoying pop-ups or cause content to reflow on your screen. The net result: users install ad blockers, making it difficult for publishers to fund the content they’re creating, and hurting advertisers even when they use acceptable ad practices. </span></p>
<p><span style="font-weight:400;">The AMP Project announced the open source </span><a href="https://amphtml.wordpress.com/2016/07/19/but-what-about-the-ads/"><span style="font-weight:400;">AMP for Ads initiative in July</span></a><span style="font-weight:400;"> to address this issue and ensure users have great experiences on the web with both content and ads. The initiative’s goal is to fix the foundation of digital advertising on the web, applying the principles of AMP to advertising and making ads faster, more beautiful and secure.</span></p>
<p><span style="font-weight:400;">Since the announcement, AMP Ads has seen a lot of momentum. Publishers across the world like The Washington Post, The Guardian, and USAToday have been testing AMP Ads via DoubleClick for Publishers.</span></p>
<p><span style="font-weight:400;">Today, we’re sharing news that underscores the progress on the initiative.</span></p>
<p><b>TripleLift brings speed to native ads with AMP Ads</b></p>
<p><span style="font-weight:400;">Native advertising platform TripleLift now serves AMP Ads for publishers and advertisers using their services. Time Inc is their first publisher partner testing AMP Ads.</span></p>
<p><span style="font-weight:400;">Time Inc’s VP of Digital Revenue Strategy and Operations, Kavata Mbondo says, “AMP ads represent an opportunity to fix key issues with regards to ad experiences on the web. In our tests with TripleLift, AMP ads are already more viewable, up 13% from standard ads on AMP pages. We’ve also seen corresponding improvements in CTRs and eCPMs.”</span></p>
<p><span style="font-weight:400;">TripleLift also found that AMP ads load 6x faster and are 3x lighter than comparable standard ads.</span></p>
<p><span style="font-weight:400;">TripleLift’s President, Shaun Zacharia says, “As a native advertising platform, we want to make ads seamless with the pages in which they’re served in. Now with AMP for Ads, we get to realize that vision while ensuring we’re delivering the better ad performance our partners are looking for.”</span></p>
<p><img data-attachment-id="982" data-permalink="https://amphtml.wordpress.com/2017/01/30/ads-on-the-web-will-get-better-with-amp-heres-how/ezgif-com-resize-2/" data-orig-file="https://amphtml.files.wordpress.com/2017/01/ezgif-com-resize-2.gif?w=660" data-orig-size="644,566" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="ezgif-com-resize-2" data-image-description="" data-medium-file="https://amphtml.files.wordpress.com/2017/01/ezgif-com-resize-2.gif?w=660?w=300" data-large-file="https://amphtml.files.wordpress.com/2017/01/ezgif-com-resize-2.gif?w=660?w=644" class="alignnone size-full wp-image-982" src="https://amphtml.files.wordpress.com/2017/01/ezgif-com-resize-2.gif?w=660" alt="ezgif-com-resize-2" /></p>
<p><b>Cloudflare now provides ad verification services for AMP Ads</b></p>
<p>Unlike standard ads, AMP ads must be verified by an authorized signing service before being served to a page. This is important to ensure both a fast and secure user experience. Signed ads allow AMP to trust that the ads are properly created in AMP format. This allows AMP to coordinate the ad experience alongside other components on the page, for a fast and reliable ad experience.</p>
<p><span style="font-weight:400;">Cloudflare, a leading performance and security company, announced today an AMP ad verification and optimization service, Firebolt, that improves the ad experience for any 3rd party ad network or publisher. Utilizing Cloudflare’s AMP cache, Firebolt helps to deliver faster, safer, and more efficient ads. </span></p>
<p><span style="font-weight:400;">This collaboration with the broader ad tech community is a true testament to the open source nature of the AMP Project.</span></p>
<p><b>Not your typical banner ad</b></p>
<p><span style="font-weight:400;">One of the key tenets of AMP Ads is to ensure that while it makes user experiences better, it doesn’t throttle the creativity of advertisers and publishers. As you can see from the demo of USA Today’s early tests, you can deliver AMP ads using really creative ad formats. Importantly, more creative functionality is being added by the open source developer community with every passing week. </span><span style="font-weight:400;"><br />
</span></p>
<p><img data-attachment-id="991" data-permalink="https://amphtml.wordpress.com/2017/01/30/ads-on-the-web-will-get-better-with-amp-heres-how/usa-today-demo-gif-updated-2/" data-orig-file="https://amphtml.files.wordpress.com/2017/01/usa-today-demo-gif-updated-2.gif?w=660" data-orig-size="458,518" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="usa-today-demo-gif-updated-2" data-image-description="" data-medium-file="https://amphtml.files.wordpress.com/2017/01/usa-today-demo-gif-updated-2.gif?w=660?w=265" data-large-file="https://amphtml.files.wordpress.com/2017/01/usa-today-demo-gif-updated-2.gif?w=660?w=458" class=" size-full wp-image-991 aligncenter" src="https://amphtml.files.wordpress.com/2017/01/usa-today-demo-gif-updated-2.gif?w=660" alt="usa-today-demo-gif-updated-2" /></p>
<p><span style="font-weight:400;">And that’s not all. We’re also working with agencies and buying platforms to ensure they have the tools they need to both build and deliver these fast AMP ad creatives. Advertising teams at Google are also looking into ways in which they can auto convert ads to AMP creatives so that advertisers can get better marketing performance from faster, better ad experiences. </span></p>
<p><span style="font-weight:400;">This is the beginning of an exciting journey but there’s a lot more work ahead and we need to work together to ensure that ads remain the lifeblood of the internet. So get involved, </span><a href="https://github.com/ampproject/amphtml/blob/master/ads/google/a4a/docs/a4a-readme.md"><span style="font-weight:400;">join the AMP for Ads initiative</span></a><span style="font-weight:400;">, share your ideas and participate in a new fast, beautiful and open ads ecosystem. </span></p>
<p><i><span style="font-weight:400;">Posted by Richard Gingras, VP – News, Google</span></i></p><br /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/amphtml.wordpress.com/955/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/amphtml.wordpress.com/955/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=amphtml.wordpress.com&blog=102788268&post=955&subd=amphtml&ref=&feed=1" width="1" height="1" />
</div>
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Cara AMP Mempercepat Kinerja
---
[TOC]
Kombinasi semua pengoptimalan berikut adalah alasan mengapa halaman AMP sangat cepat sehingga tampak dimuat seketika:
Jika Anda lebih memilih mendengarkan dibanding membaca, video berikut yang disajikan oleh pimpinan teknisi AMP Malte Ubl akan memberikan ikhtisar yang mirip dengan teks yang ada di bawahnya.
<amp-youtube
data-videoid="hVRkG1CQScA"
layout="responsive"
width="480" height="270">
</amp-youtube>
## Hanya memperbolehkan skrip asinkron
JavaScript sangat hebat,
karena mampu memodifikasi hampir semua aspek halaman,
tetapi di sisi lain, juga bisa memblokir konstruksi DOM dan menunda perenderan halaman
(lihat juga [Menambahkan interaktivitas dengan JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
Agar JavaScript tidak terus-menerus menunda perenderan halaman,
AMP hanya memperbolehkan JavaScript asinkron.
Halaman AMP tidak boleh berisi JavaScript apa pun yang disusun oleh penulis program.
Sebagai ganti menggunakan JavaScript,
fitur halaman interaktif ditangani di elemen AMP khusus.
Elemen AMP khusus bisa berisi JavaScript di dalamnya,
tetapi didesain dengan cermat agar tidak menyebabkan penurunan kinerja.
Meskipun diperbolehkan di iframe,
JS pihak ketiga tidak diperbolehkan memblokir perenderan.
Misalnya, jika JS pihak ketiga menggunakan
[API `document.write` yang buruk untuk kinerja](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
JS ini tidak memblokir perenderan halaman utama.
## Menyatakan ukuran semua sumber daya secara statis
Sumber daya eksternal seperti gambar, iklan, atau iframe harus dinyatakan ukurannya di HTML
sehingga AMP bisa menentukan ukuran dan posisi setiap elemen sebelum sumber daya diunduh.
AMP memuat layout halaman tanpa menunggu sumber daya apa pun untuk diunduh.
AMP melepaskan layout dokumen dari layout sumber daya.
Hanya satu permintaan HTTP yang diperlukan untuk melayout keseluruhan dokumen
([+font](#font-triggering-must-be-efficient)).
Karena AMP dioptimalkan untuk menghindari rekalkulasi gaya dan layout yang bebannya besar di browser,
tidak akan ada layout ulang saat sumber daya dimuat.
## Tidak memperbolehkan mekanisme ekstensi memblokir perenderan
AMP tidak memperbolehkan mekanisme ekstensi memblokir perenderan halaman.
AMP mendukung ekstensi untuk elemen-elemen seperti
[lightbox](/docs/reference/extended/amp-lightbox.html),
[sematan instagram](/docs/reference/extended/amp-instagram.html),
[tweet](/docs/reference/extended/amp-twitter.html), dsb.
Meskipun elemen ini memerlukan permintaan HTTP tambahan,
permintaan tersebut tidak memblokir layout dan perenderan halaman.
Halaman apa pun yang menggunakan skrip khusus harus memberi tahu sistem AMP
bahwa nantinya akan memiliki tag khusus.
Misalnya, skrip [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
memberi tahu sistem bahwa akan ada tag `amp-iframe`.
AMP membuat kotak iframe sebelum mengetahui apa yang akan disertakan:
[sourcecode:html]
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
## Mempertahankan semua JavaScript pihak ketiga di luar jalur penting
JS pihak ketiga cenderung menggunakan pemuatan JS sinkron.
Skrip ini juga cenderung menerapkan `document.write` pada skrip sinkronisasi lainnya.
Misalnya, jika Anda memiliki lima iklan dan setiap iklan ini melakukan tiga pemuatan sinkronisasi
dengan koneksi latensi 1 detik,
Anda membutuhkan waktu pemuatan 15 detik hanya untuk memuat JS.
Halaman AMP memperbolehkan JavaScript pihak ketiga tetapi hanya dalam iframe yang di-sandbox.
Dengan mencegahnya masuk ke dalam iframe, JavaScript pihak ketiga tidak bisa memblokir eksekusi halaman utama.
Bahkan apabila memicu rekalkukasi gaya berkali-kali,
iframe-nya yang sangat kecil hanya memiliki sedikit DOM.
Rekalkulasi gaya dan layout umumnya sebanding dengan ukuran DOM,
sehingga rekalkulasi iframe sangat cepat dibandingkan dengan
rekalkulasi gaya dan layout untuk halaman.
## Semua CSS harus sebaris dan dibatasi ukurannya
CSS memblokir semua perenderan, memblokir pemuatan halaman, dan cenderung besar ukurannya.
Di halaman AMP HTML, hanya gaya sebaris yang diperbolehkan.
Ini menghilangkan 1 permintaan HTTP atau sering kali lebih dari jalur perenderan yang penting
dibanding dengan sebagian besar laman web.
Selain itu, ukuran maksimum style sheet sebaris adalah 50 kilobyte.
Meskipun ukurannya cukup besar untuk halaman yang sangat kompleks,
style sheet sebaris mengharuskan penulis halaman untuk menerapkan gaya penulisan CSS yang bersih.
## Pemicuan font harus efisien
Font web ukurannya sangat besar, sehingga
[pengoptimalan font web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
sangat penting bagi kinerja.
Pada halaman umumnya yang memiliki beberapa skrip sinkronisasi dan beberapa style sheet eksternal,
browser menunggu dan terus menunggu untuk mulai mengunduh font yang ukurannya besar hingga semuanya berakhir.
Sistem AMP menyatakan nol permintaan HTTP hingga font mulai diunduh.
Ini hanya bisa dilakukan karena semua JS di AMP memiliki atribut asinkron
dan hanya style sheet sebaris yang diperbolehkan;
tidak ada permintaan HTTP yang memblokir browser mengunduh font.
## Meminimalkan rekalkulasi gaya
Setiap kali Anda mengukur sesuatu, tindakan ini memicu rekalkulasi gaya yang bebannya berat
karena browser harus melayout keseluruhan halaman.
Di halaman AMP, semua pembacaan DOM terjadi di awal sebelum terjadi semua penulisan.
Ini memastikan terjadi maksimal satu rekalkulasi gaya per bingkai.
Ketahui selengkapnya tentang dampak gaya dan rekalkulasi layout terhadap
[kinerja perenderan](https://developers.google.com/web/fundamentals/performance/rendering/).
## Hanya menjalankan animasi yang diakselerasi GPU
Satu-satunya cara untuk mendapatkan pengoptimalan maksimal adalah dengan menjalankan animasi di GPU.
GPU memahami layer serta cara menjalankan beberapa hal di layer ini,
GPU bisa menggerakkannya, memudarkannya, tetapi tidak bisa memperbarui layout halaman;
GPU akan menyerahkan tugas ini kepada browser, yang dampaknya tidak bagus.
Aturan untuk CSS yang berkaitan dengan animasi memastikan animasi bisa diakselerasi oleh GPU.
Khususnya, AMP hanya memperbolehkan animasi dan transisi pada transform dan opacity
sehingga layout halaman tidak diperlukan.
Ketahui selengkapnya tentang
[menggunakan transform dan opacity untuk perubahan animasi](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count)
## Memprioritaskan pemuatan sumber daya
AMP mengontrol semua unduhan sumber daya: dengan memprioritaskan pemuatan sumber daya,
memuat hanya apa yang diperlukan, dan mengambil di awal sumber daya yang lambat dimuat.
Saat mengunduh sumber daya, AMP mengoptimalkan unduhan
sehingga sumber daya yang paling penting saat ini diunduh terlebih dulu.
Gambar dan iklan hanya diunduh jika berpotensi besar dilihat oleh pengguna,
di paro atas, atau jika pengguna berpotensi menggulir ke arahnya dengan cepat.
AMP juga mengambil sumber daya yang lambat dimuat di awal.
Sumber daya dimuat selambat mungkin, tetapi diambil terlebih dahulu sedini mungkin.
Dengan demikian, semuanya dimuat sangat cepat tetapi CPU hanya dipakai
saat sumber daya benar-benar diperlihatkan ke pengguna.
## Memuat halaman seketika
[API preconnect](http://www.w3.org/TR/resource-hints/#dfn-preconnect) yang baru
sangat sering dipakai untuk memastikan permintaan HTTP secepat mungkin saat dibuat.
Dengan demikian,
halaman bisa dirender sebelum pengguna secara eksplisit menyatakan ingin menuju ke sana;
halaman mungkin sudah tersedia saat pengguna benar-benar memilihnya,
sehingga terjadi pemuatan seketika.
Meskipun pra-perenderan bisa diterapkan pada semua materi web,
tindakan ini juga bisa menggunakan banyak sekali bandwidth dan CPU. AMP dioptimalkan untuk mengurangi kedua faktor ini. Pra-perenderan hanya mengunduh sumber daya di paro atas
dan pra-perenderan tidak merender hal-hal yang memberatkan CPU.
Saat dokumen AMP dipra-render untuk pemuatan seketika,
hanya sumber daya di paro atas yang benar-benar diunduh.
Saat dokumen AMP dipra-render untuk pemuatan seketika,
sumber daya yang berpotensi memakai banyak CPU (seperti iframe pihak ketiga) tidak diunduh.
Ketahui selengkapnya tentang
[mengapa AMP HTML tidak penuh memanfaatkan pemindai pramuat](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e)
## Bantu mempercepat AMP
AMP adalah upaya sumber terbuka.
Kami membutuhkan bantuan Anda untuk semakin mempercepat AMP.
Pelajari [cara berkontribusi](/docs/support/contribute.html).
```