Beyond the Hype: The CEO’s Real-World Guide to AI
Dive deeper into this topic with our insight: Beyond the Hype: The CEO’s Real-World Guide to AI.
How we amplified our campaign with AMP
Written by RazorHow we used AMP to make our latest campaign ⚡️ fast!
What is AMP?
AMP stands for Accelerated Mobile Pages and is an open source project from Google and Twitter designed to make super speedy mobile pages.
AMP is fast because it is essentially a stripped down version of HTML where certain tags are not able to be used. Some tags such as <img>, <video> and <audio> are replaced with AMP specific tags that make common patterns easy to implement in a more performant way.
You can’t reference external stylesheets so CSS must be included directly in the <head> (with the exception of custom fonts), and it has to be under 50kb. All styles have to be within a <style amp-custom> tag. Inline styles are not allowed and neither is use of !important. AMP also limits CSS animations to GPU animations only (transform and opacity) for speed.
Resource loading is also prioritised. For example, images will only be downloaded when the user gets far enough down the page to see them. Content above the fold is pre-rendered and downloaded in an instant.
While third-party JS is allowed in iframes, it cannot block rendering. Author-written JavaScript is not allowed and instead, we can use AMP scripts which are asynchronous and are designed for performance. Scripts include Google Analytics, Facebook, Twitter, YouTube, collapsable sidebar navigation, carousels, and many more.
Why did we decide to use AMP?
To put it simply, we wanted our campaign to be lightening fast ⚡️ The campaign we use it on is our bucket campaign. We wanted this page to be super fast because we needed to practise what we were preaching. The idea behind this campaign is to highlight the holes in a business that allow customers to leak out, but tend to be ignored because they’re focussing too much on customer acquisition. One of the more commonly occurring holes is the speed of digital platforms.
The AMP approach meant that we had to really think about the content we wanted to present and get our message across in a concise and simple way.
Some considerations we had to make along the way included:
- How we would animate the splashes on the bucket animations, without CSS (we used animated gifs as backgrounds on pseudo elements).
- We needed the navigation to be as consistent as possible with the navigation used on our main website but had to use AMP’s sidebar to achieve it. We styled it up as close to the original as possible so that it wasn’t jarring for our users.
- We had to limit content in various places on the page as we couldn’t use solutions like carousels that would have worked well with our content. AMP does include carousels but they didn’t work well in this case.
How to use AMP
The first step of creating an AMP page is to use AMP’s required markup. You must start with the <!doctype html> doctype and include a top-level <html ⚡> or <html amp> tag to identify the page as AMP content.
You must also define the encoding for the page as the first child of the <head> tag using <meta charset="utf-8">. Include the AMP JS library with <script async src="https://cdn.ampproject.org/v0.js"></script> as the second child.
We then have to include <link rel="canonical" href="$SOME_URL"> inside our <head> that points to either a regular HTML version of the page or to itself.
And the last step is to specify a responsive viewport with <meta name="viewport" content="width=device-width,minimum-scale=1">, it’s also recommended to include initial-scale=1. Pretty simple right?
AMPing up your content is just as easy and the AMP project has great documentation to follow. You can have a super fast, AMP powered page set up in no time.
Is AMP right for my project?
Maybe, maybe not. Whilst AMP powered pages are fast and they force the designer/developer to think about content, layout and UX, it also makes it harder to create non-boring, non-cookie cutter layouts.
It all depends on what your content is. If it’s a simple marketing campaign, or a news article where you only have to worry about people reading the content on a mobile device, then it’s perfect. If you want to show off your smart CSS animations though, it isn’t going to be suitable. You don’t need to rewrite your homepage in AMP but if you want to give it a go, a good place to start could be your blog posts.
Diving deeper into Razor
Your Next Move
