How Mic makes AMP stories

Mic Product
Feb 13, 2018 · 3 min read

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.

Image for post
Image for post

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.
Image for post
Image for post
  • 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

Mic Product Blog

Updates and ideas from the product team at Mic

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store