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.
<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.
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