AMP Design Functionality: What Else is Possible with the Framework?

Though it’s reached impressive levels of design complexity, still, some view AMP as a limited framework. In their defense, AMP styling began with the focus of limiting pages to improve load speed. And, while speed has remained its ultimate goal, design limitations have become far fewer.

No longer are designers restricted to publishing static content with AMP. Today, it’s a versatile framework supportive of robust design. If you wrote it off long ago as a rigid and bare-bones framework not worth your time, this compilation may compel you to rethink your stance.

9 AMP design capabilities you may not know

(For more details on the possibilities with AMP, join us in the upcoming webinar as we discuss common misconceptions about AMP. Get all your AMP questions answered by an expert spearheading the AMP Project.)

1. Build a progressive web app (PWA)

While the mobile web has come a long way, it still has a long way to go. Reports show that, while the top 1,000 mobile websites reach 4x more people than the top 1,000 mobile apps, they engage users for 20x fewer minutes. Mobile sites are attracting visitors, but they can’t provide the intuitive usability of a native app. This is where progressive web apps come in.

Progressive web apps attempt to solve the usability problem by offering a hybrid experience that gets users to a mobile site, and prompts them to download an icon that lives on their home screen like a native app. When opened, the experience is designed to look and behave the way native mobile apps do.

Combined with AMP, these PWAs can be kicked into high speed. Here are a few ways you can use them together:

AMP as PWA

If your progressive web app doesn’t need full use of coding languages restricted by AMP, the framework can provide everything you need to create your own PWA. In fact, “AMP by Example” is a working showcase of the combination:

AMP in PWA

AMP and PWAs aren’t all or nothing. It’s not as if you can’t use an AMP layout for some of your PWA, but not all. If you find your progressive web app can’t operate under AMP CSS coding restrictions, you can use a form of the framework called “Shadow AMP.” This allows AMP to nest within other sections of your website, so you’re able to AMP what you want and not what you don’t.

AMP to PWA

Even if you don’t think your PWA can operate under AMP’s restrictions, you can still use AMP styling to attract users to it. With AMP’s visibility boost in search engines, it makes publishing news and blog posts with the framework a no-brainer. When they click through to your AMP page, visitors will then be prompted to download your PWA.

2. To create a checkout page

While AMP is still working on enabling a wider variety of transactions, you can now accept payments on AMP-designed pages. With simple forms, collect details necessary for payment like name, address, credit card details, and even accept promotional codes:

The next big priority for the AMP team will be a “more robust” payment component for users. In their product roadmap, they write:

AMP currently supports transactions in only limited contexts like via amp-iframe w/ the Payment Request API -- however this omits many important use cases. This activity would implement a more robust payment component in AMP, potentially including integrations with third-party payment processors, widgets, wallets, etc (these should be supported somehow regardless).

3. To build a comment section

When done right, a comment section can be the source of productive discussion, content ideas, and even leads. And now, with AMP, designers can create a comment section where users can engage in that discussion, and even require login, which allows users to discuss in a more personal manner:

4. AMP Stories

If you’ve seen Snapchat, Instagram, or Facebook stories, AMP stories will look very familiar. According to Rudy Galfi, Product Manager for AMP at Google, AMP stories offer publishers “a mobile-focused format for delivering news and information as visually rich, tap-through stories:”

According to Galfi, publishers like CNN, Conde Nast, Hearst, Mashable, Meredith, Mic, Vox Media, and The Washington Post have been involved in the early development of the format. Now, it’s available to all users, and as far as discoverability goes, you can find AMP stories in Google Images, Discover, Search, and News.

Here’s an example of what seeing one might look like:

5. Get additional visibility in Bing

In a recent blog post, Fabrice Canel, Principal Program Manager at Bing, announced a new feature for the company’s search engine:

In 2016, Bing joined the Accelerated Mobile Pages (AMP for short) open-source effort to help you “find” and “do” searches faster, regardless of where you are and on any device when you are looking for information. Today, we are pleased to announce the release of Bing AMP viewer and Bing AMP Cache enabling AMP-enabled web pages to work directly from Bing’s mobile search results allowing Bing to provide faster mobile experiences to Bing users.

This viewer looks similar to Google’s — a carousel featuring images with lightning bolts to indicate AMP-enabled content:

Now, in addition to search engine traffic from Google, AMP users can expect priority real estate on Bing’s search engine results pages.

6. Create scroll-bound effects

A lot of the time, scroll-bound effects get in the way of user experience. They’re engaging, but not in the way you want them to be. They distract from a page’s main content and can add a lot of page weight depending on the effect’s implementation.

Sometimes, though, a page’s goal content (what you absolutely want your visitor to consume) is the imagery to which you’re adding effects. Take a freelancer’s online portfolio, for example, or a web development agency’s website. In this case, the effects demonstrate the ability of the designer.

However, should that design not be implemented soundly, it can add to the weight of the page, which makes it slower to load and less likely a prospect sticks around. To solve that problem, you can combine amp-position-observer with amp-animation to create a number of engaging but quick-loading effects:

Scroll-bound animation

Scroll-bound animation can bring images to life as a user scrolls through your page. Take this fidget spinner built with AMP, for example, which spins as the user scrolls.

Fade & slide transitions

With fade and slide transitions, you can combine timebound and scrollbound effects for time-sensitive transitions. For example, you can create an effect in which text slides onto an image when that image is within full view user. And with the fade effect, you can fade that image in as the user approaches it, and fade it out as the user scrolls away. See it in action here.

Carousel

A transition effect can also be used with AMP carousel:

In the above example, the image of the river is partly hidden. But, with a scrollbound effect added, it will snap to the left in full view when the user scrolls to it, suggesting that it is horizontally scrollable.

Parallax windows

By defining a break window that is smaller than the image, you can create parallax effect:

This window is smaller than the image, and as the user scrolls, the window moves downward, revealing the rest of the elephant in the image.

7. AMPlify your email

You know about speeding up web pages, but what about email? AMP for email looks to bring the same speed and usability of AMP pages to Gmail. Allowing developers to send emails as AMP documents, the potential of AMP for email is its ability to create a rich experience for users.

Aakash Sahney, Product Manager at Gmail and Chat, says the new AMP for email spec will be “a powerful way for developers to create more engaging, interactive, and actionable email experiences.” With it, users can complete tasks through Gmail, like RSVP to an event, book an appointment, or fill out a questionnaire, to name a few.

Pinterest, Booking.com, and Doodle are among the first to test the AMP for email spec:

The AMP for email spec is available today, but only with developer preview access through signup here.

8. To easily create high-speed landing pages

When it comes to boosting conversion rates, optimizing the landing page should be a priority. But, creating a landing page for every promotion, AMP or not, can quickly drain a team’s resources. That’s why we created AMP functionality in the Instapage builder:

Now you can create AMP landing pages at lightning speed which load at lightning speed. Simply drag and drop elements, click to edit, and save any element to add to future pages.

As you build, you’ll be notified if you approach exceeding AMP’s page weight limit of 75kb. When you reach 80% of the limit, this warning indicator appears near the bottom of the screen:

If it doesn’t, you’re clear to publish to WordPress or your own custom domain:

9. To optimize your landing pages

Creating a great AMP landing page is one thing, but improving it is something entirely different. When it comes to discovering ways to boost the conversion rate of your AMP landing page, a great place to start is with A/B testing.

A/B testing involves testing an original page, called the control, against an alternate page, called the variation. In very basic terms, the winner after equal traffic is driven to each is the better page (for a more detailed explanation, see the Instapage A/B testing guide).
It seems easy in theory, but it’s certainly not. It takes knowledge of testing design, validity threats, software, and more. And what’s especially tough is that every test you run, you need to create at least one totally new page for.

Fortunately, Instapage allows you to duplicate your AMP landing page with a click:

Simply select “Create A/B Test,” then “New Variation,” and you’ll duplicate your page and edit from there, or completely start over and import saved text blocks, image blocks, widgets, and more using the “Instablocks” feature. Then, run your test, and implement the winning design.

Get more in the Google AMP webinar

AMP adoption is only growing. Now, more than 31 million domains have created over 5 billion AMP pages. And according to an intercontinental study by WPengine, 99% of users see the benefits of using AMP for their organization.

AMP is no longer a restricted bare-bones framework. Today, it’s capable of building entire websites that load instantly. And, with plans on the horizon to create a more robust payment system, additional effects, and a Google Play Integration, it’s only becoming more powerful.

Think you know AMP? Learn more about the myths of the framework with Instapage and creator, Google, in our exclusive webinar. Then, get a custom AMP demo here and see how easy it is to create lightning-fast AMP pages.