AMP introduction

To make use of AMP I would highly recommend to read up on the documentation. This page will only tell you how to get started but doesn't go to deep into the documentation. This is because AMP still still in development.

Since the usage of JavaScript files is prohibited for AMP a lot of components won't work. For now the main reasons for using AMP with SMaterial would be the following: The stylesheet smaterial-amp.css is about 1/3 the size of the normal stylesheet. The reason for this is that all of the media queries that don't belong to mobile have been removed. Second a few of the now not working and not much used components have been turned off by default. This stylesheet can of course be used without AMP if you just develop for mobile.

Setup

To get started with AMP you can start by using the following template. Note that there a couple of elements required. Lets start from the top.

In the <html amp lang="en"> tag the amp attribute is required.

in the <head> tag there are a lot more required elements. The <meta charset="utf-8"> tag is quite standard to have but not for everyone however it is required for AMP.

Then the AMP script is loaded by using <script async src="https://cdn.ampproject.org/v0.js"></script>. The async attribute tells HTML that the script is loaded independent from the page.

To let a search engine know which page is the default and which is made for AMP you have to use a canonical and amphtml link. In the canonical page use the AMP link like: <link rel="amphtml" href="http://example.ampproject.org/article-metadata.html">. The AMP page isn't the same url as the canonical page. For example with PHP you're able to add a GET variable to hint that it's a AMP page. In the AMP page refer back to the canonical page like: <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">

In the viewport you need to add minimum-scale=1 to the content attribute.

The script there are several things happening that need attention. For a list of all possibilities for the type please have a look at schema.org. The headline, datePublished and logo basically will tell a search engine how it should show your page. Therefor the headline can be the same as your <title> tag.

The <style amp-boilerplate> is some default styling provided by AMP. The same goes for whats inside the <noscript> tag. The <noscript> tag is what gets loaded when JavaScript is disabled.

		
<!doctype html>
<html amp lang="en">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <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>
</head>
<body>
  <h1>Welcome to the mobile web</h1>
</body>
</html>
		
	

Since SMaterial is made with SCSS it's fairly simple to add AMP to your website. All you need to do is add smaterial-amp.css to your page. Right after the <noscript> you can add the following tag: <style amp-custom>. Inside this tag you have to put the contents of smaterial-amp.css so don't refer to it like you would with a normal stylesheet. With PHP it is quite easy to add the contents inside the tag. If you don't use PHP you would have to copy paste it in there.

		
<style amp-custom>
<?php require_once './stylesheets/smaterial-amp.css'; ?>
</style>
		
	

Testing

To test a AMP page you can simply add #development=1 at the end of your url. Another useful url would be AMP-test.