What Does the Accelerated Mobile Pages Project Mean for Web Design?

You can see Google's demo of AMP on its blog by clicking this image.

The Accelerated Mobile Pages (AMP) Project is a Google-backed venture that promises to bring faster loading times to the portable devices in our lives. Facebook and Apple are already exploring similar technology and Google’s venture into AMP rounds up the tech giants that dominate the web.

Which means faster web pages will be coming to a mobile device near you soon (if not already). More importantly, that means faster loading times will be coming to your clients’ audiences, which gives you some extra room to flex your creative muscles as a designer.

 

What are Accelerated Mobile Pages?

The Accelerated Mobile Pages Project is an open source initiative to bring a faster mobile web to everyone. The aim is to have mobile content load on smartphones and other teeny devices in an instant, allowing publishers, designers and users alike worry less about loading times.

The magic happens in what’s being called AMP HTML and you can see a quick tutorial on GitHub via the AMP Project website. The basic markup looks like this:

amp-tut

What this essentially does is tap into caches created by the likes of Google and other providers. Pretty simple in principle, but the end result will mean a faster mobile web and less constraints on your design projects.

 

How big is AMP going to be?

Of course, AMP will only really take off if the big publishers buy into it and set the trend rolling. So who’s involved in the Accelerated Mobile Page Project already? Here are a few names to give you an idea:

Accelerated Mobile Pages Project Names

 

So it turns out a lot of publishers like the idea of their content loading up instantly on mobile. Go figure.

And that’s just a small sample of the names already using AMP HTML – not to mention the BBC, The Telegraph, The Wall Street Journal, The Washington Post and many more. And then we have the tech giants already invested – including Twitter, WordPress, Pinterest, LinkedIn and, of course, Google.

Speaking of WordPress, what about all your clients who want the power of CMS to publish their own content? They’re probably not going to want to ply their hands at AMP HTML. But that’s the beauty of the open web – there’s already a WordPress plugin available that allows users to automatically publish their content in standard HTML and the faster AML equivalent.

This is still a new project too, so you can expect a whole hoard of new plugins, support and other tools to come into the fray over the coming months and years.

 

Okay, so what does this mean for your design projects?

The biggest obstacle in your way as a designer is creating smooth user experiences across multiple devices. And, aside from the core design elements, page load is the biggest factor dragging down mobile performance.

All those fancy JavaScript animations and effects are killing the mobile experience. Your best option is to typically disable them for mobile and wait for devices with more firepower before you throw complex scripts at their browsers and limited connections.

This is hardly a perfect solution either, of course. Devices of all sizes can be limited by weak connections and there are numerous powerhouse tablets like the iPad Pro taking their place on the consumer market. Screen size is no longer an accurate gauge of a device’s hardware or browser capabilities. We’re at a point where a new solution or approach is very much needed and AMP is a huge step in the right direction.

 

So will AMP solve all our JS worries?

No it won’t, I’m afraid. In fact, Accelerated Mobile Pages don’t play particularly well with JavaScript (or rather its JS that makes the poor play). So don’t hold your breath on AMP bringing complex scrolling effects and fancy animation to smartphones anytime soon.

So you may be asking yourself what the big deal is at this point. Well, it may not surprise you to learn that ads play a fairly large role given Google’s heavy involvement in the project.

Accelerated Mobile Pages - Google Demo

You can see Google’s demo of AMP on its blog by clicking this image.

That’s right, Google’s key stream of income is a killer for loading times (oh, the hypocrisy!) and faster ad serving is high on the list of problems AMP aims to solve. Then you have all those analytics codes serious websites use to measure performance – all of which contribute to the snail-paced loading times on mobile.

And, of course, we can’t forget content provided by publishers. Think what all those image list articles on BuzzFeed mean for loading times without something like AMP speeding up the process.

 

AMP frees up some vital milliseconds

At the very least, AMP frees up some vital milliseconds that could save your clients losing traffic due to slow loading times. But for visually content heavy sites you could be talking seconds, not milliseconds and that’s a huge deal for you and your clients alike.

And even if you’re already using image sprites and optimising your visuals for mobile, you should still see a drastic improvement. And, yes, that could be enough to justify an extra touch of JavaScript or some additional visuals – just remember AMP is designed to make pages faster, not clear space for you to fill up with bells and whistles.

That doesn’t mean you can’t enjoy a bit of freedom if you think visually heavy clients have enough to gain from AMP. Magazine style sites with plenty of images, social plugins and other HTML muscle could have a lot to gain from AMP and potentially give you room to explore more complex solutions elsewhere.

 

If you’re hot on mobile optimisation, you’ll love AMP

So who will be the winners from the transition to AMP? Well, hopefully the users; that’s the whole point, after all. Then, of course, the likes of Google – who’ll get their ads in front of more faces – are in line for a nice financial boost. Next up we have your clients, who can hope to have their content enjoyed by more people, resulting in lower bounce rates, improved engagement metrics and hopefully a higher conversion rate.

As for you, the designer, AMP is a major win if you take your mobile optimisation seriously. We’re not simply talking responsive design here, but performance on devices with weaker processing power, limited browser capabilities and patchy connections. If that sounds like you, you’ll understand how every millisecond counts when it comes to loading times.

So AMP makes a fine addition to minifying your JS and CSS files, minimising server requests and optimising your content for mobile. More importantly, though (if you really take performance seriously), it counters some of the lag analytics code can bring to page speed – a tragic irony of website optimisation.