mobile first et amp - developers meetup - may 2017
TRANSCRIPT
2
Introduction
David Griffon ( [email protected] )
Core Team
Senior developper
Understand what is AMP
Rendering capabilities of DX
There are 24 slides
10
2 How it works ?
An HTML page with few constraints
<!doctype html>
<html amp lang="en">
<head>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
11
2 How it works ?
AMP GuidelinesNever stop the content
Inline size bound CSSAsset independent layout
Use HTTPS...
12
2 How it works ?
No javascriptInline CSS (less than 50 Ko)
Use custom tagsamp-accordion
amp-img
amp-list
amp-iframe
amp-video
See more at https://www.ampproject.org/fr/docs/reference/components
13
2 How it works ?
Page validation needed in order to be cached
Validation tools : - Online validation- Browser validation
A cached page is searchable and can be delivered by Google cache.
15
DX content to AMP page
DEMO
https://github.com/dgriffon/sample-AMP-DX-integration
3
16
DX content to AMP page
DX content template
- Use to display content in full page- Set AMP headers
3
20
AMP pros ..
Higher rankings (Google)Free CDN
A detailed and active documentation and exampleshttps://www.ampproject.orghttps://ampbyexample.com
4
23
What's next
Extend DX channels to support AMP richText filter
Sample components:- Authentication- Forms- Links
5