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