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

Test amp-bind on your site with an origin trial

All features in AMP need to be tested (that’s why we build things using experiments). However, particularly large, complex, and flexible features need a bit more attention. In particular, they need to be implemented end-to-end in real-world applications, for real users. That way, we can be sure that these features work well when they’re launched.

We recently announced amp-bind, an experimental data binding system that provides a more flexible, expansive way of supporting interactivity in AMP. Along with that flexibility comes a lot of complexity, unknowns, and the necessity to thoroughly test in order to make sure it works right from the start. For that reason, amp-bind stands to gain a lot from the ability to run in production, on websites where developers can implement with a real-world purpose. That’s why we’re setting up origin trials for amp-bind.

 

What is amp-bind?

In short, amp-bind fundamentally changes the model for interactivity in AMP, while retaining AMP’s essential performance and UX assurances. amp-bind works more like a coding layer on top of AMP—going beyond the AMP Project’s historical approach of limiting interactivity to scoped, use-case-driven components like amp-carousel and amp-accordion. amp-bind links user actions with triggers for different document states, giving developers much more freedom in the types of interactions they can define.

product-detail-bind.gif

To get an idea of what amp-bind can support on your AMP pages, check out some of its basic behaviors, such as how it can work together with an image carousel. You can also see how it can be integrated into a basic product detail page.

 

What are origin trials?

Origin trials (inspired by the Google Chrome team) are useful when a feature is far enough along that it’s ready to be tested with real users, but some changes are still expected based on developer feedback.

Traditionally, a feature at this stage is put into experimental mode, where developers can try it in development, but it won’t work in production yet. This can be useful, but developers won’t necessarily try something out unless they see immediate benefit, so it’s hard for them to justify putting work into something that won’t work in production.

Enter origin trials: interested developers can opt-in to a test where they can use a new feature in production, with the expectations a) that the test is for a limited time, and b) that the feature will likely undergo some changes after origin trials. Unlike Chrome origin trials, which restrict the experiment to a small percentage of users, amp-bind origin trials will enable the feature for every visitor visiting a whitelisted domain.

Origin trials are a great opportunity to try out a new feature before it’s fully live: you get to benefit immediately from the work you put into a feature (because the feature will be live on your site, rather than still guarded by an experiment), and your feedback can directly influence the direction of the feature.

 

How to whitelist your site for origin trials with amp-bind

Sign up here to let us know you’re interested origin trials for amp-bind on your site, and we’ll get back to you with next steps. Note that we can whitelist only a limited number of domains for the feature, given the AMP team’s limited bandwidth for developer support.

As always, we want your feedback for amp-bind—whether your site is whitelisted for origin trials, or if you’ve just checked out the documentation and samples. Once we have enough input from the AMP community, and have made any necessary changes, we’ll release the feature to production for all sites, regardless of their status with respect to origin trials. We’re looking forward to hearing from you, and to seeing a lot more interactivity in AMP!

Posted by Eric Lindley, Product Manager, AMP Project

Test amp-bind on your site with an origin trial

From AMP to Progressive Web App

PWA_AMP1If you’ve invested in AMP and are also getting ready to upgrade your mobile website to a next-generation Progressive Web App, I have good news for you: AMP and Progressive Web Apps can be combined and used together to create a fantastic user journey. And we have a new set of docs on AMPproject.org to help with just that.

AMP makes for an ideal entry point into your site due to the almost-instant prerendered load, and the <amp-install-serviceworker> component allows you to warm up and preload a Progressive Web App while your users are reading an AMP page. Users clicking on links to your origin will now instantly upgrade to the full-featured Progressive Web App. This means you can start fast with AMP and stay fast with your Progressive Web App experience.

In addition, you can now reuse the entire content library you already have in the form of AMP pages and use them as a centerpiece in your Progressive Web App, saving engineering resources and complexity.

To learn more about how to combine AMP and Progressive Web Apps, head to one of the following resources:

  1. Our brand new set of docs discussing AMP and Progressive Web Apps, deep diving into how to enable Progressive Web App features for your AMP pages, how to preload your Progressive Web App from your AMP Pages and embed & use AMP as a data source
  2. The primer released in Smashing Mag
  3. The conference talk by Alex Russell from the AMP Conf 2017

Get in touch via our developer support channels if you have questions or feedback. We can’t wait to see what you will build!

Posted by Paul Bakaus, Developer Advocate, AMP Project

From AMP to Progressive Web App

AMP Conf 2017 Recap (and videos!)

Last month we held our first AMP Conf, and it was a blast. Over 300 of you showed up in-person, and thousands tuned into the live stream.

Over two days, 19 talks, panels and workshops – with over half from outside the AMP team – covered topics including building interactive AMP pages and using AMP pages for e-commerce.

If you couldn’t make it to AMP Conf, you can relive and watch all the talks on the AMP Channel:

We had many community announcements, such as Baidu, Sogou, and Yahoo Japan linking to AMP pages. The core AMP team had lots to share as well– among the announcements at AMP Conf:

And dear to my heart were the thoughtful discussions many of us had with people at the conference looking at the AMP Project’s direction. A lot of the conversations were captured in detail during the AMP & the web and The roles platform play panels.

We might not have all the right solutions yet, but with your help we can get there. It’s clear that we still have much to do, but AMP Conf opened the door for more open collaboration and conversation with the web community. So get involved and come help us! Creating a long-term, healthy mobile web ecosystem is complex and needs the voices of many.

See you soon at another conference!

Posted by Paul Bakaus, Developer Advocate, AMP Project

AMP Conf 2017 Recap (and videos!)

AMP Roadmap update to close out Q1

We’ve updated the AMP Roadmap to reflect some of the progress made in the first quarter of 2017. You can read more about some of the highlights below.

Format

We continue to place a big focus on making the AMP format conducive to more interactive and engaging user experiences. We’ve made amp-bind, a flexible event binding system that enables vastly more interactivity in AMP, available in an experimental beta release. This means you can test out some of the basic behaviors of amp-bind, such as how it can work together with an image carousel—but amp-bind won’t yet be valid for use in production AMP pages until its launch, which is targeted for later this quarter.

We’re also working on scroll-dependent interactions. We’ve started by directly addressing two concrete use cases: parallax scrolling and contextually-displayed headers. In addition, we’re working on a general, flexible framework for scroll-bound animations.

Finally, earlier this month we launched AMP Start, a collection of quick-start code templates and components, intended to give developers and designers the tools to create great-looking AMP sites quickly and easily. In the coming weeks we’ll be working on ways to make it easier to use and configure these pages without having to edit the code directly.

 

Ads

We’ve made an update to sticky ads by removing the restriction to load the ad only after the first viewport – this should boost viewability. We’re hopeful this change can also drive greater monetization due to the viewability increase for your sticky ads implementation. We’ve also updated the sticky ad to collapse when there are no ad fills instead of displaying an empty container.

In addition, this quarter we reached the milestone of 100 ad networks supporting AMP. To help these ad networks serve AMP ads, Cloudflare has launched an ad network implementation that makes it easy for any ad network to serve them. In addition, Cloudflare launched Firebolt, a suite of services that makes it easy for publishers and ad networks to serve AMP ads.

We’ve launched support for dynamic call tracking, which is typically used in ad landing pages for identifying ad attribution.

In the next quarter, we’re working on performance improvements to non-AMP ads being served to AMP pages. In addition, we’ll also be working on serving AMP ads to non-AMP pages.

 

Analytics

We expanded support for variable substitutions, notably Client ID, to links and forms. The former can be used to manage user state involving multi-page sessions. The latter is useful to build add-to-cart flows for e-commerce.

We also completed a migration to Intersection Observer to support visibility features. You’ll hopefully notice no changes as a result of this migration. It does, however, shift AMP analytics toward a highly respected approach for measuring element viewability. We also introduced a new trigger, “ini-load”, which is triggered when the initial contents of an AMP element or an AMP document have been loaded. In contrast to the document-level “visible” trigger that has long been available, “ini-load” used at the document level will not fire until all of the content elements visible in the viewport are also loaded. This is helpful to support AMP Ad–related features and offers a different way to measure engagement based on actual content visibility.

Finally, we’ve started a project that will enable extensions to take advantage of amp-analytics to report data to extension authors so that extension authors have greater visibility into how their extensions are performing.

* * *

Thanks to the AMP development community for your work and feedback. As always, please let us know if you have any issues or feature requests.

Posted by Rudy Galfi, Product Manager, AMP Project

AMP Roadmap update to close out Q1

Learn the AMP basics in your language!

To celebrate the new AMP Project YouTube channel and follow up on AMP Conf, we’re rolling out a fresh series of Local Language AMP office hours.

Sessions will include beginner introductions to AMP for a non-technical audience in Italian, French, German, Spanish, Indonesian, Korean, Japanese and English. Native language speaking AMP experts will be on hand to answer your questions as we run through the basics.

Add your questions to the comments on the event pages below, and we will answer them during the office hours. You can also watch the hangouts on demand, on the AMP YouTube page after the event.

Check out the lineup below and join the discussion.

  • Italian
  • French
  • Japanese
    • Introduction to AMP – Mar. 21 @ 0930 JST with Sachiyo Sugimoto and Miki Toda, Google Technology Managers
  • German
  • Spanish
  • Korean
  • Indonesian
  • English

Learn more about AMP by checking out recent talks from AMP Conf.  The Keynote and What’s next in AMP in particular cover The AMP Project’s recent progress and plans for the future.

Posted by Tomo Taylor, AMP Community Manager

Learn the AMP basics in your language!

AMP grows its footprint

The AMP family is set to grow its international footprint with news today that the biggest search engines in Asia Pacific will start to distribute AMP pages to a new audience of more than 1 billion people.  

Baidu and Sogou, which account for around 90% of the search market in China, made the announcement on the opening day of the first AMP developer conference which is taking place in New York. They were joined by Yahoo Japan which said it will connect to AMP pages from their Search results, bringing all the goodness of AMP to their 58m daily users in Japan.

The addition of these key distribution platforms represents a major step for the open source project which launched in October 2015 alongside a handful of publishers and technology companies all united by a common cause:  make the mobile web work better for everyone.

Baidu, Sogou and Yahoo Japan join a growing roster of companies already supporting AMP from Bing to Pinterest and from Google to LinkedIn, which said it sees a 10% increase in time spent in an AMP article vs non-AMP, the most critical metric for their news feed.  The expansion underlines the value of AMP for publishers and websites who don’t have to customize anything for each of these platforms –  develop AMP pages once and they just work on all supported platforms.

Of course it’s never been easier to build AMP pages with all the major CMS systems actively supporting AMP.  Over the next two days we will hear from some technology integrators — companies like Relay Media and Postlight — which help build solutions from scratch and even convert existing web archives in a matter of days or weeks.

This whole ecosystem makes developing and publishing AMP pages easy and accessible to smaller publishers and websites that may not have the necessary in-house technology resources readily available.  Take Tumblr, which has already turned on AMP on for a number of sites but is planning to ramp things up for all their 300m+ blogs over the coming weeks.  

While we continue to see many news publishers building new AMP pages, we also see increased adoption from e-commerce, travel, recipes and other diverse websites around the world, with new ones joining every day.  eBay was one of the first eCommerce companies to launch AMP in production and will tell developers at the conference why they bet on AMP as well as share some tips and tricks and new metrics along the way.  Likewise, one of India’s biggest retailers SnapDeal has gone all-in on AMP, and is seeing a 52% improvement in average daily orders

AMP also offers a number of monetization options for publishers and websites, from native advertising, to analytics tracking and even the latest launch from Cloudflare of an AMP ad verification and optimization service.

Additionally we are applying the AMP framework to ads to make them faster, lighter and more secure.  With AMP Ads, native ad exchange Triplelift – one of the newest members of the AMP family — delivered ads that are 3x lighter and load 6x faster than their traditional counterparts. The ads also saw a strong uplift in viewability and corresponding improvements of 13%  in CTRs and eCPMs. You can see more case studies here.

At the heart of this first AMP conference is community.  We had almost 10,000 engaged developers on Github, hundreds of people reporting bugs and 300 code contributors from many companies.  Everyone has played a part in making AMP better, underlining that it is by working together that we can succeed in making the mobile web live up to its full potential.

We hope this event is the first of many.  But don’t worry if you can’t make it in person because you can follow along on a live stream here

Posted by David Besbris, VP Google Search, AMP Project Lead at Google

AMP grows its footprint