What’s new in AMP by Example

The following was posted on Medium by Sebastian Benz, Developer Advocate, Google.

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.

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

ampbyexample2Open any sample in the playground

AMP Component Updates

There have been quite a few updates to the AMP component samples:

 

ampbyexample3amp-fx-parallax

  • amp-gist: developers rejoice, finally it’s possible to embed Github Gists into AMPs.
  • 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.

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

ampbyexample5Tab Panels with AMP

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

ampbyexample6Single-page poll in AMP

AMP Ads galore!

Big update to the AMP Ads section demonstrating how to build AMP ads:

  • AMP Ad sample previews are now served as real AMP ads via DFP. Previously, AMP ad previews were embedded using iframes which didn’t make use of the optimized AMP ad rendering performance.
  • Hello World Sample: learn how to create an AMP Ad.
  • Video Ad Sample: a sample ad really showing off what is possible with AMP.
  • Speed comparison: see how fast an AMP Ad loads in comparison to a regular ad. Best viewed on a 3G connection.

ampbyexample7AMP ads load almost instantly

What’s next?

We’ll continue providing samples for new AMP components, 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 where you would like to see samples.

Posted by Sebastian Benz, Developer Advocate, Google.

What’s new in AMP by Example

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s