How Mic makes AMP stories

Mic Product
Mic Product Blog
Published in
3 min readFeb 13, 2018

Mic has partnered with Google to produce AMP stories, a new kind of webpage powered by AMP. AMP stories provide a performant, tap-through web interface for publishers. Google has a great walk-through of the format here.

Snippet of an AMP story (Source)

Last summer, when we were figuring out how to produce for this new format, we defined AMP stories by contrasting them with other popular content formats. Here are a few things AMP stories aren’t:

  • Mobile articles: Articles are print pieces that were ported first to desktop and then to mobile. AMP stories are native to mobile devices: visual-first and portrait-oriented.
  • Video: Video is a sit-back experience; you press play and watch. AMP stories are tap-through, which allows the user to progress at their own pace.
  • Snapchat Discover: Historically, in Discover, publishers’ editions have contained several self-contained stories relevant to the brand. AMP stories (usually) tell one story and live on the web (not in a native app).
  • Twitter Moments: Moments are collections of tweets that show the best of what’s happening across Twitter. AMP stories let you use a variety of media to tell a story with your own voice.

So AMP stories are visual-first, portrait-oriented, tap-through, single-story, web-based and multimedia. They represent a new class of editorial product, calling for their own set of design principles. In light of the above, we developed our own working set of AMP story design principles, which are:

  • Take as many pages as you need to tell your story. Given the speed of navigation from one page to another, navigation is not taxing on the user. A year ago we partnered with our friends at Hardbound to do some research on this tap-through format, and we found high completion rates on even very long stories.
  • Minimize text per page. Mobile users are highly distractible, so we want to minimize the cognitive overhead of each page they encounter in our stories. To this end, our internal Story CMS imposes a hard 160-character limit per page, which we’re considering lowering even further.
Screenshot of Mic’s internal Story CMS
  • AMP stories should be crawlable. AMP stories are webpages. To make them intelligible to crawlers, we should use HTML text rather than baked-in text wherever possible and restrict ourselves to short, declarative sentences. Both humans and bots appreciate this.

From an editorial perspective, it’s important to remember that much of AMP stories’ distribution will come from Google search results. With that in mind, there are a few questions we ask that reflect our editorial approach to AMP stories:

  • Is the story evergreen, a timely explainer or recent news coverage?
  • Does the story require visuals to be told most effectively? Are we able to source or create visuals that will help tell the story?
  • Is the story in a core Mic beat, i.e. can it be told with authority and with valuable research and sources?

These guidelines are our v1. As AMP stories roll out to the public, we’re sure to learn a lot more. Let us know what works and doesn’t work as you build your own AMP stories; we’ll do the same.

Posted by stephanie clary, Marcus Moretti and Daniel Rakhamimov

--

--