What’s new in AMP by Example

A lot has happened since I last wrote about AMP by Example. This post gives you a quick overview about new samples and what’s new on the site itself.

A new Design

We completely re-designed www.ampbyexample.com using the brand-new AMPStart template and component library. The other big change: samples no longer use a three column layout. Instead, code snippets and live previews are embedded into the documentation.

The new design

Interactive AMP Playground

If you want to play around with the sample code: all samples can now be opened in an interactive playground. At the moment it’s limited to only editing existing samples, but we plan to make this even more useful by making it possible to share samples with others.

amp-iframe: update to the existing sample demonstrating how amp-iframes can resize themselves. This can be very useful when embedding third-party content via iframe.

resizesable amp-iframe

More AMP Use Cases

New samples demonstrating how to combine AMP components to solve complex use cases:

Tab Panels in AMP: eBay contributed a sample demonstrating how to implement tabs in AMP. One thing to note: while creating the sample, eBay discovered that the current implementation doesn’t fulfill their accessibility requirements yet. This is the issue tracking what needs to be done to fix this.

Tab Panels with AMP

Poll Sample: how to implement a single page poll in AMP making sure that users can only vote once.

Single-page poll in AMP

Star Rating Sample: important for ecommerce websites, how to implement a accessible star rating.

Speed comparison: see how fast an AMP Ad loads in comparison to a regular ad. Best viewed on a 3G connection.

AMP ads load almost instantly

What’s next?

We’ll continue providing samples for any new AMP component that’s being released, but also plan to focus more on how complex use cases can be solved by combining existing AMP components. Please let us know if there any specific use cases we should provide samples for.