Creating a Parallel Universe with Google AMP

  • Year:
  • Tags: Google AMP,Front-end Development,Performance-driven design
Creating a Parallel Universe with Google AMP

I'm a minimalist by most accounts. Even though I am an artist and designer by trade, it gets overwhelming to watch clients make poor choices when it comes to performance-driven design. Sure, they want to make a great first impression, or god forbid a massive deck of carousel slides on their homepage, I totally get that.

Selfishly, I deride a great amount of satisfaction flexing my creative muscle to create beautiful sites for them. However, I love a fantastic minimalist design. Enter my new favorite bleeding-edge technology, Google Accelerated Mobile Pages, or 'AMP' for short. In this article I'll explain my journey through learning all about AMP technology.

First, you may find it difficult to just 'turn on' AMP technology onto an existing platform. Here's why; AMP pages are incredibly minimal, and historic content if it was created by some sort of CMS system that allows injection of any sort of inline element will need some way to parse or strip down content so it can be transferable to AMP.

AMP markdown uses its own unique tags and super-fast scripts to deliver the fastest experience possible. The language and implementation is incredibly explicit - one small thing, a carriage return in the wrong place can cause a page to fail validation - and this is for good reason. AMP pages put performance as the highest priority.

1. Routing
In order to set up an /amp solution for your site, you'll need to implement some sort of re-routing or content delivery strategy for your web application or platform software. Because /amp pages require their own template and 'parallel universe', this is necessary.
Your existing site template, whether its a .php file, .net razor view, whatever - will need a special canonical tag informing the browser that your site has a parallel amp page available. This is the 'hook' needed in the traditional site to inform of the url where the amp page can be found.

2. Parsing Old Data, or Starting Anew
If you plan on re-purposing article content, you'll need some sort of html stripper or some way to parse and translate items in your content to valid /AMP tags and data.

3. Parallel Templating
Once you have some sort of routing or CDN set up for the main site (traditional html) pages, you'll need to set up AMP-specific templates with all the necessary scripts and tags that Google requires to pass validation.

4. Sometimes, the Best Design is No Design
Just because amp pages are minimal doesn't mean they can't be designed or well-branded. There are plenty of tags available to make amp pages gorgeous. You can still embed fonts, videos, images - and amp has some javascript components that are quite nice. All the beautiful crap we all like to smear all over our websites.

5. Testing in Search Console
Search console will track any /amp pages on your site, and report if any of those pages have validation errors.

6. Setting Custom Reports in Google Analytics
Once I launched this site with /AMP pages, I also immediately set up custom reports in Google Analytics to track just /amp page traffic.

7. Helpful tools

  • Amp Chrome Extension
  • Amp Validation Tools
  • Amp Docs