Google Accelerated Mobile Pages (AMP) is a product by Google aimed at publishers with the intention of speeding up the delivery of their articles. For the last couple of weeks we’ve been working on numerous improvements to the Alaska Dispatch News website to eliminate roadblocks in an effort to make it AMP compliant.
AMP uses AMP-HTML which is regular HTML with a few differences. Certain elements require
SASS and AMP
In a previous post I discussed how we took some steps to re-arrange the sites CSS so it was better organized with a reduced footprint. With the introduction of AMP it was necessary to make further changes. AMP has a number of CSS restrictions such as the use of
* (Universal Selectors) and
:not() which opposed some issues for us as we occasionally use these declarations. The easiest solution we found to this problem was to use CSS partials.
In most cases each site feature has its own
style.scss file. For AMP compliant features we created a partials folder and placed all critical styles within their own contextual scss file, for example
partials/_base.scss. We deemed critical styles to be things such as colors, typography and anything that gives that specific element its overall look and feel. The revised component structure looks something like this:
You’ll notice we also created a second SASS file called
amp.scss. In here we import
partials/_headline.scss with any supporting AMP specific styles within it. These are sometimes necessary as the AMP site doesn’t use a framework.
We also extended this process site-wide for our global styles. This setup easily gives us the ability to maintain two front-ends while keeping our CSS file size within the 50KB limit that AMP places.
amp-ad component requires you to specify a few small details regarding the unit you want to serve and your DFP account, and in return it will display the advert. We were already using a jQuery API wrapper for DFP built by Matt Cooper which does something very similar to this already. So in our case we went from this for our regular page:
To something like this using
Google has already extended this library so it’s not just for AMP. This is something we’ll be looking into possibly utilizing after the new year.
Now that the AMP compliant version of Alaska Dispatch News is nearing completion it needs some heavy QA testing before it goes live. Seeing as the reporters upload many different types of articles it’s important to check for more obscure content to see how it handles AMP. There’s many ways to debug AMP including an online validator tool, or by appending
#development=1 and using the developer console. If you’re using something like Gulp you can also extend your setup to use the command line tools.
Going forward into the future we’ve discussed utilizing a process called “Amping Up” which is explained in the following video that allows you to seamlessly move a user from your AMP site to a Progressive Web App. Although we’re going to take one step at a time and see how this works first.
If you’re interested in some more reading you can check out an article by Ryan Collins regarding a React/Redux project I contributed to for the Udacity Alumni.
Happy New Year
I just wanted to take this opportunity to wish everyone a Happy New Year. I’ve been spending the Christmas season with my family in the UK and it has been wonderful.