Tuesday, 12 January, 2016 UTC
Summary
In October, Google announced a new open source project called Accelerated Mobile Pages, which aims to dramatically improve the performance of the mobile web.
Why it is important?
Well, one look at the history of these posts will prove you that there is a real need for speed!
The project relies on AMP HTML, a new open framework built entirely out of existing web technologies, which allows websites to build light-weight web pages.
Why it is important?
Well, one look at the history of these posts will prove you that there is a real need for speed!
The project relies on AMP HTML, a new open framework built entirely out of existing web technologies, which allows websites to build light-weight web pages.
The basic ‘hello world’ version of your HTML page will look like:
AMP HTML documents MUST contain
- Start with the doctype
<!doctype html>. - Contain a top-level
<html ⚡>tag (<html amp>is accepted as well). - Contain
<head>and<body>tags (They are optional in HTML). - Contain a
<link rel="canonical" href="$SOME_URL" />tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists. - Contain a
<meta charset="utf-8">tag as the first child of their head tag. - Contain a
<meta name="viewport" content="width=device-width,minimum-scale=1">tag inside their head tag. It’s also recommended to include initial-scale=1. But I guess you are doing both already, right? - Contain a
https://cdn.ampproject.org/v0.jstag as the last element in their head (this includes and loads the AMP JS library). More about its functions below. - Contain
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>in their head tag.
You can start with this AMP guide to get up to speed and create your first AMP page. It’s quick & easy.
Preview and Validate
Validation is key to the format, so it’s important to understand the AMP format specification and to learn what is allowed and disallowed. The AMP runtime can be placed into a development mode for any page. Development mode will trigger AMP validation on the embedded page, which will emit the validation status and any errors to the javascript developer console. Development mode may be triggered by appending of
For example:
#development=1 to the URL of the page.For example:
http://localhost:8000/released.amp.html#development=1
and open the Chrome DevTools console and check for validation errors.You can see it in action in the image below. You can click on it to enlarge it.
What is the AMP runtime?
The AMP runtime is a piece of JavaScript that runs inside every AMP document. It provides implementations for AMP custom elements, manages resource loading and prioritization and optionally includes a runtime validator for AMP HTML for use during development. The AMP runtime is loaded via the mandatory
https://cdn.ampproject.org/v0.js tag in the AMP document <head>.AMP HTML Extended Components
You could extend AMP HTML. Check AMP’s extended components to see how AMP makes it easy to add additional elements like video player embeds and social media content to pages. For more details check this AMP talk or the AMP Anatomy.
Demo
The easiest way to see AMP in action is to check out Google’s search. Another option is to try g.co/ampdemo on your mobile device.
Last but not least, just in case you think “who is crazy enough to try it?” Many of the world’s top publishers (e.g WordPress is live with this plug-in) have announced their intention to support AMP when it goes live in Google Search as soon as February 2016, and many other companies (e.g Twitter, LinkedIn and Pinterest) are also building support for the framework.
Mobile web rock!
Mobile web rock!
Filed under: Chrome, HTML5, webdev Tagged: AMP, mobile, mobile web