AMP

AMP’ing Up The AMP Framework

Uncategorized

Editor’s note: The following was posted on Medium by Konstantin Sokhan, Design Director & David Tapp, Client Partner, MetaLab. Checkout all the AMP templates on ampstart.com.

TL;DR — We Journeyed Into the World of AMP and Learned Some Stuff

We teamed up with Google to focus on The AMP Project and received a dream brief: create anything your heart desires, so long as it helps push the boundaries of what’s possible in AMP’s codebase and component library. As we share what we built and learned along the way, we’ll also give our take on AMP’s importance, who it’s for and where it’s going.

What is AMP?

AMP is an open-source framework for building efficient, high performance web pages. It’s currently used primarily for editorial content on mobile but is growing beyond this for wider usage across different markets (and screen sizes).

metalab1

Seeing Both Sides

Before we go any further on our own experience, we’d like to acknowledge that we are well aware of the criticisms and aren’t going to pretend AMP doesn’t come with any; it does. We simply took this project as an opportunity to chart down our own path and make our own impressions. From our experience, there are some misconceptions we’d like to help clear up.

AMP allows site authors to host a static mobile-optimized version of any of their site pages which distribution platforms like Google cache and serve to users. Much of the AMP criticism is targeted at Google’s approach to caching the serving AMP pages from the google.com domain. What is worth clarifying is that the AMP page cache and the AMP HTML mobile optimization framework are separate products. A page built using AMP HTML can be privately hosted on any server, you can take advantage of all of the framework’s features without having Google host your content.

Don’t Let the Name Fool You

AMP stands for “Accelerated Mobile Pages”. In the simplest of terms, it blocks most of the elements which causes the web to load slower on mobile, like large amounts of JavaScript, third-party tracking scripts and bloated CSS. It allows content to almost instantly load. AMP was designed for cached pages, but it is now growing into a broader toolset to fix the mobile web (as the majority of users are mobile today, some site loads still can take minutes). Although the M stands for Mobile, AMP can absolutely help improve loading speeds on any device or browser type.

The Brief

In July, The AMP Project team came to us to push the limits of what’s possible in the framework, showcase its capabilities and help content creators realize how they could better use it to bring the web to life. We were essentially given free reign to use all of the tools provided by AMP to combine and implement them as we saw fit with the goal of creating an entirely new experience that had yet to be built with the framework. The sites we were to create are intended to be reused in the real world and be made accessible as free, open-source web templates at ampstart.com.

What We Built & Why

While we still had to work within strict guidelines to ensure the code was valid AMP, we aimed to come up with the craziest possible concepts within those defined boundaries.

After some brainstorming, we landed on the idea that online art galleries and museums are typically fun, abstract and don’t play by the rules when it comes to following conventional gridded web layouts. With that idea in mind we created a faux art gallery as proving grounds for redefining what was possible in AMP. We built a site that used the best of the initiative and built on its foundations. Our teams relied on the power of AMP to ensure the site was incredibly performant, while introducing new features and components into the framework including custom parallax experiences, hover states and more. We even had a little fun with the possibility of an immersive VR version done in AMP for consideration. Try our proof of concept in your phone here.

Design for Art Gallery AMP Site

Next, we thought about more commonly used experiences on the web that could benefit from AMP’s capabilities. We ended up exploring what was possible in a travel booking app, allowing users to search destinations, filter by activities, and find things dynamically; all while maintaining the speed and performance AMP is commonly known for. We sweat the details on this one in delight — pushing the AMP framework as far as we could with micro-animations and hits of personality.

Design for Travel Booking AMP Site

Who is AMP For?

Today, AMP is geared towards people on the go who are heavy into editorial style content (news and blogs on their phones) and e-commerce. Where we imagine strong adoption will take place is with sites that strive to be beyond performant or have a wide range of international audiences. Currently, the average mobile web page on a 3G connection takes roughly 19 seconds to load and almost half of the world is still running on it — this obviously needs to be improved and AMP can help. As the web continues to lean predominantly mobile, creating efficiencies here is both logical and essential. AMP can potentially provide a blueprint for improving access to information in developing countries.

Are We Living in The Future?

Not quite, but making progress daily! AMP sites found online today are still primarily media, news & editorial content (for now). The benefits are obvious, as being built on AMP provides a serious performance and discoverability boost. Is AMP and its aspirations the future of all web? Maybe. Maybe not. One thing’s for sure, the learnings and best practices the framework is helping establish are definitely here to stay. AMP is also building atop of the latest and greatest in the web in real time with rollout of its features. Its development community is constantly striving to keep up to date with new trends; proactively pulling in the web’s upcoming functionality and giving it to you today.

Development lessons based on our learnings from AMP

As it relates to developing within AMP, we learned some things along the way we thought would be valuable to share. Notable insights below:

  1. AMP forbids custom JavaScript outside of an iframe, forcing you to rely on its library of optimized code. This is done to ensure that no poorly-optimized or nefarious code has the opportunity to hinder the user experience. We notice many, otherwise well-built sites, can become slow from the inclusion of megabytes of advertising and tracking scripts. The importance of optimization and careful vetting of any JavaScript code included on your site is a very important takeaway from AMP.
  2. AMP prioritizes the content that is visible to the user. It knows what content is below the fold and defers loading or rendering it until necessary. Visitors to AMP pages will never have to wait as all of the loading images and ads block their access to the page. Additionally, if a visitor never decides to scroll down, none of their mobile data is wasted loading content that would never be seen.
  3. AMP has solved “loading jank.” On an AMP page, every element must have a deterministic known height, whether it be an ad, an image or video, or a paragraph of text. You will never experience content shifting on your screen as elements above load in.
  4. Ad performance: AMP sets the new bar for ad integration on sites. Ads must behave properly on the page and should comply with optimal user experience. Goodbye full screen takeovers and other obnoxious content you don’t want on the page. AMP enforces that ads behave like good citizens.

In Closing

This opportunity was challenging, fun and provided some fresh perspective. We were given a lot of flexibility, while at the same time had to find unconventional ways to adhere to set conditions within the AMP framework. We learned a lot more than what we thought we knew going in about AMP and uncovered some previous misconceptions. In working within the framework, we came away with an even stronger understanding of where the web is going and how it can learn from AMP. If you’re interested in building your next site within it, make sure to check our templates, which are completely open-source, free to use and downloadable at ampstart.com.

The following was posted on Medium by Konstantin Sokhan, Design Director & David Tapp, Client Partner, MetaLab. Checkout all the AMP templates on ampstart.com.