AMPlifying Google Play Newsstand

Google Play Newsstand is focused on providing a high-value and easy-to-use platform for thousands of news and magazine publishers to reach new audiences in a world where the smartphone is the main computing device for more and more people.

One of the reasons for the success of the product has been the ability to help publishers distribute content across a variety of mobile devices by supporting multiple content formats.  Well now we are building on that effort by adding AMP support to Google Play Newsstand on both Android and iOS.  

This means publishers who have created AMP pages can have them set as their preferred rendering format using Google Play Newsstand Producer, the publisher management portal. And one of the great benefits is that AMP rendering gives publishers more visual control of their content while preserving the fast, mobile-optimized experience users have come to expect in Play Newsstand.

amp-play-newsstand
One the left side of each pair is an article on Play Newsstand using feed-based rendering and on the right side is an article on Play Newsstand using AMP rendering.

When a publisher opts into using AMP in Play Newsstand, Play Newsstand will render the articles everywhere they appear as an AMP (if an AMP version is available), whether it is the user’s personalized news stream, a news or interest based topic, or the publisher’s edition.

“Play Newsstand is a great platform for Mirror Online, allowing us to reach a broad and incremental mobile audience. The launch of AMP inside Newsstand brings together that great distribution with the ability to deliver our rich and curated pages within the app, with our full set of monetisation tools”

— Rob Hammond, Head of SEO & Distributed Platforms, Mirror Online

“As one of AMP’s launch partners, we’re pleased to see the continued roll-out of AMP in apps such as Google Play Newsstand. We believe the new design and technology will enhance user experience and we will be closely listening to reader feedback.”

— Anthony Sullivan, Director of Product, Guardian News & Media

AMP support in Play Newsstand is currently available for free content, and we are exploring extending it for paid content in the future. If you would like to enable AMP for your edition get in touch with us at producer-support@google.com.  We look forward to hearing your feedback.

Posted by Sami Shalabi, Head of Product and Engineering, Google Play Newsstand

AMPlifying Google Play Newsstand

Introducing the AMP Validator Web UI

Following up on the release of our AMP Validator Chrome Extension, today we’re releasing another way to validate your AMP pages: validator.ampproject.org provides a simple web UI for the AMP Validator.

validator-web-ui

You can provide a URL to load the AMP HTML source code from, or copy/paste your source code, and the editor displays validation messages between the lines. Edits trigger revalidation, providing interactive feedback.

It’s open source, so please feel free to file bugs, send fixes, or tweak it for your own needs. Please enjoy!

Posted by Johannes Henkel, Software Engineer, Google

Introducing the AMP Validator Web UI

A Chrome extension to help validate your AMP pages

AMP’s validation framework is an essential ingredient to ensuring your pages are truly as fast as AMP can make them. Because of this, keeping an eye on the validation status as you develop and deploy AMP pages is a must for any AMP developer. The AMP library provides a built-in validator, but perhaps your fingers have already grown tired of typing “#development=1” as you expand your AMP coverage. Fret no more! Today we’re happy to announce a Chrome extension to assist you in your embrace of a better and faster mobile web through AMP.

extension-listing

AMP Validator Chrome Extension

With the new AMP Validator Chrome extension, you can quickly notice and debug invalid AMP HTML pages. As you browse, it will automatically validate each AMP page visited and give an indication of the validity of the page.

[Editor’s update: We have released a similar extension for Opera. Check it out here.]

When there are errors within an AMP page the extension’s icon shows in a red color and displays the number of errors encountered, like this:

icon-invalid

When there are no errors within an AMP page, the icon shows in a green color and displays the number of warnings, if any exist:

icon-valid

When the page isn’t AMP but the page indicates that an AMP version is available, the icon shows in a blue color with a link icon, and clicking on the extension will redirect the browser to the AMP version.

icon-link

Easily see what errors or warnings the page has by clicking on the extension icon. Every issue will list the source line, source column, and a message indicating what is wrong. When a more detailed description surrounding the issue exists, a “Learn more” link will take you to the relevant page on ampproject.org. For those familiar with “#development=1”, you’re right, this is exactly the same information you would see in the console but more easily accessible and pretty too.

screenshot

Posted by David Sedano, Software Engineer, Google

A Chrome extension to help validate your AMP pages

Ads on AMP: Where Faster is Better

When the AMP team set out to help make mobile experiences great for everybody, the objective wasn’t just to improve a user’s engagement with content. We knew the experience people had with ads was equally important to help publishers fund the great content we all love to read.

The AMP team laid out four core principles that would guide the innovation on the AMP ads roadmap and get us to a world where ads are as fast and engaging as the content we value.

  • Faster is better
  • ‘Beautiful’ matters
  • Security is a must
  • We’re better together

We recently took a moment to review the progress made  and see how ads on AMP are doing. We compared ad performance on AMP and non-AMP mobile pages across 150 publishers (large corporations and small businesses in different geographic regions) on our programmatic platforms. The preliminary results are encouraging.

Compared to non-AMP pages, ads on AMP have led to:

    • 80%+ of the publishers realizing higher viewability rates
    • 90%+ of the publishers driving greater engagement with higher CTRs
    • The majority of the publishers seeing higher eCPMs (Impact and proportion of lift varies by region and how optimized the non-AMP sites are)

AMP June 7 Infographic

We have also received positive feedback from a number of publishers with varying mobile web advertising business models:

‘So far, AMP has performed well against a number of metrics for advertising effectiveness and revenue. One encouraging stat is that we have seen an increase in viewability of ads within the AMP environment. As the industry moves more towards this as a measurement tool it is important we focus on optimizing for this metric.  We are encouraged by the open approach to both publishers and our tech partners and look forward to what’s to come’ — Noah Szubski, Chief Product Officer, DailyMail and EliteDaily

‘It is still very early days, but AMP has performed well to date from both direct and indirect monetization sources. We’ve been able to extend all of our custom ad products to AMP and have enabled it within our premium ad marketplace, Concert. We see AMP as a perfect intersection of two core tenets of Vox Media – fast mobile web experiences and ads that perform. We are encouraged by all of the metrics and are looking forward to continuing to grow this important channel” — Joe Alicata, Vice President of Revenue Products & Operations, Vox Media

“We’ve seen a 90% decrease in page latency, 96% decrease in unfilled impressions, 65% increase in ad engagement and 32% increase in eCPM. Perceived load time improved from approximately 17 seconds to 2-3 seconds.”  Conor Beck, Director of political news network TownHall Media

While this makes for a promising start, we’ve barely scratched the surface of what’s possible with ads in AMP. There’s much work ahead for us and the rest of the industry — including our third party ad tech partners — to make advertising experiences on the mobile web as great as content experiences with AMP. We’re both committed to and excited by that.

If you’re curious about what lies ahead for the broader AMP project, check out the AMP roadmap. Here’s a brief snapshot of what we are expecting to launch with ads this quarter and next:

  • “Beautiful” matters: Two new formats that are as beautiful as they are engaging.
    • Sticky Ads — greater viewability without sacrificing user experience
    • Flying Carpet Ad — a large canvas for immersive, fast ad experiences
  • AMP Ads for AMP Pages:  Ads that load as fast as the content on AMP

Stay tuned for more details on some of these ads initiatives in coming weeks.

Posted by: Craig DiNatali, Director, Global Partnerships Google and Nitin Kashyap, Product Manager, Google

Ads on AMP: Where Faster is Better

AMPlifying Google News – AMP in Six More Google News Editions

In April, Google News added support for Accelerated Mobile Pages to the US English Edition on the web, on Android and on iOS.  AMP enables a fast reading experience on Google News, making it easy for people to get to the latest news quickly and to read more in the limited time they have. This has also been great for publishers, leading to more visits to their websites. With an increasing number of publishers around the world embracing AMP and a growing AMP corpus in international languages, the Google News team is now able to extend AMP support to more countries. Today Google News is announcing AMP in six editions – France, Germany, Italy, UK, Russia, and Mexico. People in these countries can now also enjoy a truly fast News reading experience.  

The Google News team is keen to bring the instant-reading AMP experience to even more countries and looks forward to publishers around the globe helping us get there by AMPlifyng their content.

Posted by Anand Paka, Product Manager, Google News

AMPlifying Google News – AMP in Six More Google News Editions

Introducing the AMP Roadmap

The AMP Project is fast approaching its 100th release, which means 100 releases where stuff has changed—new features added, enhancements provided, and bugs fixed. Since its launch at the end of last year, the engagement from people across the industry has been incredible. It is clear that many are united in improving the mobile web, and your code submissions, feature requests, and support have been invaluable. But we all recognize that it can be tricky to stay fully up to date on AMP, which basically requires being plugged into each new issue and conversation in the project’s issue tracker.

Today, based on the guidance and feedback of the broader AMP community, we have compiled and are posting the AMP Roadmap on our project site. It is designed to help you understand at a quick glance the project’s current status and where it is heading.

AMP-Roadmap.png
Read the full AMP Roadmap at https://ampproject.org/roadmap

This is something that many people who are interested in AMP have asked for. The AMP Roadmap is designed to encourage transparency and provide a shared sense of priorities to anyone using or supporting the AMP library. There is no formal process for the creation of the roadmap—instead consider it a guide, a non-exhaustive summary of the existing higher-volume, public information sources such as the GitHub issue tracker, mailing list, Slack channel for AMP developers, @amphtml Twitter updates, and others.

A tour of the AMP Roadmap

The AMP Roadmap presents information relating to AMP’s four main focus areas, which are: Format, Analytics, Ads, and Access.

  • Format covers visual elements like carousels and lightboxes, widgets like social embeds, video players, how AMP generally works, and basically anything not covered by the below areas.
  • Analytics covers the ways to collect analytics data from a web page, particularly by using features like amp-pixel or amp-analytics, and providing interoperability with data analysis solutions.
  • Ads covers anything related to enabling ads on AMP pages, providing interoperability with ad technology providers, and driving ad ecosystem innovation with the AMP format.
  • Access covers the amp-access element and anything related to providing content access controls to enable subscription and paid content support in AMP pages.

For each area, three sections offer a quick summary of what’s important to know:

  • Themes for the current quarter will tell you about high-level goals and feature plans. This area won’t be the place to look to learn about which specific feature has been built to support a particular use case, but it will help you get a sense for the types of features that are receiving development emphasis.
  • Status for the current quarter will give you a listing of the largest planned projects for the quarter and their progress, as of the most recent update to the roadmap.
  • The outlook for upcoming quarters will provide a summary of some of the projects being considered and that we expect to get further attention in the next six months.

Anything listed is subject to change, and you should expect greater change to listings that are mentioned for upcoming quarters.

Updates

The AMP Roadmap will be updated twice each quarter:

  • An update in the middle of the quarter will provide that quarter’s first detailed listing of projects and their status.
  • Around the end of the quarter the status of projects in the just-ended quarter will be updated, as well as any necessary changes to priorities forecasted for upcoming quarters.

Help shape AMP

To weigh in on the AMP Roadmap, suggest features or come talk to us. And of course, you are encouraged to contribute features or enhancements to the AMP Project anytime, even if they are not among the projects highlighted in the roadmap.

We hope you’ll find the AMP Roadmap helpful to your work involving AMP and look forward to your feedback.

Posted by Rudy Galfi, Product Manager

Introducing the AMP Roadmap

Menus, sharing, and dynamic CSS classes in AMP

The AMP project launched with a solid set of initial features, but with a commitment to making the web a better experience for publishers, users, and developers, we’re working hard to regularly bring more components and capabilities into the framework.

AMP is driven directly by the needs of the ecosystem itself. With that in mind, we’re proud to present a round-up of several recently-added features that address needs we’ve heard from within the community. These include ways to easily add navigational menus to your page, expand and collapse content sections, integrate social sharing actions, and vary content based on visit factors like referrer.

<amp-sidebar>

Publishers rely on clear navigation to guide readers through their sites, and users rely on seamless design to get the most value from the content. When AMP launched, resourceful publishers could use a combination of tools (along with a lot of time and expertise) to enable navigational menus, but we wanted to make that easier, and provide out-of-the-box support for a better developer and end-user experience.

<amp-sidebar> is a versatile container for content that needs to be available instantly, but never blocks the content when it’s not needed. When toggled by a user tap, it slides into view from the side, and then out again on the next tap, like a traditional “hamburger” menu. We’ve taken care of a number of cross-browser quirks, and provided customizable default styling for certain details, such as a transparent scrim over the background content when the sidebar is visible. This way, developers can let go of time-consuming implementation details and focus on the content.

sidebar_demo_slow

<amp-sidebar> was recently released, and we’re eager to hear feedback. Check out an example implementation at the AMP by Example, read about how to implement it on your site in the documentation, and feel free to open a new issue if you find bugs or want to request a new feature.

<amp-accordion>

Publishers need to make the most out of every bit of space on a mobile device, but that doesn’t mean having to discard good content. Even on desktop platforms, the use of a collapsible section is a popular way to optionally display detailed information under a higher-level heading. <amp-accordion> brings this solution to AMP with a freely styleable component that lets you expand and collapse a section by tapping on its header.

amp-accordion-demo

Try it out in conjunction with <amp-sidebar> to construct a tiered menu—you can even nest one <amp-accordion> inside another, to get the levels of hierarchy that best suit your site’s organization.

<amp-social-share>

When a user wants to share the story they have just read, you want to remove any obstacle that stands between your content and potential virality. <amp-social-share> provides easy-to-implement buttons that share the current page with a set of popular sharing platforms like Facebook, Google+, LinkedIn, Pinterest, and Twitter. The small (but growing) set of built-in providers can be used out-of-the-box, and developers can now customize the buttons to include additional platforms.

<amp-social-share> has also just recently been released into production, so we are looking for feedback. Read about how to implement it on your site in the documentation, and feel free to open a new issue if you find bugs or want to request a new feature.

<amp-dynamic-css-classes>

Speaking of sharing—with all the new surfaces for discovery and consumption that AMP makes possible, wouldn’t it be nice to tailor content based on where the user is coming from and how they’re seeing it? <amp-dynamic-css-classes> gives publishers the control to easily style elements based on referrer and viewer context. Whether users have clicked on a link from a specific partner website or social platform, publishers can style the content they land on differently, even swapping out pieces of content for others, to ensure the best experience.

Publishers can also use <amp-dynamic-css-classes> to style pages differently based on whether they are displayed inside a viewer, as in the “Top Stories” carousel in Google Search.

Get involved

AMP has made incredible strides in a few short months, and we’re constantly working to expand the capabilities of the framework, in order to help publishers make the best experiences for users. But this doesn’t work without the feedback and involvement of the publishing and development community. So please try out and submit feedback for experimental and new features; suggest new features and enhancements to existing ones in the AMP Project GitHub repository; if you’re a developer, consider getting involved by taking on a starter project in the repo, or submitting an intent to implement for a new feature; and finally, ask and answer questions on Stack Overflow to help make it easy for all developers to implement AMP.

The ecosystem is only as strong as its members’ commitment to make it better—we look forward to working with you.

Posted by Eric Lindley, Product Manager

Menus, sharing, and dynamic CSS classes in AMP

Fast Access to AMP URLs with the AMP URL API

Planning to catch some of the excellent AMP sessions at I/O this week? Want to improve your native or web app with lightning fast AMP content? We have exciting news!

Mobile websites and apps can benefit from AMP not only by publishing AMP documents, but also by linking to AMP documents. Slow content, whether you created it or not, negatively impacts your users: 40% of users abandon a site that takes more than three seconds to load (source).

We’re announcing the general availability of the AMP URL API. In simplest terms, the API works like this: “here are some non-AMP URLs, give me the matching AMP URLs!”. AMP documents load 4x faster and use 10x less data, which means your users will benefit from fast-loading AMP documents whether or not they were created by you.

The AMP URL API retrieves the matching AMP URLs for a given list of URLs (which do not need to be the canonical versions). If a valid AMP version exists, the response of the API includes the URL for the cached copy of the document in the Google AMP Cache (as well as the URL for the source AMP document). Documents in the Google AMP Cache are validated before being cached so you can link with confidence, and benefit from the speed and scale of Google’s global caching infrastructure.

To access the AMP URL API click here.

Posted by James Morehead, Product Manager, Google

AMP URL API

Fast Access to AMP URLs with the AMP URL API

Get up to speed on AMP at Google I/O

[Update May 23, 2016: Videos for the linked sessions have been included below.]

Hey folks!  I’m Jordan Adler, a Google Developer Advocate, and I wanted to share a bit of information for those of you attending Google I/O.  I/O is our annual developer festival where we share updates on new products and platforms, and connect with Android, Web, and iOS developers.

This year is our 10th anniversary, and at I/O we’ll be speaking a lot about the increasingly-mobile web.  There’s a few sessions where we’ll talk directly about how we and other developers are using AMP HTML to create engaging and innovative experiences.  

Whether you’re attending in-person or via stream, I highly recommend these AMP-related I/O sessions (all times—and some oceans—Pacific):

Thursday, May 19

1 PM – Search and the mobile content ecosystem

 

2 PM – The Mobile Web: State of the Union

 

Friday, May 20

2 PM – How AMP achieves its speed

 

3 PM – AMP + PWAs

 

If you’re attending in person, stop by the AMP Connector near the Mobile Web sandbox to chat with some of the folks on the AMP team.  Over in the Search sandbox, we’ll be sharing some of the cool ways we’re using AMP to help Google Search and Google News provide a faster experience for users, such as the Top Stories carousel and some new experiences as well.

I look forward to seeing you all there, in person or in spirit. 

Posted by Jordan Adler, Developer Advocate, Google

Get up to speed on AMP at Google I/O

Behind the scenes at AMP’s new Very Large Mobile Page Accelerator

AMP was founded with the vision that publishers can create mobile-optimized content once and have it load instantly everywhere. Now widely available, the AMP experience has been likened to magic (some have called it “yesterday fast”). We felt it was time to take a deep dive into how AMP works at a subatomic level. It isn’t magic, it’s physics.

We knew that the secret to fast-loading pages was contained in the pages themselves, but the heaviest page elements have always been tightly bound by high-energy scripts that thread through nearly every line of code, making it nearly impossible to determine the essential parts of a page.

That was before the construction of the Very Large Mobile Page Accelerator (VLMPA), a massive and specialized machine for exploring the mysterious article physics of the mobile information space.

01_VLMPA
The VLMPA is roughly 24,901 miles in circumference

In the VLMPA, two beam pipes containing mobile web pages gradually accelerate their atomic units of content to equal and opposite speeds of 0.999999999c (only about 0.7 mph slower than the speed of light) and collide them with one another. Detectors around the point of collision analyze the burst of elementary articles that result from this explosive impact. Tracing the paths of these phenomena with the VLMPA will allow us to uncover clues to the nature of dark content, pursue the origins of mass media in all its dimensions, and investigate what happens to spurious antimatter, otherwise known as the misinformation space.

Findings

After only a few months of running the VLMPA, the sheer volume of findings has surprised and inspired us.

One of the biggest challenges for the web is the presence of particularly heavy elements. Their gravitational attraction can lead to various and strange quantum effects, including the total collapse of a page over its event horizon. In our research we found that large electromagnets can counter the phenomenon in most cases, though high energy usage remains a problem.

Of particular note, our research shows that web pages are in fact made up of many tiny, one-dimensional strings, effectively putting an end to decades-long discussions about string theory.

02_stringtheory
The VLMPA team is proud to have proven string theory

So what can we actually do with this research capability? Our findings have already taught us a lot about how to confront the binary chaos of the mobile web. Now we can put that knowledge into practice.

For instance, we now freeze AMPs to near 0 degrees Kelvin before putting them on the wire, dramatically reducing the friction of the bytes when they pass through a tiny 2G connection. We also now use the new Content Ambiguity Toolkit (🐱) to defer collapsing a page element’s quantum waveform until just before it is within the viewport. We can address the age-old question: if the page element is never scrolled to, does it exist at all? Now, it can effectively remain both loaded and not-loaded—a huge savings in bandwidth.

The Future

So, whats next? Over the coming months we plan to feed increasingly heavy portable content units into the accelerator. Some theorists suggest the collision of 2 pages above 6,000 EeV (6×1024 electron-volts, or the amount of energy required to transport 20 MB of data from the equator to geostationary orbit) would result in a very small black hole. This is unlikely, and we’re confident that any singularity, if created, would be visually unobtrusive to most users. Please follow our Twitter account for updates.

03_blackhole
What to avoid with the VLMPA

And this is just the beginning. We’re close to getting answers to some of the most burning questions about web technology, including insights into the lo-on, a hypothetical particle believed to have existed only briefly in the moments after the web itself was born.

However, not everyone agrees that the most important particle in this search is the lo-on:

“Actually, when the web was born, a gigantic explosion of bogons filled the metaverse, polluting the web with vast quantities of expression, leaving Internauts with the task of sorting fact from fantasy,” explains internet pioneer Vint Cerf.

We look forward to the exciting discoveries VLMPA has yet to surface. We hope you’ll be accelerating with us.

Posted by AMP Project Research Group
Exploring theoretical article physics—all in good humor—since April 1, 2016

Behind the scenes at AMP’s new Very Large Mobile Page Accelerator