Tips for translating custom stories to AMP

The Storytelling Studio values the many touch points users have with our brands, and recognize that our own websites are not our most important platform. Most recently, our team has experimented with Accelerated Mobile Pages (AMP).

Here’s what we learned through some trial and error:

Build AMP-first

Build the AMP version first. It’s easier to add dynamic behavior and javascript functionality than to pare down an on-platform version to be AMP-ready.

Having the luxury of writing custom javascript gives me the option to offload things that can be done with markup and CSS to the script. Writing AMP-first breaks that habit. Even the custom version benefits from this approach. JavaScript I end up writing for the custom version tends to be lean and minimal when it is built AMP-first.

— Kavya Sukumar, Senior Full-stack Engineer

Monitor validity of AMP markup often during development by adding #development=1 query string parameter to the url. Frequent checks can help avoid having to backtrack to fix validation errors.

— Kavya Sukumar, Senior Full-stack Engineer

Leverage what AMP provides

Try to avoid CSS background images. The amp-img tag does a lot of cool stuff, such as srcset and lazy loading. You can’t do this stuff with background images in AMP.

— Ryan Mark, Engineering Director

Using layout and sizes attributes can save you a lot of CSS and media queries.

— Kavya Sukumar, Senior Full-stack Engineer

There are a few AMP components that enable adding dynamic content to the page, which can add a lot of functionality to the page without having to resort to iFrames. But, as we learned when building live annotation functionality for Vox, these component names can be deceptive at times. For instance, amp-list allows you to populate a part of the page from a CORS JSON endpoint while amp-live-list, as the name implies, allows you to poll for changes in parts of the page. But amp-live-list, which sounds like it adds a polling feature to amp-list, does not accept a CORS url. Instead it polls the page url and changes the page content.

— Kavya Sukumar, Senior Full-stack Engineer

The design will be different. That’s okay.

Just because it’s the same story, it doesn’t have to look exactly the same. Work within AMP’s constraints to design a feature, and then progressively enhance the story for the on-platform version.

For Vox’s interview with Obamacare enrollees, we designed a fade-to-black for the on-platform version of the story. In AMP, we simply had a hard cut to black. While the AMP version is not as elegant, it still conveys the shift in tone accomplished by the fade.

— Kelsey Scherer, Design Director

Publishing on multiple platforms is challenging, but there is a lot to learn in the process. We have to be deliberate about which ones we choose, and continue to find ways to systematize and scale that distribution.