Accelerated Mobile Pages (AMP)

Google recently introduced Accelerated Mobile Pages and really put the pedal to the metal. They changed a lot and stripped a lot. Javascript is basically gone and you are left with very few tools to enhance your page. Think 1995 HTML class. All you need to do is make an AMP readable copy of all your pages. Word is that your pages will load up to 90% faster, but, these days, who wouldn’t go for a change of 20%?

The steps you need to take are:

<!doctype html>

<html amp lang=”en”>

<head>

<meta charset=”utf-8″>

<title>Hello, AMPs</title>

<link rel=”canonical” href=”http://example.ampproject.org/article-metadata.html” />

<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

<script type=”application/ld+json”>

{

“@context”: “http://schema.org”,

“@type”: “NewsArticle”,

“headline”: “Open-source framework for publishing content”,

“datePublished”: “2015-10-07T12:02:41Z”,

“image”: [

“logo.jpg”

]

}

</script>

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

<script async src=”https://cdn.ampproject.org/v0.js”></script>

</head>

<body>

<h1>Welcome to the mobile web</h1>

</body>

</html>

 

  • Get your meta data right to make sure your site is accessible to your target audience.
  • Add images and style the page
  • You’ll probably want to keep 2 versions of your pages so make canonical links on your AMP page.
  • Publish

Here is a before and after of a page in amp

BEFORE

http://www.winzyweb.com/2016/01/26/web-design-for-artists-1

AFTER

http://www.winzyweb.com/2016/01/26/web-design-for-artists-1/amp/
It is a much simpler and much faster page. What do you think?

Here at Winzyweb we can convert all your pages into Accelerated Mobile Pages, contact us today.

 

 

[li_updates]

 

[li_profile]

Are you ready for a new website?

Yes, let's start!