AMP Conf 2019. April 17/18. Tokyo.
AMP

AMP Conf 2019: Successful web experiences for everyone

AMP Conf

Konnichiwa from Tokyo and our third annual AMP Conf! More than 500 developers are joining us over the next 2 days to hear from 50 speakers about how they’ve used AMP, what they’ve learned, and what’s coming next. With over 850 code contributors to the project and billions of AMP websites, the AMP team is more motivated than ever to build towards our vision of a strong user-first open web forever. And with a new governance model announced last year, leading voices across the web will ensure the project aims to meet the needs of both developers and users.

See all the announcements in the AMP Conf Keynote

AMP means great user experiences on the web

What’s in a name? When AMP started more than 3 years ago, Accelerated Mobile Pages fit pretty well. But AMP isn’t just accelerating webpage experiences anymore – it’s drives an overall superior user experience across the web. And mobile phones are just one of a myriad of supported devices AMP runs on, including desktop and tablets. Plus with immersive stories, dynamic emails, and better ads we are well beyond our original pages name.

Moving forward, The AMP Project will just be known as AMP – no acronym necessary, just a word that signifies speed and a great user experience across the web. You’ll see this reflected in our newly launched home for all things AMP, amp.dev, where you’ll learn all there is to know about the types of experiences developers are using AMP to build.

The new home for all things AMP: amp.dev

With documentation sections for websites, stories, emails and ads, developers can find what they need quickly. And we’ve strengthened the site’s resources as well, both importing the templates and examples that previously lived on ampbyexample.com and ampstart.com, and providing new assets like a use cases section with downloadable demos showcasing what’s possible with AMP.

Making AMP more capable

At its core, the web is comprised of 3 main elements: HTML, CSS and JavaScript. Since AMPs creation, developing with AMP only gave you access to HTML and CSS to ensure pages remained performant and secure. That’s changing now due to a technology called WorkerDOM, which brings full JavaScript integration to AMP.  The new amp-script component gives you the ability to run JavaScript from within an AMP document, all while ensuring that the experience remains safe and fast.

But JavaScript is now used in more ways than the client: One of the most popular ways to create AMP pages is through React server-side rendering. To support this use-case, we’re thrilled to share that Next.js, one of the most popular frameworks for React, is gaining first-class support for AMP. In fact nextjs.org is built entirely with AMP!

Additionally, AMP is now taking advantage of another web technology called web packaging that allows publishers to get the instant loading of AMP from their own domain. We’ve heard the feedback that AMP URLs from Google Search can be confusing or problematic, and last year began working on using signed exchanges to address this issue. We’re now excited to announce that Signed Exchange support is launching in Google Search, available to all users of browsers that support the new technology (currently Chromium-based browsers) and all websites that serve signed exchanges. This means you can now get instant loading for AMP on your own domain! See more details in this Google Webmaster Blog post or visit Cloudflare who recently announced that they are offering signed exchanges to all of its customers free of charge via a new product called AMP Real URL.

AMP as a Service

One of the differentiating features of AMP is that every day hundreds of open source contributors and dozens of full time engineers are working on making AMP better. In fact, because the AMP team and the open source community are constantly working on improvements that are shipped to all AMP pages via a CDN multiple times a month, you can think of “AMP as a Service”, modeled after the concept of software as a service.

This includes ways in which AMP is always improving your site directly with elements like image lightbox with swipe dismissal as default for many images, as well as a blurry image placeholder as an upgraded experience for images that take longer to load. Additionally AMP provides best-in-class and easy-to-integrate features like input masking, video docking or infinite scrolling for lists. And finally, we’re introducing a one-line ServiceWorker, an auto-configuring ServiceWorker that turns any AMP page into a PWA. It is preconfigured for AMP, so that it does all the right things for network resilience and improved speed out of the box, and like everything in AMP will become better over time.

Blurry image placeholder example

Driving ROI with Speed

We realize AMP’s vision is rooted in supporting the long term success of publishers and advertisers across the web. To this end we’ve seen strong recent success with AMPHTML ads, ads that are built with the underlying technology used on AMP pages. In particular, So-net, a Japanese DSP, has seen huge decreases in Ad Load time which resulted in major ad metrics improvements, such as a 34% CTR improvement. And leading Spanish newspaper EL PAÍS in partnership with Volkswagen ran an experiment combining AMP pages, AMPHTML ads and AMP landing pages, resulting in a sizable 76% conversion uplift. In other words, when AMP ensured the user-experience was great, each acquisition was 43% cheaper!

Online merchants are critical to the health and success of the web. Shopify, a platform that powers over 800,000 online businesses, supports AMP with their apps platform. Six of these apps, installed by more than 20.000 stores to date, provide great AMP versions of the Shopify storefront. Check out the full review of these Shopify apps in a recent blogpost.

Stories

We announced a developer preview for AMP Stories at last year’s AMP Conf. Stories are a new medium that was truly born on mobile, allowing users to have a visual content experience that feels native to their phone. And while many users experience story content within apps, we’ve spent much of the last year building out the capabilities of the AMP Stories format to take advantage of what is unique about a story product for the open web.  With AMP stories, publishers own their content, completely control the monetization, and design and distribute the content exactly as they like. Over the last year, we’ve seen many publishers create engaging content in the format. This week Washington Post contributor Lorenzo Tugnoli was awarded the Pulitzer Prize for Feature Photography for his rich and riveting photographs capturing the human toll of war in Yemen, which appeared in the paper as an AMP Story. The AMP Story presentation was so visually striking that it was submitted to the Pulitzer committee as the official document showcasing the photographs.

Over the past year, we’ve added many new features like page attachments, sidebars, and more robust support for a desktop experience. And story ads, with upcoming programmatic support as well as support for affiliate links provide greater monetization flexibility.

Sidebar menu in AMP stories


We also recognize that most creators of AMP Stories will prefer to use tools to create their stories rather than hand code them. We’re excited by the set of robust tools that are emerging. This includes MakeStories, an end-to-end WYSIWYG editor for making stories, that is now live to everyone at makestories.io for free this week. Additionally Unfold, one of the top story creation tools with 17M downloads is integrating AMP Stories support as part of a new premium version of their product that will launch in June. And a new AMP plugin for WordPress is launching today in beta with a built-in WYSIWYG editor for AMP Stories. In the near future the stable version will enable all users of the AMP plugin to create their own stories with no additional plugin installation.

Ensuring great stories are visible and accessible is also a high priority for platforms like Google, which announced today that it is creating a dedicated block for Visual Stories on search result pages. Google is starting with story content in the travel space and plans to launch additional blocks for gaming, movies, TV, fashion, and more.

AMP story travel block on Google Search

Emails

Finally, we announced AMP for email at AMP Conf last year to bring the power of interactivity to email, and the format is now live and ready for business. AMP for email enables email senders to create dynamic, interactive content within an email, opening up a new world of possibilities without a user needing to leave their inbox. Dynamic mail was made available to Gmail and G Suite users recently, and we are excited to share that Mail.ru is exiting their beta and launching to all users this week. In addition, the AMP for email spec has engagement from other major email providers around the world including Yahoo Mail and Outlook.com.  As each of these providers launches support, senders will scale the reach of their AMP emails to users.  And early adopters of AMP for email like OYO, India’s largest hospitality company, saw a 60% conversion lift for visitors coming via AMP emails since launch.

Onwards!

AMP has evolved well beyond its first step to help publishers speed up their content sites. With major improvements to make the library capable across websites, stories, ads and emails, AMP aims to empower developers to create great experiences across the web. The AMP team is as excited as we were on day one and remain committed to working towards our vision of a user-first open web forever.

Posted by Malte Ubl, Technical Steering Committee, AMP

Shopify Apps make AMP easy and effective for eCommerce

Ecommerce

Online retailers are always looking for ways to exceed their customers’ expectations. With most online shopping now happening on mobile devices, it’s important for merchants to deliver fast, engaging experiences optimized for mobile. Because AMP guarantees consistently fast webpages, it’s becoming an increasingly popular framework for eCommerce.

Shopify Apps add functionality or features to Shopify stores, like plugins or extensions do to other platforms. Apps built to support AMP provide an easy way to launch a lightning fast, mobile optimized AMP version of a store that users love.

The best AMP Apps for Shopify are able to easily create many page types, including product, collection, home, and blog pages. They’re free or low cost, and come with reliable support. Some integrate with third party apps, meaning AMP versions of stores will not lose critical functionality such as product reviews. These Apps generate pages can be cached and served nearly instantly when accessed through Google Search.

The most popular AMP Apps have been installed thousands of times and have received 5 stars in 87% of user reviews. AMP by Shop Sheriff has great user reviews, and has been able to grow quickly because of their focus on user experience. “Merchants using our app, as well as their customers who get to experience the AMP pages, all love the experience,” said Shop Sheriff founder Stephen Gardner. “We’re extremely proud to have 98% 5-star reviews, and maintain a 5.0 average star rating on Shopify.”  

Out-of-the-box, top Shopify AMP apps provide beautiful eCommerce templates for product, category, home, blog pages, and more, which merchants can further customize. Above is a GIF of a user seamlessly customizing their AMP pages using the AMP App by AMPify Me.

Testing the AMP versions of these stores using PageSpeed Insights show industry-leading performance scores over 90, with pages being fully interactive in just seconds. Data show that users are more likely to bounce from a page that takes longer to load, and users view more pages on fast loading websites, leading to more engagement and higher conversion rates.

For the app creators, it’s all about using technology to improve retail experiences online. “We’re committed to building technology that makes it easy for retailers to succeed online,” said Jana Filipovic from AMPify Me, a leading AMP App. “Our customers, and even users of our free products, are able to drive increased engagement and conversion rates using AMP.” Their focus on great product and user experiences have enabled AMP by AMPifyMe to grow very quickly. Over 13,000 stores have installed their App since launch in May 2018!

Shopify noted in a recent blog post that AMP by Shop Sheriff and AMPifyMe were leaders in the category of successful apps that improve mobile performance. “By helping merchants take advantage of this mobile-first opportunity, these apps were able to find success on our app store.”

Top Shopify AMP apps have a WYSIWYG editor that enables merchants to customize the look and feel of AMP pages to deliver feature rich, lightning fast user experiences. Above is the editor from Shop Sheriff.

Google recently conducted a detailed review of the most popular AMP Apps for Shopify, analyzing the apps across 5 critical characteristics. If you’re a Shopify client considering AMP, consider these when choosing a provider:

  1. Price & Support – How much will the app cost at the service level that’s appropriate for you, and will you get quality support for that investment?
  2. Ease of Use – How much work is required to set up the AMP version of your shop? How intuitive is the app’s user interface?
  3. Quality of AMP pages – How good is the user experience on the AMP version of your shop?
  4. Integration with Google tools – How easy will it be to ensure the AMP versions of your pages are cached by Google and any issues are surfaced?
  5. Third party integrations – Which of your other apps can be integrated out-of-the-box? Which can be integrated with a little more work?

Apps provide an easy path for merchants to adopt AMP on Shopify, creating a lightning fast, mobile optimized version of their pages that can help meet users’ rising expectations. Check out our review on amp.dev to see which AMP App might be best for your Shopify store.

Posted by Chris Sater, Web Product Partnerships, Google

AMP on the Times of India

WordPress

Editor’s Note: The below post was originally posted on the AMP WordPress Plugin site by the Times of India.

Site performance and user experience matter to the Times of India, and therefore we keep tabs on new solutions and advanced technologies that allow us to make our website faster, more engaging, and more user-friendly. This is why we decided to evaluate the official AMP plugin for WordPress to leverage the performance and usability advantages that AMP enables. Our goal was to evaluate the plugin on some sections of our web presence, and then scaling it across other Times of India sites.

We started this project with Timesofindia.indiatimes.com/blogs.  At the beginning of the evaluation we faced some expected challenges having to do with the need to make changes to the site to align it with AMP principles, such as CSS size constraints and the removal of 3P JS.  Some of the aspects that were tackled included the refactoring of certain components and widgets, such as the Social Share widget to implement them using AMP components,  replacing pop-ups with the AMP-lightbox component, implement tab panels using the amp-selector component, and other similar changes required to make the site compatible with AMP.  One important change was the replacement of all the Google Ad Manager/CTN ads on the site with AMP ads.

During the implementation process we took advantage of the available documentation on both AMP in general, and the AMP plugin in particular, and we interacted with AMP team to get their support in answering our questions and guiding us towards fixing all of the issues we encountered. Although the entire evaluation process took about two months, the actual implementation effort took us only about two weeks. And we are happy to report that the results were fantastic!

We are currently using version 1.0.2 of the official AMP plugin 1.0.2, since this and later versions allow us to make our entire site fully AMP compatible (i.e. AMP First). The impact on key metrics we are seeing after rolling out the new implementation was quite amazing:  a 59% improvement in page load time (11.40 secs before vs. 4.35 secs after), and early measurement data indicates the number of page views  increased by 4% . We expect this to go substantially higher as we continue to improve the experience.

The technical investment we made for evaluating a fine-tuned AMP implementation of our site setup was well worth it as it has made our pages much more user-friendly and faster. Furthermore, we are planning to scale it up across other websites in Times Internet wherever it is applicable.

Although making our site AMP compatible was a learning experience for us, the end results are rewarding and impressive, enabling a reduction in load time from 11.4 secs to 4.35 secs.

Puneet Walia: Technology head – TOI, GadgetsNow, eTimes & Mirror

Quick, Easy & Fast: 
Launching our first fully AMP WordPress site has yielded excellent results not only in terms of performance but also on ranking and revenue; we observed a spike in revenue traffic of about 4% during the first week.

Rudra Kasturi: Vice President, Organic Growth Head for Times Group Sites

AMPproject.org moves to amp.dev!

website

It’s been over 2 years since the current version of ampproject.org launched, just before the very first AMP Conf in early 2017. Since then the AMP Project has grown a lot and launched entirely new applications of AMP on the web like emails and stories. Additionally AMP resources were scattered across multiple websites like ampbyexample.com and ampstart.com. So we decided to bring everything together into something new, better organized and easier to use.

To bring all of AMP under a new home, we’re thrilled to announce amp.dev! The all new amp.dev will replace ampproject.org in order to provide developers (and their business counterparts) everything they need to know about AMP across all its various forms. And of course, it’s built entirely with AMP, using AMP optimizer to make the site load even faster when not served from a cache.

The all new amp.dev homepage

On amp.dev you’ll find information for all the applications of AMP- sorted by color across websites, stories, ads and email. Overall the documentation section was designed to make navigation as straightforward as possible. Guides and tutorials are sectioned by stages in the AMP developer workflow. This will give you the resources and confidence to build successful AMP sites at each step in your process!

Documentation across websites, stories, ads and emails

All of the existing ampbyexample.com resources, as well as the templates on ampstart.com have been migrated and integrated into various sections of amp.dev. We also have new sections like Use Cases, where you can find a gallery of different possibilities of creating with AMP. While this section only as a few items at the moment, it will continue to grow in the coming months.

The Use Cases section of amp.dev

For a brief time we’ll be leaving AMPproject.org up to allow for a smooth transition to the new site. However, in the near future we’ll be setting up redirects as we begin to turn down AMPproject.org. For now, we have banners on each site to indicate the upcoming change. The blog (what you’re reading now) has already moved to blog.amp.dev.

Finally, just as the AMP Project is a community effort, we invite you to share your feedback on the site so we can make it the best it can be. We’ve created a feedback form linked from the bottom banner of every page so we can ensure to get your thoughts and issues if something needs fixing. As with before, amp.dev is maintained on the docs repo of the AMP Project on Github, so everything is publicly viewable. You’re able to file Github issues there as well.

A big thanks to our friends at Jung von Matt TECH who have been working on this for many months. We’re excited to continue to evolve amp.dev alongside the AMP Project and to show you bits of how we did it at AMP Conf in Tokyo next month.

Posted by the core maintainers of amp.dev: Paul Bakaus, Sebastian Benz, Crystal Lambert, Matt Ludwig

Guest Post: AMP Email

Email

Editor’s note: The below was originally posted on gregable.com by Greg Grothaus, Software Engineer, Google

Google just officially launched AMP Email, with support from other webmail providers. I work for Google on AMP and worked on some aspects of this project. I thought I’d add my own thoughts on the announcement. My opinions are my own and not those of my employer.

The press has focused on the user experiences in AMP Email. This makes total sense, given the audience. My take, however, is that the more interesting development is the step towards standardizing of HTML Email. Let me explain.

Let’s take a step back and consider non-amp HTML email. The basic idea is that the sender provides two variants of each email using MIME type encoding. Here’s a simplified example:

From: "Senders Name" <sender@gregable.com>
To: "Recipient Name" <recipient@gregable.com>
Content-Type: multipart/alternative; boundary="bdac7942f697eecfbdac7942f697eecf"

--bdac7942f697eecfbdac7942f697eecf
Content-type: text/plain;

Some text content.

--bdac7942f697eecfbdac7942f697eecf
Content-type: text/html;


Some bolded html content.




--bdac7942f697eecfbdac7942f697eecf

An email client is free to choose which of these 2 alternatives to display and more importantly how to render the bytes.

An email client is not itself a web browser, even if it runs within one. Allowing arbitrary HTML email to run with the full API of a web browser simply fails. The first thing most marketers would do is add a redirect to their own site the moment the email loads.

Simply mitigating redirects and similar is insufficient. The privacy of the user reading the email must be protected. In the case of Gmail and many other webmail clients, the client actively prevents the sender from learning the user’s IP or browser fingerprint. This is fundamentally different from how web browsing works, so browsers fail to provide protection. When browsing, your browser sends your IP address, browser name, and capabilities along to every page that you visit.

A webmail client must then contort it’s presentation of HTML, a language not designed with email in mind. Webmail clients only have two ways of doing so:

  1. Show only the text version of an email.
  2. Modify the HTML before delivery such that the resulting document is safe.

Webmail clients do both. In some cases, the client falls back to text. In most cases, it modifies the HTML.

This is typically called “HTML sanitization”. For some examples:

  • <script> tags removed completely.
  • Image URLs are rewritten to load the images from the webmail provider.
  • Some or all CSS is removed completely.

In many cases, the HTML gets horribly mangled and then shown to the user completely broken, but at least it does not violate the user’s privacy expectations.

A sender must ensure that the email sent will not arrive completely broken.

Each webmail provider sanitizes HTML emails slightly differently. In some cases, not so slightly. The rules for the sanitization are necessarily complex, as HTML is complex. As a result, the documentation describing these rules is often poor or even missing. It’s almost never the case that two email providers will treat the same email the same way.

Some references to support my point:

Webmail Rendering Explained: Why Preprocessors are the enemy:

“Most preprocessors err on the side of being overly restrictive and remove anything with even the slightest potential to affect the layout of their email client.”

Developing HTML Emails for Gmail: 12 Things You Must Know:

“Many email developers know how tricky it is to develop HTML emails for Gmail – it’s one of the more temperamental clients out there (although it’s no Outlook).”

Mailchimp: Testing Emails:

“If you’re a web designer, you’re probably used to testing web pages in a few different browsers, like Internet Explorer, Mozilla Firefox, and Safari. And you’re probably familiar with a few annoying inconsistencies between all the browsers, and you have a couple hacks to make things look right. For email design, multiply all that by ten. There are tons of email applications out there that you need to test on, and they all render HTML email in their own annoying ways.”

See Mailchimp’s Email Client CSS support matrix to get an idea of the mess you can expect if you want to write an HTML email.

Beyond documentation, none of the major webmail companies provide testing tools. This has resulted in a small industry of services that exist simply to help you test whether or not an HTML email will render correctly.  Try this query to get an idea: [html email testing tool]. These services work by maintaining accounts on major mail providers, automating test emails, reverse engineering the sanitization layers, and staying on top of changes.

AMP improves on some of these problems.

With AMP Email, there is a specification for an email sender to develop against. That specification is complicated and evolving, like the others. The documentation is incomplete, like the others.

What’s different about the AMP Email spec?

There is a single specification which multiple webmail companies are implementing. The announcement lists Gmail, Yahoo Mail, Outlook.com, and Mail.Ru. The list is incomplete, but is a solid start.

Open source tooling can validate an AMP Email. Developers get detailed error codes including line numbers and documentation links. The tooling can be run locally as an NPM library or online:

A screenshot of the AMP Validator showing an example AMP Email error.

If a developer meets the specification, the promise is that the email will be correctly rendered in every supporting html mail client using every modern browser. The spec and the web mail implementations continue to guarantee the privacy of the user reading the email.

That’s the punchline as I see it: AMP Email is a consistent format that “just works” for developers trying to send HTML email.

There are a few other concerns that have been raised, but I feel some of them are uninformed, while others may be valid:

This is a proprietary format

The specification is open-source and is just a subset of HTML, but it is managed by the governance of the AMP Project. Also note that in effect HTML Email is a set of proprietary formats. No web mail provider supports arbitrary HTML.

Email should be plain text

Perhaps. There is certainly an argument to be made here. I personally suspect that users may be making the wrong dichotomy here: not that HTML email is bad, but junk email is bad and junk email tends to use HTML formatting.

Furthermore, AMP HTML Email does not change the story. No mail provider that currently does not support HTML email also does support AMP HTML email.

HTML email usage seems to be increasing. Simply bolding text or adding an image to an email makes it HTML email, which can be a better experience for most users.

AMP HTML Email still includes a text fallback mime type for users who prefer it.

Yet another format

The concern here is that since not all email clients support AMP HTML email, this effectively added 1 new mime format in each email, rather than simplified anything. This is a valid concern. However, any proposal that requires all email providers to make a simultaneous change is doomed to fail. In the long run, hopefully this simplifies and improves the state of email.

Posted by by Greg Grothaus, Software Engineer, Google

App like animation experiences in AMP

UI

The AMP UI Working Group is responsible for AMP’s visual components & interactions and AMP’s overall accessibility and experience. This means we often work on visual polish for existing components in an effort to improve a website user’s experience. As a result, existing AMP pages on the web automatically get the improved user experience with zero effort on the side of the engineering teams that deployed them. Sepand Parhami, an engineer on the core AMP team, recently worked on creating more like app animation experiences for <amp-lightbox-gallery>, showing this idea in action.

App like swipe to dismiss in <amp-lightbox-gallery>

When dismissing an image while exiting lightbox mode, the transition back to the inline image is sudden as you can see below:

Inspired by apps such as Google Photos and Apple News, Sepand worked on making this interaction more intuitive and delightful for users. While transitioning out of lightbox mode, we wanted the user to:

  • Know when they have crossed the threshold of interaction after which they are dismissing the lightboxed image.
  • Identify the position of the image inlined into the original page they were viewing.

This information is provided by the size of the image and the lightbox background changing as the image moves from lightboxed state to it’s inline position. You can see the improved experience below:

Improved transitions for entering and exiting lightbox states

Another bit of visual polish we’ve added to <amp-lightbox-gallery> is the improved transitions for all images going to and from lightbox mode. Often the inline image is cropped or scaled to focus on the important part of the image, while the lightbox view shows the entire image. This has been a hard problem to solve, as it involves interpolating between two images of different positions and sizes.

As you can see above the inlined assets are cropped to focus on the important aspects of the image worth calling out in the article. However, you can see the full image when it is in lightbox mode. You can play with this demo here.

Creating a new animation library

To create the experiences stated above Sepand open sourced an animation library which helps you transform an image from one position/size to another. In addition to scaling up, this also supports changing the ‘crop’ of the image as defined by the object-fit CSS property. He shares his learnings in creating this library here. The blog post highlights the difficulties he came across while generating keyframes, catering for CSS properties like object-fit and object-position and testing his code.

Check out the library (code, documentation, demos) to see how to deploy the library on your own page. It is also available via npm.

Continued adoption of best-practices

To ensure we are providing site users a great experience by default, the AMP team has also been ramping up another experiment that automatically lightboxes <amp-img>s on a page that meet a certain criteria. The criteria includes factors like image size and whether or not it has an action associated with it or it’s ancestors. This allows end users to better explore the images on a page without developer teams having to make extensive changes to their codebase.

Improvements like the ones highlighted above are great examples of how engineering teams who use AMP get the benefits of all of the lessons learned by other teams that contribute to the AMP Project (e.g. Google, Pinterest and AliExpress). As the AMP Project finds incremental ways of improving the end-user experience through research and experimentation, we can upgrade extensions to provide improvements to end users without the involvement of the engineers working on deploying AMP sites.

Posted by Naina Raisinghani, Product Manager, AMP Project at Google

Building the future of email with AMP

Email

The AMP Project’s mission is to enable more user-first experiences on the web, including web-based technology like email. For most of us, not much has changed in email functionality since the first time we were introduced to email. Because AMP is inherently fast and secure, we brought AMP technology to email in order to give users an interactive, real-time experience that also keeps inboxes safe.

AMP now enables all-new email experiences like being able to submit RSVPs to events, fill out questionnaires, browse catalogs, or respond to comments right within the email. Emails can also stay up to date, displaying the freshest content from comment threads or the latest recommendations.


Dynamic email built using AMP by Ecwid

Bringing AMP emails to major email providers

The AMP for email spec has engagement from major email providers around the world including Gmail, Yahoo Mail, Outlook.com, and Mail.Ru. As each of these providers launches support, senders will scale the reach of their AMP emails to users.

After a developer preview with top email senders, Gmail is launching general availability of AMP for Email today. You can head to the Gmail blog to see some illustrative examples of the email recipient experience. You can also check out these provider specific pages for additional information:

We aim to provide the highest quality email experiences for our consumers and we are excited to be one of the first providers to participate in the AMP for email spec. This allows us to enable fast, responsive, and high-performing experiences right within email.

Marcel Becker, Director Product Management for Yahoo Mail

If you develop an email provider and would like to consider adding AMP for email support, you can find more information here.

Start creating AMP emails today

Email senders can begin creating AMP emails by using the playground which allows you to edit markup and see real-time changes to your email. For more information about the supported features and syntax, head over to amp.dev. It’s important to note that some providers may have sender whitelists that limit who is eligible to send AMP emails, so be sure to register with providers if that’s the case.

If you rely on a third party for your emails, please ensure they have AMP support. The following email products already support the AMP spec or in the process of launching support soon:

  • SparkPost, an email delivery and analytics platform
  • Litmus, an email design and marketing tools suite
  • Twilio SendGrid, an email platform for transactional and marketing emails that is used by over 80,000 companies.
  • Amazon SES and Amazon Pinpoint, cloud-based email sending and analytics services for transactional and marketing emails
  • More are in progress, so contact your email service providers to find out if they support AMP email

AMP emails are designed to be compatible in the current email ecosystem with the introduction of a new MIME part. This design allows emails to fall back to HTML if a provider or email client doesn’t support AMP emails yet—learn more about the spec and recommended guidelines.

New AMP email working group

To make AMP the best user-friendly email experience, we need your help to contribute to its direction. This is why we created the AMP for email working group under AMP’s governance model, a way to channel feedback from senders and providers to support ongoing spec improvements.

The two goals of this group are to:

  1. Increase email provider knowledge sharing to promote higher cross-provider compatibility of sender emails
  2. Channel community feedback to senders and providers to support ongoing innovation of the spec

If you are an email provider, sender or would simply like to get involved in the AMP for Email working group, you can file discussion issues on the ampproject/wg-amp4email repository or come chat with us at #wg-amp4email on Slack.

With the email spec being open source, strong multi-vendor support, a gradual migration strategy, and an open working group to have everyone’s voice heard, we’re looking forward to building a better email experience for everyone.

We look forward to your involvement!

Posted by Vamsee Jasti, Product Manager, AMP Project


Encouraging More Voices in AMP

Governance

Last year we implemented changes in AMP’s governance model to encourage a wider variety of voices in the AMP community and to make it more clear how people can have a voice.  I’m happy to provide some updates on our progress towards these goals.

AMP’s Technical Steering Committee and Advisory Committee have started meeting

As part of AMP’s new governance model the Technical Steering Committee (TSC) sets AMP’s product and technical direction and the Advisory Committee (AC) provides advice to the TSC.  With these two groups we have representatives from nearly 20 companies & open web advocates helping to guide the AMP community towards our vision of “a strong, user-first open web forever.”

The TSC has now had several meetings, covering a range of topics from GitHub repository best practices to what AMP’s first set of Working Groups should be.  The AC also had their first meeting where they kicked off a conversation regarding horizontal reviews, a topic on which the TSC has asked for input.

If you have something you’d like to raise with one of these committees, you’ll find out how to do this in their “working mode” documents (TSCAC).

Working Groups are ready for you to get involved

One of the TSC’s first acts was to establish the initial set of AMP Working Groups (WGs).

Working Groups are where the day-to-day work in AMP gets done.  A Working Group is responsible for a certain part of AMP, such as the Stories WG, which is responsible for AMP’s story format.

The Working Groups are intended to make it easier for people to keep track of different parts of AMP and to get involved.  To help with this, each Working Group has a GitHub repository that documents how to get updates on the Working Group’s work and how to get involved–from participating in discussions on issues and Slack to contributing bug fixes, features or other improvements.

I encourage you to find the Working Groups responsible for the areas you’re passionate about and to get involved!

We’ve made our process for making changes to AMP more clear

Although we’ve always said we strongly encourage contributions to AMP, we’ve heard it can be challenging to figure out the process for proposing and making changes and even to know where to get help.

Due to this feedback we’ve been working to improve and clarify the process for making changes in AMP, inspired by Chromium’s process for launching features.

Some of the highlights of these updates:

  • We’ve made it more clear that small changes are easy to make without a lot of process overhead.
  • We’ve added a slightly more formal launch process for significant changes, including the use of Intent-to-implement (I2I) and Intent-to-ship (I2S) issues and a more well-defined way of getting approval for making significant changes.
  • We’ve made it easier to find a reviewer who can help you through the process of getting your change built and launched.

With AMP’s new governance model and contribution process updates in place we hope it’s easier than ever for you to stay up-to-date on what’s happening in AMP and to get involved! 

Posted by Joey Rozier, AMP Engineering Manager at Google

What’s new in AMP, Q1 2019: Improvements to consent, videos, forms and lists

Roadmap

Video improvements

We have all experienced a situation where we want to watch a video and the related notes simultaneously. Good examples are a video of a recipe along with the instructions, or a video along with its transcript. The dock attribute on <amp-video> now supports minimizing the video to the corner of the viewport when the user scrolls. Developers can also customize where and how the video docks.

We also launched <amp-video-iframe>, which allows developers to include a custom-built video player that will obtain all the features available in the AMP Video Interface (e.g. autoplay, dock, etc.)

Tasty.co uses <amp-video-iframe> for their video recipes. Their custom player loops the video between a predefined start and end time. This allows them to use one video for different recipes by only seeking to the relevant segment of the video in each recipe.

Increased engagement and better resize with <amp-list>

<amp-list> now also allows developers to specify when they want the container to resize on user interaction, for e.g, when the <amp-list> contains an <amp-accordion> that a user taps on.

Additionally, we are experimentally adding infinite scroll capabilities to the component, so when the user reaches the end of a list of items (search results, product cards, etc), the list is populated with more items. A huge shout out to Chris Papazian from the Pinterest team for kicking this off. The AMP UI Working Group picked this up from Chris’ initial work and is excited to see this feature enabled in AMP to help publishers’ increase engagement!

Input masking in forms

To help make the task of filling in forms a bit easier, we’ve enabled input masking. This allows developers to add formatting like spaces and interstitial characters, which helps users fill out forms more efficiently. Dates, payment details and phone numbers are all great examples of inputs that could benefit from input masking.

Better transitions in <amp-lightbox-gallery>

The AMP UI Working Group has also been working on polishing already launched components to create a more delightful experience for end users. One such example is improved transitions for all images going to and from lightbox mode. This has been a hard problem to solve, as it involves interpolating between two images of different positions and sizes. You can visit our open source animations project for more details. Stay tuned for a technical blogpost that shares more insights into this work.

<amp-consent> now supports 3rd party integrations

We launched <amp-consent> in AMP a few months ago to simplify how publishers could collect data collection user consent on AMP pages. A number of publishers rely on 3rd party consent management platforms (CMP) to integrate with their web pages to manage consent status across various vendors. AMP now allows CMPs to easily integrate with AMP. If you are a publisher, you can also inline the configuration allowing you to show your own consent UI inside AMP. If you are a CMP, you can find instructions to integrate here.

Enhancements to <amp-ima-video>

The <amp-ima-video> component provides an easy to monetize publisher video with video ads from any video ad network that supports the IMA SDK. Our big thanks to Rebecca Close, an engineer working at Buzzfeed, who contributed and tested the following updates to the AMP project:

The best of the rest

  • The <amp-date-display> component renders date information in various date formats and in different locales. A good use case for this is the news ecosystem, where users can see publishing dates for an article in their local time.
  • AMP Stories now support Real Time Config when used with the Google Ad Manager ad implementation, allowing you to enhance the ad request with additional targeting information.

Upcoming features worth a shout

Below are a few things the AMP team has been working on:

  • A dedicated component for typeahead autocomplete in AMP. If you have any thoughts please file feedback here.
  • A new carousel experience that we are looking to launch soon over the upcoming months.
  • An easy-to-deploy Service Worker library for AMP. You can learn more about it over in its GitHub repo.
  • A component that helps developers integrate reCaptcha v3 on AMP documents. For more details, see the GitHub issue.
  • We have made a number of updates to AMP Stories including support for links in the top 80%, a hamburger menu, hold to pause, a new desktop UI, and attachments. Stay tuned for a full post with updates soon.

* * *

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 Naina Raisinghani, Product Manager, AMP Project at Google

Using AMP to make display ads safer, faster and better for users

Ads

Editor’s note: The following post was originally published on the Google Ads Blog by Vamsee Jasti, AMP Product Manager at Google.

The performance benefits and security guarantees offered by AMPHTML ads, which are display ads created using the AMP framework, translate to better advertiser ROI, publisher revenue and overall better user experience. Because of this, Google has expanded serving AMPHTML ads not only to AMP pages, but also to regular web pages. As of January this year, 12% of all display ads served by Google are now AMPHTML ads.

All of the code in the AMP repository is open source which is carefully reviewed by the project maintainers before being merged. As a result, ads written in AMP start performant and stay performant. Such a process also drastically reduces the likelihood of AMPHTML ads having code that takes advantage of chipset level vulnerabilities or drain CPU by crypto-mining from users’ devices. 

Since AMPHTML ads can be trusted, they can be rendered into a more performant same-origin iframe. This performance boost results in the ad rendering faster on page which translates to higher publisher revenue and better advertiser ROI.

Experiment results from GPT.js rendering AMPHTML ads in a same-origin vs cross-origin iframe

AMPHTML ads on AMP pages deliver even better ROI

An AMPHTML ad delivered to an AMP page has better performance compared to the same ad running on a regular web page. This is due to the inherent design of AMPHTML ads outlined here, giving advertisers better click through rates and viewability.

AMP pages have seen steady growth over the past few years and advertisers now have access to well over 1 billion impressions/day worth of premium (from a user experience & ad experience standpoint) inventory. In addition, more than 35 percent of ads served to AMP pages are already AMPHTML ads.

Publishers and Advertisers seeing success with AMP pages and AMPHTML ads

The news publisher EL PAIS partnered with Volkswagen, one of their advertisers, to run a multivariate A/B test measuring how Volkswagen’s display ads created in AMPHTML vs HTML5 would perform on AMP vs regular pages.

Simply moving from a standard HTML page to an AMP page (with the same HTML5 ad) resulted in a 26 percent CTR increase. Moving further to an AMP page with AMPHTML ads resulted in an additional 48 percent CTR increase.

Increase in performance metrics when combining AMP pages with AMPHTML ads

You can read the full case study here.

Getting started with AMPHTML ads for advertisers

AMPHTML ads are a subset of the AMP spec and ships with many good-by-default ads UI components, an analytics measurement framework, a spam detection system, viewability measurement and other building blocks to create a good and measurable ad.

We encourage you to read more about the benefits of using AMPHTML ads, but if you want to jump ahead to start creating them, this is a good place to begin.

Once you have created the ad, you can choose one of the following options to serve AMPHTML ads: 

  1. Work with an Authorized Buyer that allows to target just AMP or regular inventory 
  2. Use Google Ads to target inventory in the Google Display Network
  3. Direct buy with publishers using Google Ad Manager
  4. [Coming Soon] Display & Video 360 support to deliver AMPHTML ads to AMP pages

Google continues to invest in delivering better user ad experiences by increasing the share of AMPHTML ads vs regular ads. Once mobile app support launches in Q2, 2019, advertisers can fully transition to creating a single AMPHTML ad and have it render across all environments and devices.

We hope you’ll take full advantage of the performance, security benefits and the increased ROI by choosing to build & serve AMPHTML ads in your next campaign.

Posted by Vamsee Jasti, AMP Product Manager at Google