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

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…