April 1, 2020
AMP Stories: The Story so far (AMP Conf ’19)

AMP Stories: The Story so far (AMP Conf ’19)


[ELECTRONIC MUSIC] JON NEWMUIS: Hi, my name is Jon. And I’m the lead
developer for AMP Stories. WEI HONG: Hello, everyone. My name’s Hong. I’m the leading
[INAUDIBLE] designer, working on AMP Story
format and, also, AMP Story on Google services. We’re super excited
to be here today to walk you through new
for AMP Stories in 2019. So let’s start out with
something we use every day. We do a diverse
range of activities with our mobile phones
at a daily basis, like chatting with your friend,
ordering food, navigating to new places, watching TV,
movie, shows, playing games. Beyond all those
basic activities, we also find ourselves
spending more time discovering or consuming
content directly from the mobile devices. A lot of the traditional
content channels, like newspapers
or magazines, have been converted from the print
media to the digital media. But we see that most
of the digital content are designed for
desktop access, instead of following a good
usability guidance on mobile. So therefore, we
often face challenges when we read content
on mobile screens. Your desktop size decreases
from this big to this. But the amount of the
content you need to consume stays the same. I know, it’s really painful. Because you get less
time to read the content. And you have to keep
moving your page to other part of the content,
instead of simply just glancing everything at the one place. It’s also hard to
track the reading and manage the reading time. For myself. I often find myself
opening a bunch of articles on mobile screen every day. But I don’t find
myself finishing reading them that often. Because of the suffering to read
traditional long-form articles on mobile screens, we’re
hoping for more visual forms of storytelling and a better
content-consuming experience that’s designed
for mobile first. We see that the
visually-rich content format are getting more and more
popular in the native world. But visually-rich
content on web– it’s still rare, because
it’s difficult and expensive to create. So to create a better open
forum for visual storytelling on the mobile web, we
launched the developer preview for AMP Stories last
year in February. With AMP Stories, we deliver
mobile-first bit-sized content to user and then immerse them
with fast-loading for-screen experience. We also start
allowing publishers to do easy visual
driven narratives with engaging motions and
tappable interactions. What’s even more awesome–
the AMP Story format is free and is part
of the open web, so it’s open for anyone who
wants to try on their own site. And it’s also easy to
be shared or embedded across the whole
web, instead of being locked into a closed
ecosystem or platform. In the past one year, we’re
excited to see publishers creating a lot of
great AMP Stories on diverse topics, each
with their own unique design and storytelling. We see great stories made
for news, lifestyle content, politics, science, TV shows,
visual essays, celebrity stories, game reviews, sports,
and many other cool topics. We’re also working hard
to make the AMP Story format even better. So now, I’m going
to hand off to Jon to walk you through the exciting
AMP Story format updates. JON NEWMUIS: Thanks, Hong. During AMP Story’s
origin trial, we saw that there was real interest
in this type of content. Publishers of all sorts joined
us for our origin trial. And they were able to build real
stories with the format, some of which you just saw. But the origin trial
was limited in scope and only focused on a
small number of use cases. So we, on the core
AMP Stories team, have been hard at
work, expanding the capabilities
of the format, so that it can work for everyone. So let’s walk through
a few of the features that we’ve added
to help out here. First is localization. When we launched the
origin trial and developer preview last year– last February– it
was in English only. We now support 21
different locales. But more importantly, we’ve
built a generalizable framework around localization in
AMP, so that AMP Stories system-provided user
interfaces can be translated into any language easily. The framework not only
includes the ability to add these new translations,
but also includes the ability to flip the user interface
for right-to-left languages, like Arabic. To use new languages,
you can simply set the Lang attribute
on the HTML tag of the document with your
story to the local code for the language that your
locality would like to use. And if you want to enable
right-to-left support, then you can set the DIR– which stands for Direction–
attribute of the HTMP tag to RTL. As an example, Rakuten is a
major internet company based right here in Tokyo actually. They run one of the largest
recipe sites in Japan– Rakuten Recipe, which has over 1
and 1/2 million recipes for you to enjoy for free. Rakuten Recipe is experimenting
with publishing AMP Stories. And you see one here, which
is, I believe, the top 10 most popular sweets, which they
all look pretty good, I think. But as we get to the
end of the story, we see what we call the
templated bookend UI, which provides links, related
articles, sharing options, and so forth. And this templated
UI is partially specified by the
publisher but, also, partially contains
strings that are defined by AMP Story itself. The strings provided
by AMP Story itself can be
translated into Japanese with this new
localization feature, providing a consistent user
experience for the users. Next, we wanted to provide
a richer, more customizable experience for desktop displays. When we launched AMP Stories
to its developer preview last year, we included a
default desktop user interface. And I want to emphasize that
this user interface is good, but the reason
that we implemented this user interfaces is
because it is actually easier for publishers. As a publisher, you can simply
create your story for mobile and have this
automatically transformed to work on landscape
displays as well. But what we’ve heard
from some publishers is that they’re willing to
put in a little bit more work to make their experiences
better on landscape displays. And so earlier this year,
we launched a feature that allows publishers to
bring the full-bleed nature of stories on mobile
to desktop as well. On a laptop or a
desktop computer or even a giant
projection screen, this feels a lot more natural. And it also brings this
feeling of immersion that you have on stories
on mobile to desktop. Although, it
requires a little bit more work from the publisher
to get this experience just right– particularly in finding
the right art direction– the flexibility it affords
publishers and the benefits to the user experience
are tremendous. This experience was designed
and developed in collaboration with the top global news
publisher, “The Washington Post,” whose story you see here. They worked closely with
us to run an experiment on their properties, where they
essentially set up a few test stories to determine
the effectiveness of this new experience. Once we were able to determine
the effectiveness and the value that this truly
brought to users, we were able to implement
and productionize this feature to ship it as a
core part of the AMP Stories format. “The Washington
Post” has continued to publish a number of great
stories, using this experience. But the benefit of implementing
this into AMP Story itself is that now all publishers can
benefit from this experience as well. And we’ve seen some
publishers start to do that. Since launching this
publicly, for example, the top national publisher
“The San Francisco Chronicle” has started publishing in
this new landscape experience as well. So now, you’re all
probably wondering, how do you enable this
experience for your stories as well? The short answer is, just
add this one attribute. If you add the Supports
Landscape attribute to your story, then
it will automatically enable the landscape
support for your story. But the slightly
longer answer is that, when you do that, things
might not look quite right. The top screen here– you can see that the assets
are not cropped perfectly. And so this is because, for
both portrait and landscape orientations, we actually do
a center crop, where we just take the center-most
portion of the asset and keep that in display. So to correct this, we
actually recommend manually specifying a crop. And you can do that by
specifying the Object Position attribute on your
images and videos. So here, so the Object
Position attribute works by essentially setting a focal
point on the images and videos that should stay as close to
the center of the screen as possible. Here, we set the focal point
to 75% along 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 media over, so that this focal
point, again, is as close to the
center of the screen as possible, giving
you a much better crop. You may notice that the
landscape version of this remains unchanged. And that is because, well,
the landscape version of the asset and the landscape
orientation of the screen are roughly the same size. So the asset does not
need to be moved over. And actually, the focal point
here cannot be moved any closer to the center of the screen,
while leaving the image still covering the whole story. Support for the Object
Position attribute will be rolling out
over the next few weeks. Another piece of feedback that
we’ve heard from publishers is that they want to have
more control over navigation to other places from the story. So on a traditional site, you
would have a Navigational menu. And they would like to bring
that to stories as well. And so we’ve done just
that by enabling support for AMP Sidebar, which
works much like it does on a regular AMP website. This lets you provide
navigational affordances and treat your story more
like a part of your site. To use AMP Sidebar is
relatively straightforward. You just use the AMP Sidebar
tag as a direct child of the AMP Story tag in your story. And it works just like embedding
a sidebar in a regular AMP document, with one
exception, which is that stories
will automatically add the templated UI
to open the sidebar– this hamburger menu icon that
you see in the top right corner here. Another thing that we’ve
heard from publishers is that, sometimes, you want
to make the editorial decision to allow users to explore
content, only if they want to. So maybe you have a
video that’s very long. And you’re not convinced
that all of your users would like to watch
the whole video. Or maybe you want
to optionally allow users to get a deeper
dive on a particular topic that you’ve covered
in your story. This is where attachments
come into play. To open an attachment,
a user can simply swipe up from the bottom of a
page containing an attachment. And they will get
this scrollable pane. As a publisher, you control
the content of the attachment and can embed any
content that you like. Attachments are often
used in story formats to provide exactly this, an
additional set of content that isn’t critical to the story. But we’ve added this
now into AMP Stories for you use as well. Just like Sidebar, the AMP
Story Page Attachment tag acts as a container for
the additional content. And it also automatically adds
the UI affordance to the story. So for the Sidebar, it was
the hamburger menu icon in the top right. For the page attachments, it’s
this arrow with the Learn More text on the bottom. For a AMP Story
page attachment, you can embed it into your story
by setting the AMP Story page attachment tag as a direct
child of your AMP Story page. But not all interactive
content should be hidden away in an attachment. Sometimes, you want to
showcase the content directly as part of your story. This is why we’re adding
embeds to stories– the ability to embed content
directly within the story page. When a user clicks on
an interactive embed, they’ll be shown a tool tip
that allows them to bring the component into full focus. This allows the user to
interact with the content fully, without breaking the
navigational flow through the story. Each of the embeds that we
support is an AMP component. So embedding them
in your story is as simple as using
an AMP component. So in this example,
we’re embedding a tweet. And so, like on any
other AMP page, all we do is use the AMP Twitter tag. Support for AMP
Twitter is live today. But much like the
localization feature that I mentioned earlier,
the exciting thing here isn’t specifically
the use of AMP Twitter. It’s the fact that we’ve built
a generalizable framework around embedding content. We can expand this framework to
support many different content types. And we plan to do just that,
as we roll these components out individually over
the next few months. We’re pretty excited
about these new features and hope that you’ll
feel the same way. Now I’ll hand it back to
Hong to talk more to you about what Google is doing
to surface AMP Stories. WEI HONG: Thanks, Jon. I can’t wait to see upcoming
AMP Stories with all those cool features. So now I’m going to
put on my Google hat and then talk about AMP
Stories on Google services. So after building all
these amazing AMP Stories, the main question you might ask
is, how can you still see them? Well, the great thing
about AMP in general is that those are
just regular web pages and are accessible
through publishers site, through social channels. Or of course, they’re available
through search engines, like Google. So AMP Stories today can show
up on Google Search in the web results and top stories. In order to make the search
experience more visual and more interactive, we’re working
on a dedicated placement for AMP Stories on Search, for
queries in specific categories. So let’s use Travel
as an example and all get on a visual search
journey together. Let’s imagine ourselves
searching for things to do in Tokyo. Here, we have the
Search Results page. You start scrolling and
exploring the content. And then you find
this beautiful blog, serving you cool
travel visual stories. Tapping anywhere of
this cover, we’ve brought you right
into the story. And now, you can start enjoy
reading the story by simply just tap through the pages. If you want to browse
something else, you can just simply
swipe to the next. Now, you can get this
[? analyst ?] discovery experience by continuously
swiping to the next content. And of course, this
is just a teaser. There’s so many cool places
to go around the world. And by adding this new
experience to the Google Search, user will start
getting more and more immersive travel stories. We start with travel, because
looking at the rich content experience like this
can really help user get a better understanding
of the travel destinations. And then you can engage more
before you’re even physically being there. Also, the AMP
travel stories tend to be ever growing, so they
will be still relevant months after being published. We also know that the
story format works really well with all other types
of content categories. So after travel, we experiment
with gaming, fashion, recipe, movies, TV shows, and
even more categories. So beyond the regular
search experience, Google also offers you a
Browse Forward experience in the Google Discover feed,
for all types of users, without having a query mind. So a quick reminder on
what Google’s Discover. Discover is a feature
within Google Search that helps users stay up-to-date
on all their favorite topics without needing a query. Users can get to their
discovery experience through the Google Search app. Go to the Google.com
mobile home page. Or simply swipe right
from the home screen on the Pixel phones. It has grown
significantly and now helps more than 800 million
monthly active users get inspired and
explore cool content. The exciting news is that,
in the past six months, we have been featuring great AMP
stories in the Google Discover feed as well. We served many
high-quality AMP stories, based on a diverse
range of topics. And we saw great
user engagement. We believe that
Story fits really well with the user
mindset in Discover feed and plan on focusing even
more on this platform moving forward. So beyond bring more stories to
users through Google services, we also want to make it
easier for you to produce high-quality stories. So we updated our Story
best practice on Amp.dev to help you easily understand
what makes a good story. We have talked to a number
of great story creation tools that allow you to have easier
process to create stories. We now also offer you
good monetization options to lets you easier
monetize your content. So let’s start
with best practice. What makes a good story? We all know that story is a new
and a unique content format. So if you’re looking for
ideas or inspirations, trying to figure
out how to start making delightful stories,
you can reference or follow the best story
practice on the AMP.dev to ensure your story quality. So let’s take a look of
some detailed examples. When you make a story,
always make sure that your story is complete
and self-contained. You should keep your readers
engaged within the story. Don’t require them to click
links to go to other websites to get essential informations. Always use text in a
clear and concise way. Try to keep your
audience engaged by avoiding putting large
blocks of texts on the page. Story is a
visually-driven format. Try to use rich media
to tell your story and add text info to enhance it. Make sure your text
is always legible, always using high contrast
to make the words easy to see on every single page. You should always take advantage
of the full-bleed screen. Always useful full-bleed
assets as much as possible. Try to create a compelling
and more immersive content reading experience
by using the vertical assets. Another good thing about
using vertical-based assets is that it crops out unimportant
information on your page. So it will let your user easily
focus on one key subject. We all know that motion
plays a important role in the storytelling. So be creative with
your animation usage. You can always bring
your static image to life with proper animations,
keeping in mind that animation should
always enhance the visual, but not distract the visual. On the example on the left,
animating different elements separately to the
stage will make the whole visual experience
more engaging and playful. On the example on the
right, the animation facts on the background image
is nice and subtle and plays a nice balance with
the text overlay together. I hope you find all
these examples helpful. If you want to learn
more, please go to AMP.dev and check the full AMP
Story Best Practice. JON NEWMUIS: To make creating
stories easier without having to dive into the
HTML, we’ve worked with a number of
partners to release creation tools for AMP Stories. Make Stories is a
wiziwig editor that allows you to create a story
by dragging and dropping. It comes with a library
of templates, GIFs, icons, and illustrations. And you can add your own
videos and images as well. And the best part is that, as
we heard in the keynote earlier, Make Stories as
launching for free. And so check out MakeStories.io
for more details. Next is Unfold, a
story creation tool that launched at the
beginning of last year and already has 17
million downloads. They offer easy story
creation directly from your Android or
iOS device with a number of beautiful
templates and themes. And they’re announcing
that their app will support AMP Stories as part of a
premium version of Unfold coming this June. Newsroom Studio is a powerful
story-creation platform specifically engineered
for publishers looking to embed tappable formats
into their editorial and commercial workflows. The platform includes a
turnkey monetization solution, recommendations engine, and
provides unrestricted access to the entire Getty
Images library. We’re also starting to see
platforms publish stories to the web. Jumprope is a platform
to discover and share how to do anything with Stories. Tick Done is a platform aimed
at teaching 1 million people 1 billion new skills. And both are publishing to the
web in the AMP Stories format today. We’re excited to see
more platforms provide ways for end users to publish
content to the web in the story format. And lastly, we on
the AMP Team have been working to get
Stories support added in CMSes, starting with
building support for Stories into the WordPress AMP plugin. I’m sure many or most of
you know about WordPress. But if you don’t,
WordPress holds 60% of the CMS market share
and powers 1/3 of all websites. We’ve been working jointly
with the agency XWP to add a wiziwig Stories editor
to the WordPress AMP plug-in to help bring more AMP
stories to the open web. To hear more about our efforts
to bring Stories to WordPress– among other WordPress things– check out the “AMP
Experiences in WordPress, the WordPress Way” talk
tomorrow afternoon. As Hong mentioned,
we’ve been trying to make it easier for
publishers to monetize their stories by providing
a wide array of monetization options. From the news story
ads format to affiliate linking to sponsored
stories, there are a number of
ways to get started with monetizing stories. And for more
information on that, Vamsee will give a talk first
thing tomorrow morning– the “Advertising and AMP” talk. So this has been a
whirlwind tour of what we’ve been up to for the past year. It’s not everything. But it’s a few highlights. But where are we
going from here? Well, to name a few,
we’re going to continue to roll out support
for additional embeds, as I mentioned earlier. We want to make creating
animations easier, by doing two things. We want to make
animations easier by expanding the existing
preset library of animations as well as adding support
for functionality that will make creating more robust
animations within Stories. We also want to
support reactions, which are quick actions
to provide social feedback on a story to let the story’s
author, as well as other users, know how users
feel about a story. And lastly, we’ve been
experimenting with a feature that we call branching,
which allows you as a publisher to control the
user’s flow through the story. With the ability to
jump from page to page, share a story starting from
a specific page of interest, create a table of contents,
or even create short quizzes, this feature really amps up
the interactivity options in Stories. So if you’re interested
in getting started, you can check out the Stories
landing page on AMP.dev. This has documentation for
Stories as well as Story adds. Another great resource to check
out is the full Stories Best Practices guide on AMP.dev
at go.amp.dev/stories best practices. And lastly, if you’re
here at AMP Comp with us today or tomorrow, you
can come and check us out in the demos booth or
the tutorials room. Thank you. [MUSIC PLAYING]

1 thought on “AMP Stories: The Story so far (AMP Conf ’19)

  1. I really like AMP stories, and yes, while they can be expensive (coding work + fancy images) the chance of users interacting with them is much higher, unlike a plain boring article. One idea I have is that if you are a freelancer or "1 person business" make your "about" page into a story. That's what I am gonna do with mine.

Leave a Reply

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