How to Improve Your Website User Experience With Google AMP

 

We still don’t know how the FCC wireless spectrum auction will play out, but current limitations and tiered data plans are pushing both wireless providers and customers to the brink. Carriers have enough spectrum at the moment to keep their networks running, but bandwidth is beginning to run low — and this can negatively affect the performance of mobile devices.

This is all outside of an end user’s control, of course. So to help users gain access to more cloud-based data and encourage mobile web browsing, Google implemented its Accelerated Mobile Pages initiative to cut load times and reduce the amount of data required to provide a clean browsing experience.

AMP is a well-defined subset of existing HTML, CSS, and JavaScript technologies designed to ensure that web content can be transferred and displayed in a completely optimized fashion. Providing a consistent user experience across all devices is essential to driving both traffic and conversions while generating sustainable ROI.

Why AMP Is Important

Global publishers large and small are dedicated to distilling web content down to its essence with a single goal in mind: creating a better, faster mobile web.

To that end, implementing web content in AMP format does limit the creative design aspects of the website. In the current version of the specification, controls for typography, media management, and interactive media are limited, and this is the point. The idea is to provide content in a teaser format to pique the user’s interest, then lead him or her to the full version.

When everyone is allowed to enable sound, video, and other features — without consideration of other apps that might be running — mobile smartphones can end up frozen, as torrents of content are crammed through one door at the same time. If you’ve been working in web development long enough, the limitations imposed by AMP may seem like everything old is new again.

There will always be a market for the long-form version of your web content, and mobile iterations of it can generate interest in the full-length project.

To optimize load time, AMP places limitations on documents to reduce content size. Therefore, you cannot incorporate the following elements into an AMP document:

  • Synchronous JavaScript:Only asynchronous JavaScript may be utilized.
  • Dynamically sized images and content:Designs must not trigger layout recalculations and image resizing.
  • Optimized web fonts:Web fonts must be carefully managed to ensure an optimized user experience because loading fonts is now a blocking operation. Optimizing also requires keeping style-related resize recalculations to a minimum.
  • Animations:Animations are limited to CSS-driven transform and opacity operations.
  • Content styling:All CSS must be specified in-line, and total CSS content is limited to a max size of 50KB. This is large enough to make a sophisticated page but not an entire website.

 

How Load Time Affects UX

Study after study has shown that slow mobile sites hurt conversions. Kissmetrics found that 47 percent of consumers expect a website to load within 2 seconds, 73 percent of users have encountered a slow website, and every 1-second delay results in a 7 percent lower conversion.

Because the average small business can’t dedicate an entire team to mobile web design, AMP is completely focused on providing them with a template for a better, faster mobile web.

Mobile engagement increases web engagement, and AMP is one of the newest paradigms for providing an exceptional user experience. Most users only wait 6-10 seconds before abandoning a website. In the wake of Mobilegeddon, AMP places performance above all else by setting a standard for all websites to adhere to in order to prevent problems moving forward.

Making AMP Work With Your Design

All of this rolls neatly up into SEO. AMP is just one more process meant to increase organic search traffic, the holy grail of sustainable web traffic. It’s another tool to support your content marketing strategy. By proactively adapting your mobile initiatives to align with Google’s new direction, you can elevate content without throwing money at pay-per-click campaigns.

To implement AMP into your web design and increase organic search traffic for both mobile and desktop, keep these seven simple steps in mind:

  1. Read the AMP documentation to understand the constraints of AMP HTML, and focus on how to strike the best balance between development and the user experience. Design controls are limited, so this is likely a development-first exercise.
  2. Get sample AMP projects or librariesvia the AMP Project on GitHub, and study the three parts of the AMP ecosystem: AMP HTML, AMP JS, and Google AMP Cache. Using this knowledge, update your CMS to support AMP HTML page templates and deliver content in AMP format.
  3. Build your first AMP HTML page.To boost SEO rankings, AMP-formatted content may be highlighted in unique ways. Here’s a great side-by-side example of an AMP and a non-AMP webpage.
  4. Validate your AMP pageusing the AMP validator that comes bundled with the AMP JS library.
  5. Configure analyticsfor measuring traffic and user interaction.
  6. Publish your page!
  7. Test, test, and test again.A/B testing should be performed constantly to ensure everything is always running smoothly. Involve everyone in marketing in the testing.

 

Averting Mobilegeddon 2

Like every sequel, the next Mobilgeddon will feature a much bigger, much badder monster.

As adoption of AMP increases, websites providing AMP-formatted content will position higher in mobile — and eventually in all search rankings. Instead of watching Google knock your site down in search rankings, you will see it climb by using AMP to serve key content pages.

Web designers know that a speedy load time is the goal of any web project, and optimizing for mobile is the best way to ensure this. Think of your desktop or mobile experience as the main course and each AMP page as just a sample — an appetizer meant to lure visitors in with a promise of more satisfying content to come.

Maintaining a consistent voice across both platforms is achievable as long as you familiarize yourself with Google’s AMP tool kit. Clearly, 2016 is going to be the year of Google AMP, and web designers who prepare for it will have a leg up on the competition.