Telling Stories with AMP (AMP Conf 2018)
Articles Blog

Telling Stories with AMP (AMP Conf 2018)

August 8, 2019


JON NEWMUIS: When we
first introduced AMP, a large part of it was solving
a technical challenge, right? Making the mobile
web more performant. But as users start to use
mobile devices more and more, and consume more and more
of their content on mobile, it starts to become
clear that there is also an editorial challenge when
publishing to mobile platforms. Users do read long-form
articles on mobile. But only for so long. Malte mentioned
this in the keynote, but users only read
long-form articles on mobile for an average of
one to two minutes for a given article. It’s not very long. It can be very difficult
for these users to consume this
content on mobile. The long-form format makes
it very difficult for users to find deeper– which sections they want
to do a deeper dive on. But instead, we want all stories
to be told in the best way possible for that story. And AMP Stories give publishers
another approach to consider. For your users,
these stories provide bite-sized rich
visual content that is more easily
consumable on mobile. They also allow
you, as a publisher, to worry less about getting
the tech just right, and instead focus on telling
the story the way it’s meant to be told,
with the flexibility to make those stories
truly captivating. And as, again, Malte
mentioned, like any AMP page, these stories are
just web pages. So they are available
wherever web pages are, including your own properties. So today, we’re excited
to announce the developer preview of AMP Stories, an open
format for visual storytelling on mobile. To demonstrate, here’s a
story by CNN using format. As you can see, it’s very visual
with these full bleed images. And you can also include
video assets as well. The short form bite-sized
text is more easily consumable on mobile. And at the end of
the story here, you can see that there are options
for sharing and linking out for the story to sort
of get that viral share. Now as we do with many new
experimental features in AMP, we have collaborated
with publishers to help innovate in this
space, with the goal of building a stories
format for rich storytelling that we’re presenting you today. The resulting AMP
Stories format allows you to create visually rich
tap-through stories that are immersive experiences
that are specifically designed for mobile and
keeping users engaged. The format is well-suited for
a breadth of content, from news to lifestyle and yes,
Paul, even sports. And allows the
design flexibility to establish your brand
and best tell the story. Additionally, the
format is automatically supported on larger
screen devices as well. This lets the users
share the story as they would any
other web page, and allows the recipient
to open it on any device. So what makes up a story? To walk you through this, we
created a fake example story of the five most expensive
cities in the world. After the initial
cover of the story, we walked through each of the
five most expensive cities one by one, giving details
on why they make the cut. And you can see them
all laid out here. A story is made up
of one or more pages, each represented by
the amp-story-page tag. In our story, we
have one cover page with the title of
the story, followed by a single page for each of
the five most expensive cities. For the sake of our
example, we chose to build a very
templative story. But the framework allows
the design freedom to make each page stand out. At the end of the story,
the system automatically appends a templated UI
that we call the bookend that I mentioned
allows you to share, but also allows you
to replay the story and have outlinks to
other articles or stories for the user’s onward journey. This is populated with default
content out of the box. But there are
configuration options to augment this experience for
a more robust configuration. Now each page of
the story is made up of multiple layers,
stacked back to front. These layers are all composited
on top of one another to create the desired
visual design. So taking the example
of our cover page, starting from the
back again, first we have the background video. On top of that, we
have a second layer with the title of our story,
the byline, and the publication date. On top of that, we chose
to add a third layer with our publisher’s logo. And then lastly,
the system always superimposes what we call
the system layer, which includes controls,
progress indicator, so the user knows
where they are, and other UI Chrome to
help orient the user within the story. Now each layer contains
HTML or AMP elements to create the desired
visual effect. So in the case of our background
video layer, surprise surprise, it has a single element,
which is just a video. So this just uses AMP video just
like any other AMP page would. But here, we also have a
template equals fill attribute which is specific
to stories, which indicates that this video
should indeed be full bleed. Then, as mentioned before,
we can add another layer on top of that. So this layer uses
template equals vertical, which indicates that the
elements should be laid out sequentially along
the vertical axis. And we, on this
page– on this layer, we have only three elements. First a heading for
the title of our story, and then a paragraph for each of
the byline and the publication date. And you can continue to
create layers and stack them on top of each other for all
of the layers in your design. So let’s take a look at the HTML
markup that makes this happen. So AMP story is simply
an extension to AMP. And so you would start
the way that you start with any other AMP extension. First, import the
AMP Story JavaScript. Then you add the amp-story
tag to your document, thereby making it a story. Now as I mentioned before,
for each page in your story, you can have an
amp-story-page tag. Each page has an ID so that
it can be uniquely identified. Now let’s take a look
at how you would create the cover page of our story. So, remember, a
story page is made up of multiple layers
stacked back to front. And we saw these
examples earlier. First, we have a layer
containing a single AMP video for the background of our page. Then on top of that,
we have a layer with the title, the
byline, and the publication date of our story. And lastly, we opted to put
a logo in the bottom right corner. And together, these make up
the UI of our cover page. For each of the
cities in this story, because remember
this is the five most expensive cities in the world,
we have a page for each city. And those pages are
constructed the same way. First, a layer for a video. And then on top of that,
a layer with some text. But additionally,
this page leverages some built in
features of stories that we find pretty exciting. So first, animations. Animations make the page
more visually engaging. We use the animate in attribute
to add a preset animation to this number five
here, so that it flies in from the bottom as
soon as the page is shown. Then, for the
details of this city, we use sequencing in animations,
which will fade in the details half a second after the
number five flies in. So you can sort of
chain and sequence these animations to create
really engaging visual effects. This page also has
background audio to help create an
immersive experience. This plays audio
in the background for the duration of the time
that the user is on this page. You can also set this up to
play audio in the background throughout the duration
of the entire story. And lastly, we use
a feature in stories that we call auto advance,
which will automatically advance the user
through the story without them having to
manually tap on every screen. So here, we chain
the advancement to the video playback
so that as soon as the video has
finished playing, the user will automatically
be advanced to the next page. And we do this by
specifying the ID of the video in the
auto-advance-after attribute on the amp-story-page. So this, of course, is
just the HTML markup. We can also write CSS
to style our story. And this is actually
the entirety of the CSS that is needed to
build this story. It’s perhaps a bit smaller
given the templative nature of the story. But it’s also smaller because
much of the visual layout is handled by AMP itself. So here we just use the
styles to set the text color of the story,
adjust the fonts, tweak the alignment of our logo,
which was in the bottom right corner, and add a gradient
behind the text on the city pages. And last but not
least, the bookend. As I mentioned earlier, you
can customize the bookend. It’s completely optional
to customize it. There is a default. But if
you choose to customize it, you can specify a JSON payload
that looks something like this. It’s broken into
two main sections. First is sharing. There’s the share
provider’s object. Each of the sharing options
comes from AMP’s social share, if you’re familiar with that. So any sharing provider that is
supported by AMP social share is also supported by the AMP
Story bookend by simply using the provider type as a key. And the provider
type usually matches the name of the platform. So Facebook for
Facebook, Twitter for Twitter, and so forth. And if you want
to enable the icon for that particular service,
you can just add the value true. If you do need
further customization, you can– all of the parameters
that allow you to parameterize sharing providers
on AMP social share are also supported by AMP Story
here by just specifying a sub object like we did
for Facebook here, specifying a custom
application ID. You can also change
the order of this and that is respected
as well to customize the order of your sharing
icons in the bookend. The second main section
of the AMP story bookend JSON is the
related articles. And this is, again, how you can
specify sort of onward journeys for your users. You can specify articles
as an array here. Each of the articles itself
is an object with a title, an image, and a
URL to navigate to. And then, you can also
categorize these into sections. So you can see
here that there is a section called More To Read,
that has an array of articles. And you can have as many such
sections as you would like. So this is all specified
as a single JSON payload that can be static
or generated dynamically. And this allows
the configuration to be easily re-used
across stories and also kept up to
date if you wanted to generate this dynamically
for related links, trending links, new
links, or so forth. And that sums up how to build
our simple example story. But obviously, you don’t
want to just create simple examples all day. So next, let’s
take a look at how you want to tell the stories
that you want to tell and how to make them
actually come to life. So, to share more details
on that, please help me welcome Elite Truong
from Vox Media. [APPLAUSE] ELITE TRUONG: Hi, everyone. All right. When you want to know more
about something right now, how do you do that? If you’re like me and a billion
of our other fellow humans, you would Google it. When I was a kid growing up
in the small Midwestern town in the states, I read every
story I could get my hands on. When I didn’t have the
right books or resources to learn something
new, I could still search for anything
that I wanted to learn more about by using Google. It’s been the great equalizing
platform to access information, no matter where you live. AMP was the first wave of
prioritizing news stories in mobile search. And AMP Stories is the second. With AMP Stories,
readers can search for what they want to
learn more about now, whether it’s Mardi
Gras, which is today in the US, the Grammys, or to
catch up with what’s going on in the world and reach
trusted news sources right away, in a visual way,
instead of just text. So, hi. As John said earlier,
I’m Elite Truong. I work at Vox Media,
a media company that strives to build the future of
journalism and entertainment through our nine editorial
networks that explore topics that people care about. I’ve been working
closely with Google for the past several months
to bring our audiences AMP Stories, and was also
Vox Media’s product lead for the AMP project
back in 2015. So, what’s so exciting
about AMP Stories for a publisher like us? Firstly, search is an
important way for any reader to find our stories. From AMP, our readers are
now used to finding us on mobile search right away. And we want to be
able to reach them through visual stories on mobile
search right away as well. This is a good
opportunity to experiment with visual storytelling
across platforms. These stories are short form. And nowadays, it’s
much easier to catch up on what’s going on with
their favorite sports teams, live events, and
things happening halfway across the world by tapping
through a short, visual story. These stories can travel
across platforms, on our sites, on social, and other news
feeds and platforms eventually. It’s not limited to the
third-party platform where it is produced,
like similar stories. Which means that I
can reach more readers with less editorial effort. So today, I’m
excited to announce the launches of two Vox Media
networks on AMP Stories– Vox.com and SB Nation. The networks have
different missions. SB Nation is a place for
passionate sports fans, while Vox explains the news
and what matters in the world. As two of our biggest
networks on search, they both have incredibly
talented visual storytelling teams, who have
pushed the boundaries of visual storytelling
on Instagram, Snapchat, and interactive stories. They also both exist on Chorus,
Vox Media’s proprietary tech and data platform for
growing digital media brands. For this launch, we chose
a pair of newsrooms, so they have a
fellow team to learn from a different editorial
approach and audience. So what do these stories
actually look like? You’ve gotten a
little preview before. But I want to show you
these two examples now. From SB Nation, this is how
college football rankings actually work, because
they can be confusing. This is adapted from a
very popular SB Nation article that explained rankings
in a much more in-depth way. But it also works as a short
explainer in this format. From Vox.com, is dark
chocolate actually healthy? This was adapted from a hugely
popular video that the Vox video team produced, which helps
explain how dark chocolate came to be known as a health food. Hmm. So how do AMP Stories
fit into the way that we tell stories in
general at Vox Media? There are two
examples here as well. Our first is on SB Nation. 17776 is an ambitious
multimedia narrative that imagines what football
might look like 15,000 years into the future that took off. On averages, our audiences
spent about 11 minutes with this story, which
was written by John Boyce. For Vox.com, we have an
illustrated deep dive into how living in
poor neighborhoods impacts its residences, reported
and built by Alvin Chang. As you can see from
these examples, some of our visual
stories are bespoke, hand-coded stories on
platform, or created on other proprietary
platform CMSes like Instagram or Snapchat. From stories like
these that serve as our visual
storytelling inspiration, we had to figure out
how to transition from building our comprehensive
hand-coded stories to creating a tool where we could more
easily create and publish short visuals AMP Stories. So the solution for this? We built an MVP story
builder within our CMS that’s meant for
designers and developers to help build stories based
on editorial storyboards. And we did it within a few days. It’s highly
customizable per page, and so we can make sure
the stories reflect the intended design and
automatically publishes new stories to all
the right places. Since it’s so
lightweight, we can add on what we need as we go
along without much friction. And we’ll use lessons
from this story builder to incorporate into our larger
publishing system in Chorus. The credit here goes
to Greg McWilliam, who is our lead engineer
on AMP Stories, who’s also you’re at AMP com. So, there are a million
ways to tell stories through images and text,
we know as publishers. But in this format,
we need to figure out what’s the most
impactful and relevant, and tell it in a visually
striking way that informs our readers. Since we’re working
collaboratively across product and editorial teams to
produce stories in a new way, we established a new
pitch to publish process for all of our AMP Stories
to track how they perform and help us chart
future editorial plans for short-form visual stories. So after several months of
thinking about and writing and building AMP Stories,
particularly in the context of what our readers
would want to see, we had some lessons to share
to set you up for success. Firstly, find the right
people to work on AMP Stories. The right people
for us turned out to have a mix of social,
video, and visual skills. We also learned really
quickly that a team of people with those skills will push each
other to make better stories, rather than if just one
person was in charge. Figure out how they
should work together. If these people have never
worked together before, which was the case for
a lot of the publishers who were in the
beta phase, you need help from people who
are process experts. You can’t just wing it and
have it consistently work. Lastly, set realistic goals
and expectations early on. This is a format that requires
a lot of things to figure out. Story adaptation, designating a
dedicated team, a new editorial product and revenue strategies. Setting goals across
teams early on will help set you
up for success. A big reason for us to
launch on AMP Stories is to push ourselves to
improve visual stories across the board, teach
our teams about producing daily stories outside
of just video and text, and reach a much larger
audience by doing that. It’s a really exciting
time to be here when we can marry search
and storytelling in a way that my kid self would have
been over the moon to read. And know that these stories are
available to anyone, including kids in small towns
anywhere who want to learn more about the world. Thanks very much. Back to John. [APPLAUSE] JON NEWMUIS: Thanks, Elite. So Vox Media was just
one of many collaborators that helped us innovate in this
space to bring you the story format that you see here today. And we’d like to
definitely thank all of the folks
that helped make this happen across the
many organizations that were involved. So what’s next for
stories in AMP? We want to drive monetization
by supporting ads and improving support for affiliate linking. Stories are currently
focused on English. But we hope to expand that
support more broadly as well. We would like to bring
richer features and more interactive storytelling
devices to aid you in telling your stories the way
that you want them to be told. And we’d like for these stories
to be seamlessly embeddable wherever they show up
with the right metadata, beautiful previews, and
stellar performance. So for more about what’s coming
next for stories and for AMP more generally, check out Malte
and Rudy’s What’s Next In AMP Talk at the end
of the day today. If you’re interested in
getting started with Stories, check out
AMPproject.org/stories. On that site, you’ll find
more detailed documentation for what I went over today,
a guided tutorial on building a story from start to finish,
best practices on building your stories, and how to keep
them beautiful and performant, and examples for you to build
from and to play around with. Like other experimental
features in AMP, you can start playing
with this today. But to actually
publish these stories, you’ll need to sign up for
the AMP Story Origin Trial. And details on that can also
be found in the AMP Story documentation. Google Search has
also been working to integrate this feature into
the Google search results page. Existing visual
stories can be found by querying the
publisher’s name, using one of these
queries seen here, to see a carousel of their
stories that they’ve created. This feature will be rolling
out over the next few days. But if you want to try it
out today here right now, for demo purposes, you can use
the g.co/ampstories link that you see here. Thank you so much for your time. If you all have more details– or sorry, for you
to get more details, or if you have
questions for us, feel free to stop by the publishing
and monetization booth right here outside at AMP Conf. Thank you. [APPLAUSE] [MUSIC PLAYING]

Only registered users can comment.

  1. Was there and did an Rss-to-amp-stories prototype during this talk, check it out 🙂
    https://github.com/FGRibreau/rss-to-amp-stories

  2. You are missing the most important part, will be this NEW format available to everybody? ( I doubt it…) or like carousel AMP rich cards just for a few, I mean just for the big guys. Making AMP stories is so easy but why invest time and effort on a platform created just for few.

Leave a Reply

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