![Top 6 ways developers mess up on User Experience (and how to avoid them) [SF Rails Meetup, Aug 01 2013, San Francisco]](https://static.fdocuments.in/doc/165x107/5441556eafaf9f5e208b46ca/top-6-ways-developers-mess-up-on-user-experience-and-how-to-avoid-them-sf-rails-meetup-aug-01-2013-san-francisco.jpg)
Mobile First et AMP - Developers Meetup - May 2017
24
1 Accelerated Mobile Pages May 31th, 2017, Paris
-
Upload
jahia-solutions-group -
Category
Software
-
view
146 -
download
1
Transcript of Mobile First et AMP - Developers Meetup - May 2017
1
Accelerated Mobile Pages
May 31th, 2017, Paris
2
Introduction
David Griffon ( [email protected] )
Core Team
Senior developper
Understand what is AMP
Rendering capabilities of DX
There are 24 slides
3
What is AMP ?
1
4
1What is AMP ?
Accelerated Mobile Pages
speed up mobile browsing
5
1What is AMP ?
Content targeted (news, article)
Responsive design alternative
6
1What is AMP ?
Supported by Google
Free CDN hosted by Google
7
1What is AMP ?
8
1What is AMP ?
AMP Flow
9
How AMP works ?
2
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.
14
3Make DX content AMP compatible
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
17
DX content to AMP page
DX content view
- Use to display a single content- Use AMP custom tags
3
18
DX content to AMP page
DX Render Filters
- Use to modify existing content while rendering
3
19
4AMP pros and cons
20
AMP pros ..
Higher rankings (Google)Free CDN
A detailed and active documentation and exampleshttps://www.ampproject.orghttps://ampbyexample.com
4
21
AMP cons ..
Limited functionality Ad revenues
Analytics / SEO Google cache
4
22
5AMP and DX, what's next
23
What's next
Extend DX channels to support AMP richText filter
Sample components:- Authentication- Forms- Links
5
24
THE END!THANKS FOR LISTENING
