AMP Stories Are a Thing Now

February 14, 2018

AMP is a contentious technology, to be sure. People seem pretty sure that Google intends to use it to shackle publishers and users to the search engine (like we weren’t already), and that it’s just another way for Google to abuse its powers. And more importantly [sarcasm alert], it’s just not all that pretty to look at. I mean, it was never bad, but AMP is all about speeding up the web (and that other thing), and that means cutting down on a lot of the fancy visual stuff.

Revel and rejoice, designers! Google is working hard on that second problem. It’s a simple fact [not sure if sarcasm alert] that people can’t read articles on mobile without lots of big images and lots of animation. Google is addressing this by implementing a new feature called AMP Stories.

Sigh. Corporations make me snarky. It’s a reflex. Okay, I’ll stop now. You’re probably reading this on an AMP page, anyway.

AMP Stories is a visually-driven format for your mobile articles, basically. It’s designed to make it easy to implement all those big images, etc. Google went and asked a bunch of journalists and publishers ranging from Cosmopolitan to Mashable what they’d like their stories to look like on mobile, and this was the result.

If you want to learn how to build these for yourself, just head on over to the AMP documentation. There, you’ll find tutorials on how to use the big AMP Story features like:

AMP Pages

Yep, every story is separated into pages, presumably to make art direction more flexible, and keep content down to bit-sized chunks for the reader. Want to design a story that makes use of every single design aesthetic you can imagine? It’s doable with pages.

AMP Layers

At long last, someone (officially) brought the concept of layers to web/mobile design. You basically use these to organize your design and overlay elements on top of each other, just like you would in any graphics editor.

AMP Animation

AMP stories have brought with them a set of built-in animations that you can apply as properties to any element on the page. It’s kind of like in-lines styles, really.

There aren’t too many extra features beyond that. AMP, for all of the problems associated with its implementation, is still about stripping away as much unneeded cruft from the web as possible. All in all, if you’re already using AMP with your site, it’s a great addition to the toolset.

I’m calling it now, though: the first thing people are going to do with the built-in layers and animations is find a way to make parallax effects.

Ezequiel Bruni

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he\‘s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.