April 5, 2020
AMP Stories: Visual Stories for the Web (Google I/O’19)

AMP Stories: Visual Stories for the Web (Google I/O’19)


[MUSIC PLAYING] WEI HONG: Thank you so much
for coming and watching our talk today. My name is Hong. I am an interaction designer
working on AMP stories. VINAY MAHAGAOKAR: And I’m Vinay
Mahagaokar, a product manager working on AMP stories. We are both incredibly
excited and grateful for the opportunity
to share with you all what we’ve been working on. Mobile phones have
emerged as one of the primary devices on
which we consume content, and stories have emerged as one
of the most delightful content types to consume on our phones. Certain demographics of users
consume primarily stories. Invented by Snapchat,
stories have found their way onto Instagram,
Facebook, and WhatsApp, just to name a few apps. Stories feel truly
native to your phone. Users love them, and
they are beautiful. You don’t have to
rotate your phone. You don’t have to scroll
through long pages of text. The interaction model
of tapping to navigate is simple and delightful. However, stories do not exist
at scale on the open web. They are not easily findable,
sharable, or linkable. This is where AMP
stories come in. We believe there is
distinct value in having stories live on the open web. First, you are in control. You own the content. You completely
control monetization. Second, stories have features. AMP stories have features
that are unique to the web. They can link to other
parts of your site, they can be discovered
by search engines, and they can be embedded
in any web page. Finally, AMP stories are
both fast and immersive. AMP Stories are
important because they enable you to offer
the delightful story experience on the web. In February 2018, we first
introduced AMP stories. Since then, we have
seen publishers produce beautiful content
about a wide array of topics. Today, we will talk about
the benefits of building AMP stories on the open web. First, we will talk about
where AMP stories appear on both Google
Search and Discover. We want you, as a
publisher of AMP stories, to be able to reach
a wide audience, and we want to improve
the user journeys on both Google
Search and Discover by displaying AMP stories. Second, we will go over
the many new capabilities that we’ve added to
AMP Stories to help you build beautiful content. Third, we will cover best
practices for creating high-quality AMP stories. Fourth, we will describe ways
that publishers can generate revenue and advertisers can
build and promote their brands by creating AMP stories. Finally, we’ll describe
a few different creation tools that enable you to build
AMP stories without having to write your HTML. Now, I’ll hand it
over to Hong, who will talk about where
stories appear on both Google Search and Discover. WEI HONG: Thanks, Vinay. So now, let’s all get excited
and start with AMP stories on Google services. So after you have created
all these beautiful AMP stories, the main question
you might have is, how can users easily
discover them? Well, as Vinay mentioned
before, the great things about AMP in general is
that your stories are just regular web pages, so
they can be accessible wherever– through
publisher sites, through social platforms,
and, of course, through search engines like Google. So AMP stories can show
up on Google Search today in web results and top stories. In order to make the whole
search experience more visual and interactive,
we’re working on a dedicated placement
for AMP stories on search for queries
in specific categories. So now, let’s use travel
as an example and all get on a visual search
journey together. I think May is a great
season to travel to Japan. So why don’t we imagine
ourselves searching for things to do in Tokyo? And here, you have the
search result page. You start scrolling and
exploring the cool content, and you find this beautiful
blog serving you cool travel visual stories. Tapping on any of this
cover would take you right into the story. So now, you’re able to enjoy
your reading experience by simply tapping
through the pages. And if you want to
browse something else, you can just simply
swipe to the next story. You will get this endless
discovery experience by continuously
swiping to the next. How amazing is this? I can’t wait to see this rolling
out in the next couple months. I see some of you guys already
tried to get this on your phone right now. Well, please stay tuned. It’s coming very soon. And the things to do in
Tokyo example we just saw is really just a teaser. There’s so many cool places
to visit around the world, and by adding this new
experience to Google Search, users will start getting
more and more engaging travel stories. We will start with
travel because we believe that looking at a rich
content experience like this can really help a
user get a better understanding of the
travel destinations, and the users can
engage more before they even physically get
to the destinations. And these travel visual stories
also tend to be evergreen, so they are still relevant
months after being published. And of course, story
format works really well with other content categories. After travel, we will experiment
with gaming, fashion, recipes, movies, TV shows, and even
more content categories. So beyond the regular
search experience, Google also offers you a
browse forward experience in the Discover feed for
all-time users that do not need to have a query in mind. A quick reminder on
what’s Discover– so Discover is a feature
within Google Search that helps users to stay up to date
with their all-time favorite topics without needing a query. Users get to their
Discover experience the Google App from the
Google.com mobile home page or by simply swipe right
from their home screen on Pixel phones. Discover has grown
significantly and now helps more than 800 million
monthly active users to get inspired and
explore great content. The exciting news is that
in the past six months, we have also been
featuring great AMP stories in the Discover feed. We served many
high-quality stories based on a diverse
range of topics, and we saw great
user engagement. We believe that
stories fit really well with the user
mindset in Discover, so we’re planning
on focus even more on this platform moving forward. So now, I’ll hand it
back to Vinay to walk you through the exciting AMP
story format updates. VINAY MAHAGAOKAR: Thanks, Hong. Let’s go over the
new capabilities that we’ve added to help
you build beautiful stories that users love. The first is localization. When AMP stories first
launched, it only supported English, which
was actually very limiting. Today, it supports
21 different locales. To use these new languages,
set the lang attribute to the corresponding
language and locale code on the HTML tag
of your AMP story. If your story should be
displayed in right-to-left format, you should add the
dir=”rtl” attribute as well. Let’s move on to desktop. The default
experience on desktop reuses the mobile design so
that publishers can simply create for mobile and have a
design that works everywhere. However, one of the major
benefits of AMP stories is that they live on the web,
and they reach a wide audience of users, many of whom are on
desktop and laptop computers. We realize that we can
build an amazing desktop experience by using
full-screen images and video. On a desktop computer, this
feels a lot more natural, and it brings the same
feeling of immersion that we see with AMP
stories on mobile phones. It does require you,
as the publisher, to do a little bit more work in
terms of getting the right art direction. However, if you have a
sizable desktop audience, the uplifting user experience
is worth the effort. This experience was
designed and developed in a collaboration with
“The Washington Post,” whose story you see here. They worked closely with us to
experiment with this experience and prove its effectiveness. Once we understood the value
that this brought to users, we productionized
it and shipped it as a core part of
the AMP Stories app. “The Washington
Post” has continued to publish a number
of amazing stories using the desktop experience. Since launching this
experience publicly, we have also seen great
content by “The SF Chronicle.” So how do you get this
experience on your stories? The short answer is to just
add the supports-landscape attribute to amp-story tag. However, you will notice that
some images and videos are not appropriately cropped. This is because by default,
on all screen sizes, we do a center crop, where
only the center-most portion of the image is shown. To correct this, use the new
object-position attribute. On AMP image in AMP video,
the object-position attribute takes an x percentage and a y
percentage as the focal point. In this example, we
set the focal point to 75% on the x-axis
and 40% on the y-axis, which is roughly the most
important part of this photo. The browser will then
shift the photo over and attempt to make the
focal point as close as possible to the
center of the screen, giving us a much better crop. You’ll notice, however,
that on landscape the photo remains unchanged. That’s because in this case, the
focal point cannot actually be moved any closer to the center
of the screen while the photo still covers the entire screen. Let’s move on to talk
about the sidebar. Publishers told us
that they wanted a navigational affordance
to allow users to navigate to different parts of their
site from their AMP stories, so we’ve added support
for AMP sidebar. This adds a sidebar,
or hamburger menu, to the top right of
your AMP story pages. Using AMP sidebar is
relatively straightforward. You can embed the
amp-sidebar tag as a direct child of amp-story. All of the content
within the sidebar tag will appear in the sidebar menu. Next up is attachments. Stories are great
because they’re concise. However, there
are times when you want to enable your
audience to dive deeper into a particular
topic, and this is where attachments come in. To open an attachment, a
user can simply swipe up from the bottom of a page. As a publisher, you control
the content of the attachment entirely. To add an attachment
to your page, add the
amp-story-page-attachment tag as a direct child
of amp-story-page. This will add a UI affordance
to the bottom of the page that a user can
easily swipe up on to reveal the scrollable pane. All of the HTML for an
attachment must be within the amp-story-page-attachment
tags. Attachments can contain many
AMP components that are not supported on AMP story pages. The last component we’ll
talk about is embeds. One of the great
things about the web is the ability to embed
content within your page. We are adding the
ability to embed different types of content
in your AMP story pages. One challenge with adding
interactive embeds to stories is that users tap to navigate. In this particular example,
if a user is tapping quickly through this story,
we don’t want the user to accidentally start
playing this video. This is why tapping
an interactive embed triggers a Tooltip
with navigation arrows. Tapping the navigation
arrows navigate, while tapping the Tooltip
brings the Twitter embed into full focus. This allows the user to
interact with the content fully without breaking
the navigational flow. Each of the embeds that we
support is an AMP component, so embedding them
in your story is as simple as just using
that AMP component. In this example here, we
are embedding a tweet, so we can utilize the AMP
Twitter component, just like in a regular AMP page. We’re going to be rolling
each of these components out individually over
the next few months. Now, I’ll hand it
back to Hong, who will talk about best practices. WEI HONG: Thanks, Vinay. I can’t wait to see
upcoming AMP stories created with all this cool features. So beyond offering you great
features and flexibilities to create AMP stories,
we also want it easier for you to produce
high-quality stories. We updated our story
best practice on amp.dev to make it easier
for you to understand what makes a good story. We all know that story is a
new and unique content format. So if you’re looking
for inspirations, ideas to start creating
delightful stories, you can go check out
our best practice to ensure your story quality. So now, let’s take a look
of some detailed examples. So when you make a
story, always make sure your story is complete
and self-contained. Keep your readers
engaged within the story. Don’t require them to click on
links to go to other websites to get essential information. Use text in a clear
and concise way. Keep your audience
engaged by avoiding putting a large block
of text on the page. Keep in mind that story is
a visually-driven format, so please use rich
media to tell your story and add text to enhance it. Sometimes, using a different
font size or font style can help you break
up the block of text and then make the whole
scanability more easy. Always make sure
your text is legible, using high contrast to make
every single word on your page easy to see. Take advantage of the
beautiful full screen. Try to use full bleed
assets as much as possible. You can create a more compelling
and immersive page experience by using the full bleed
portrait-based images and videos. Another good thing about
using the portrait asset is it can help cut off the
non-important information on the page and help
your readers to focus on one key, single subject. And we all know that motion
plays an important role in the storytelling,
so be creative with the animation usage. You can bring static
imagery to life by the proper usage
of animations. Please keep in mind that
animation should always enhance the visual, but
not distract the visual. In the last example here,
animating individual objects separately to the page makes
the whole visual experience look more interesting and enjoyable. On the right example here, the
effects on the background image looks nice and subtle. It also helps create
a nicer balance with the text overlayed together
and makes the whole page experience feel more immersive. I hope these
example are helpful. To look at the more
examples like this, please check out our
“For AMP Story Best Practice” on amp.dev. Moving forward, let’s
talk about monetization. So AMP stories offer you
this fast and immersive mobile-first content experience. We also think that stories
can create a great opportunity to make advertisings more
beautiful and immersive. In the past one
year, we have also been working really hard on the
AMP Stores monetization site, so now we can provide
you a diverse set of ways to monetize your stories. And today, we’re going to
talk about three of them. First up is Story Ads. So if you are a publisher that
makes revenue on web articles, you have now created
a beautiful AMP story. So what is your best option
to monetize your content? To better answer this question,
we actually looked back and borrowed principles
from how advertising worked in magazines. So when you look at
a beautiful magazine, the ads inside always
feel really immersive and take up the entire page. The ads are placed tastefully
in the right sections, never feel overloaded. And finally, they’re
very flexible. It opens up this clean
and a blank canvas to allow advertisers to
create whatever ad they want. So with Story Ads, we wanted
to ensure that the ads always feel immersive and take up the
entire real estate available of the device. We’ll also make sure that
the ads is only going to load when it’s fully loaded. So no more loading indicators. Here’s one example where BMW
created a beautiful story ad showcasing autonomous driving. The placement of the
ad is orchestrated by the AMP stories. We will optimize where the
ad goes for the right user at the right time. This allows us to create a great
balance between the ad density and publisher revenue. And when the ad is fully
loaded and ready to show, we’ll simply splice the ad
into the publisher’s story. Story Ads also helps
open up a flexible canvas to although advertisers to
show whatever media they want, from text to images to
videos or even animations. They’re all built on the top
of the AMP HTML ad framework, so the capabilities
here are endless. Story Ads are already live
today for publishers who are using Google ad managers. If you are an advertiser, in
this particular case, Intuit. You can basically go talk
to any publisher that’s creating or serving
stories and using Google Ad Manager to deliver
your ads into the story. So here’s an example of a
“Washington Post” story. And when the ad
is ready to show, the Inuit ad will
simply show up. And later in the summer, we will
launch programmatic support. So now, as a
advertiser, you were able to directly
using [INAUDIBLE] 360 to target any
publisher around the world and using Google Ad
Manager to deliver your ads into the stories. To make it super easy
for you to get started, we have created beautiful
Story Ad templates and made them available
for you to download for free on amp.dev. And of course, the entire
canvas is free and flexible. We just want to get
you quickly started with a few common formats. And these templates are all
available on amp.dev today, so you can download them and
then design the ad in the way you prefer. So now, let’s talk
about affiliate links. So affiliate links
are links which allow a publisher to monetize
their outgoing links when the user purchases something
on the linked advertiser’s landing page. In a way, stories already
support affiliate links today. You can add any outgoing
links within a story page. So in this example here,
if you tap on Get Now, you’re able to continue to go
to the product landing page. But we want to
make the whole user experience more
consistent across users for all publishers. So we’re working on a special
UI to let affiliate links to uniformly pass
at the system level to indicate this is
an affiliate link. And when a user taps
on them, the publishers can control what to
show, including things like the price of the product
or the domain it’s going to in the [INAUDIBLE] state. In this example here, it’s
really clear for the user to know where they’re going to
and the price of the product. Finally, let’s switch gears and
talk about sponsored stories. So what we mean by
sponsored stories are really just the stories
that are created by advertisers for marketing purposes. For example, here’s
a sponsored story that created by L’Oreal for
promoting their new product, La Roche Posay. This works great for
L’Oreal, because users could get a quick
idea of the product in this fast and immersive
mobile-first content experience within just a few taps. So instead of creating a
whole new web landing page, L’Oreal has chosen
to create a story. L’Oreal also uses
QR code to create an offline-to-online
strategy where they send users to their
stories by simply scan the QR code on the back of
their package box. They also enable the
really cool NFC technology in their physical
product station where they send users to the
story by one simple scan, as you can see in
the right video here. Notice how quickly
the story loads? There is no need to download
any additional apps on App Store in order to get the story. This allows to deliver amazing
content right away to you from one simple URL. And we also know that
large publishers already have a big sponsored
content business where they read editorial content
on behalf of the advertisers. So here’s an example where
“The Telegraph” created a beautiful travel sponsored
story talking about [INAUDIBLE] And because this is an AMP
story, so it works beautifully on desktop as well. The key question in
advertising is, now you have created all this
beautiful experience– how can you drive traffic
to a sponsored story, and how can you get
users to find them? Well, here we have
a few examples. The first one is when you use
sponsored stories as landing pages in Google apps. The sponsored story will
be automatically delivered from AMP cache. Therefore, from a
user standpoint, the experience will be really
snappy, fast, and immersive. And sponsored stories can
also be embedded inside of your regular web pages,
just like any of the other AMP stories, because sponsored story
is really just a landing page. So you can embed in inside the
iFrame and put it on your page. And when a user
tap on it, it will launch into this beautiful
full-screen experience. You can find out all this info
and more about AMP stories monetization on amp.dev/stories. Now, I’ll hand it back to Vinay
to walk you through AMP story creation tools. VINAY MAHAGAOKAR: Thanks, Hong. There are a number
of third-party tools that enable you to build
AMP stories without having to write your own HTML. MakeStories is a “what
you see is what you get” editor that enables you to build
AMP stories from scratch just by dragging and dropping. It includes a library
of built-in templates, as well as free icons,
illustrations, and GIFs. You can upload your
own images and videos. MakeStories is free. Check it out at makestories.io. Unfold is a story
creation tool that launched at the
beginning of last year and has since grown to more
than 17 million downloads. It offers easy story creation
right from your Android or iOS device and includes a number of
beautiful templates and themes. Unfold will add
support for AMP stories later this summer as part of
a premium version of its app. Newsroom Studio is a
powerful story creation tool specifically engineered
for publishers looking to embed these tappable
formats into both editorial and commercial workflows. It includes a turnkey
monetization solution, recommendations
engine, as well as unrestricted access to the Getty
library of images and videos. We’re also starting to see
platforms publish stories to the web. Both Jumprope and TIC
Done are platforms for users and creators to
publish how-to stories. Both are publishing to the
web in the AMP stories format today. Lastly, we on the
AMP team have also been working to add story
support to CMSes, starting with the WordPress AMP plugin. We have been working
jointly with the agency XWP add a “what you
see is what you get” editor to the
WordPress AMP plugin. With this plugin, you can
upload images and videos, add and customize text,
and add animations to different objects. This will launch around June
20th at WordCamp Europe. This concludes our
talk on AMP stories. In summary, we want to leave
you with the following points. Stories have emerged as one
of the most delightful content types to consume on our phones. AMP stories bring this
format to the open web, and publishers benefit, because
they own their AMP stories, can make them discoverable,
can link to them, embed them, and monetize them. Today, we announced the new
placement for AMP stories on Google Search,
new capabilities to help you create
more beautiful stories, best practices on how to create
high-quality stories, ways to monetize your stories,
and creation tools that enable you to build AMP
stories without having to write your own HTML. To get started with
the AMP stories, check out the story page
at go.amp.dev/stories. This has documentation
on what stories are and how to use them, as well
as documentation for story ads. You can also click
through to see live examples of some of the
stories we’ve shown here today. Another great
resource to check out is the best practices
guide that goes into what makes a good story,
including all of the examples that Hong went over today. If you have
additional questions, please check out the
AMP stories Sandbox. Thank you. [MUSIC PLAYING]

3 thoughts on “AMP Stories: Visual Stories for the Web (Google I/O’19)

  1. Great presentation. I think the video would benefit from image stabilization or a camera gimbal to prevent shaking.

  2. AMP story is limited by its individual page pattern. Sometimes we wanna show more infomation in one single page, say, a little long list. AMP story is nearly identical to "H5" in China, I'm wondering if this idea is inspired by "H5".

Leave a Reply

Your email address will not be published. Required fields are marked *