How to Guarantee Your Landing Pages are AMP Compliant

When the Accelerated Mobile Pages (AMP) project began, it was restricted mostly to static content. The bare-bones framework helped mostly publishers, allowing them a way to build a faster, seamless discovery and consumption experience for readers.

Years later, though, much has changed. AMP’s one-dimensional beginnings are replaced by an evolved toolset capable of building entire websites. When it comes to launching these versatile, quick-loading experiences, AMP’s main goal has remained the same: Make the mobile web faster.

But, the way that’s achieved is different. With workarounds and advanced techniques, designers have found ways to meet AMPs constraints while creating pages that, to the casual user, don’t look or feel constrained at all.

With ever-changing updates and design tactics, what should a designer, today, expect when attempting to meet AMP compliance standards?

7 Design principles of AMP compliant pages

While much of what AMP can do has changed, the design principles guiding its developers haven’t. According to the AMP website, to create AMP compliant pages, you’ll have to follow these seven pillars when designing within the framework:

1. User Experience > Developer Experience > Ease of Implementation

While AMP is an open-source project, it was initiated by Google. And, like all things Google, user experience is the priority. “When in doubt,” say the AMP creators, “do what’s best for the end user experience, even if it means that it’s harder for the page creator to build or for the library developer to implement.”

2. Only do things if they can be made fast

As an open-source project, designers can make AMP their own. But, the ultimate goal of accelerated mobile pages is acceleration. Customization is fair game, and expected, but only in the name of speed. AMP creators warn: “Don’t introduce components or features to AMP that can’t reliably run at 60fps or hinder the instant load experience on today’s most common mobile devices.”

3. Don’t design for a hypothetical faster future browser

AMP creators like their framework the way web users like their pages: now. The platform was made to perform on today’s mobile web, not tomorrow’s. So designers should be building with that in mind, not a hypothetical browser that works at mach speeds.

At the same time, today’s developers shape the future of AMP. So, just because you can’t make something work now doesn’t mean you won’t want to someday. That’s why it’s important, AMP creators say, for AMP developers to “participate in standards development” to get optimizations available to AMP in the future.

4. Don’t break the web

Ensuring a great user experience at all times means preparing for worst-case scenarios. In the case of AMP, that could come in the form of the AMP Cache going down, or APIs failing. Should any of it happen, consumption of your content should only “gracefully degrade.” If your content works with an AMP cache, it should work without it, too.

5. Prioritize things that improve the user experience – but compromise when needed

While, in most cases, a faster page load means better user experience, it doesn’t always. And, AMP-ing something shouldn’t inhibit the user. There’s a balance, and user experience always wins out. According to AMP’s website: “Only compromise when lack of support for something would stop AMP from being widely used and deployed.”

6. Solve problems on the right layer

Solving a problem with AMP isn’t about what’s easiest for the developer to implement, but what’s best for the end user. Unfortunately, these two don’t always coincide. For example, if something is easier integrated on the client side, don’t simply implement if the user will benefit from a server-side integration. With an emphasis on UX, issues should be resolved in the right layer.

7. No whitelists

The framework doesn’t support whitelisting. So, if you’re looking for special treatment, you won’t find it in AMP for any site, domain, or origin, with one exception, say creators:
when it’s “needed for security or performance reasons.”

How to check for AMP compliance

You might think the greatest strength of AMP pages is their speed. Not so, say its creators. It’s not just the speed that makes AMP so appealing, but its ability to be validated. That way, third parties, like social networks, can feel comfortable sending users there with the knowledge they’ll get a fast and seamless post-click landing page.

To answer the question, “Are my pages AMP compliant?”, there are four methods. Three are offered by Google on a pass/fail basis using its validator. The AMP validator will help you uncover any issues with your pages before launch. In the end, passing is what gives them AMP compliance, signaling to third parties they can expect a fast user experience from your page.

Browser Developer Console

To uncover issues with your AMP pages using the Browser Developer Console, follow these three steps:

1. Open your AMP page in your web browser
2. Add “#development=1” to the end of the URL
3. Open your browser developer console to check for validation errors

Any error preventing your page from AMP compliance will look similar to this:

Web interface

Using the web interface to determine AMP compliance is easy. First navigate to the interface. Then, just enter your source code into its “URL” field, and lastly, click the validate button.

Errors found with this method will look a little different. As shown below, they’ll appear next to the HTML source of the page:

Browser extension

Easiest of all three, this validator sits right in your toolbar in the form of a nifty Chrome extension. Without effort on your part, the extension validates whatever AMP page you happen to be on. And its status will indicate with one of three colored icons.

• A blue icon means the page you’re on isn’t AMP, but that there’s an AMP version of it. If you click the icon, the browser will take you to the accelerated mobile version.
• A red icon means there’s an error on this page, and a number will show beside that icon, indicating exactly how many there are.
• A green icon means there are no errors on the current AMP page. However, there may be warnings. If there are, a number will appear next to that icon detailing exactly how many.

All three make catching errors in AMP pages easy before publishing. The fourth option isn’t offered by Google, but by Instapage, for creators attempting to build a fast post-click landing page. Here’s how to use it when building an AMP post-click landing page:

How to create an AMP post-click landing page with Instapage

Reading those compliance standards, you might shudder with confusion. Luckily, with Instapage, building an AMP post-click landing page is simple. Users can simply follow these steps:

1: Create a new page

When you start to create your new page, click “AMP Page” when prompted:

To users, the next step may appear unfamiliar, because, normally, the builder asks which template you’d like to use. While Instapage offers hundreds of conversion-proven templates for non-AMP pages, AMP pages are built from scratch. As such, template options do not currently exist for AMP pages.

Step 2: Add elements to the page

If you’re a regular Instapage user, you’ll also notice that the Timer and HTML widgets are not in the toolbar. All other icons and their capabilities will be available for you to build your page with, though:

Additionally, since AMP restricts CSS and JavaScript, these usual options are withheld from the builder. What you’ll see instead is the following:

Adjust background, fonts, SEO, and all you see above. Do it yourself, or collaborate with your team using the Instapage Collaboration Solution. Then, even save your page components as Instablocks™ to insert into other pages. (Note: While Instablocks and the Collaboration Solution work with the AMP builder, Global Blocks and heatmaps don’t currently.)

As you add widgets, you’ll notice the weight of the page increasing. Each AMP post-click landing page has a 75KB weight limit, and the Instapage AMP validator ensures you don’t exceed it. When you’ve reached 80% of your design limit, a warning will appear, like this, at the bottom of the screen:

Step 3: Validate the page

If you continue building beyond the AMP weight limit, a warning window will appear the again to let you know. It will prompt you to validate the page to confirm:

If your page comes in under the weight limit, passing validation, these notifications will appear on your screen:

Step 4: Publish

Once your page is designed and ready to publish, simply click “Publish.” If you’re still over the weight limit, this warning will appear:

Go back to your page and attempt to slim it down by removing content. Remember that the greatest contributors to weight, research has shown, are usually images. When you’re ready, hit publish again. Obviously, if you see the message again, you’ll need to cut your page down further.

If you don’t see that message, you’re ready to publish your page, and you’ll be prompted to enter your subdomain and domain after you hit the “publish” button.

The live page will look like this in your dashboard, with the lightning bolt AMP logo next to its name:

Click on it at any time to return to it, where you can edit, run an A/B test, gather reports, and more.

Start building AMP compliant post-click landing pages

More than just speed, it’s compliance that makes AMP post-click landing pages so powerful. By adhering to the framework’s design principles, you ensure that third parties can count on an optimized mobile experience to direct traffic to.

Ready to build a fast and compliant AMP post-click landing page? Get a customized AMP demo here.