AMP Stories Are a Thing Now

Default avatar.
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.

AMP Stories Are a Thing Now.

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.

blockchain

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.

Read Next

3 Essential Design Trends, November 2024

Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…

20 Best New Websites, October 2024

Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…

Exciting New Tools for Designers, October 2024

We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…