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, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

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…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

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…