AMP - Make the Web Great Again.

Steven Minert
Ninetyfor
Published in
4 min readFeb 18, 2017

--

“The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.” -ampproject.org

Rather than being an aggregation platform with a standalone service, Google has taken a different approach to digital publishing. The Accelerated Mobile Pages Project gives readers fast, built for mobile content right in the browser along with their Google search results.

In today’s world everyone uses google. Its a fact. It’s no wonder that the first response to any question could be “Just Google it.” and at your fingertips are a whole slew of responses. Google prides itself on providing the best content for user searches and with screens all but glued to the insides of our palms we need results to be fast and ready for easy dissemination. How often while searching do you run into a clunky site that may even be “responsive” and still either takes way too long to load, behaves terribly, or is so overrun with advertising that you move on before engaging the content? 40% of people will wait no more than 3 seconds before abandoning a website (source). This is where AMP steps on. Rather than being an aggregation platform with a standalone service, or serving up a page that has been “optimized” for mobile, AMP pages are pages in a website that have been made only for in-browser viewing on mobile devices. Websites can redirect their own mobile traffic from responsive versions of articles to their AMP counterparts.

Because AMP is an open source project it is available for anyone willing to invest the time to learn and develop AMP documents for your site. They give the same tools to small publishers that they do to the big ones. Typically you might consider news sites would be a prime adopter for AMP pages but the implementation can go much further. Everything from recipe websites to commerce can take advantage of what AMP is offering.

So if it’s not an app and it’s not a website, how does it work?

Finding AMP in the wild is simple. Grab your nearest phone and google the topic of your choosing. In the spirit of making things great again, I searched “Trump” to see what results I would get. The first thing displayed in the results is little thumbnail images and headlines. It is only when looking closer that we see that these thumbnails are actually AMP pages (indicated by the icon and text). Upon tapping an interesting article up pops the article for reading pleasure. Now this is where AMP differs from most platforms. Instead of opening a new site you will notice that the address is still Google. This is due to the AMP opening within search results. Because it opens in google they are able to add functionality otherwise unavailable. Once within an AMP page if you swipe either left or right you can view the other AMP pages from your search (the other thumbnails). Or if you want to view the complete page on the publishers site you can click the link icon and its subsequent address to be directed to the hosts mobile non-AMP page.

The little lightning bolt in the corner indicates and AMP article. Many readers often interact with AMP media without even knowing.

AMP has made an incredible fast system for mobile devices, more specifically phones. When trying the “Trump” search on iPad mini we get much the same thumbnails in search results but without the AMP icon. It is quickly obvious after the page loads that it is not an AMP page at all but the publishers responsive site. So while AMP claims functionality for mobile devices I would be interesting to see why it isn’t really so…

Now we know a little about AMP, how is it built?

In order to increase speed AMP created and modified a set of HTML tags that have been calculated to remove bulky tags and create a better mobile experience. That being said, they are not just responsive versions of desktop websites. AMP documents are specifically designed from the beginning to work well in mobile environments.

They do this by cutting out a lot of the “fluff” that tends to bogs down mobile sites and have set up specific rules to building AMP documents. All styling is done with an inline style sheet and is limited to 50KB. Externally loaded resources must have specified width, height, and layout properties. Fonts must be loaded with a link tag (from whitelisted font providers) or CSS @font-face ruling. No user-written javascript is allowed within the AMP document. This may sound restrictive to many but if you think about it, it makes sense. In order to accelerate mobile pages at the speeds users want, some things need to go.

For more documentation and implementation guide look here.

Now, let’s address the Google of it.

Yes, AMP is created by google. Yes, it is built to work in their search engine, and while they say they don’t give priority to AMP pages they really do. They say it is for the good of the web, but we know what is good for the web is just good for Google. What may seem like a Google self-serving tool is probably just that. However, we cannot discard the fact that a HUGE percentage of the world’s population uses Google as a primary source of information. If google is providing a better tool to access new and existing users in a native application that they already use I don’t think it is something to be ignored and may be worth investing in.

--

--

Steven Minert
Ninetyfor

A multi-disciplinary designer focused on Visual and UX.