Mobile First et AMP - Developers Meetup - May 2017
•Download as PPTX, PDF•
0 likes•437 views
Here are the slides of Jahia's Developers Meetup held in Paris on May 31, 2017. The topic of this meetup was: Mobile First & AMP
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Mobile First et AMP - Developers Meetup - May 2017
Similar to Mobile First et AMP - Developers Meetup - May 2017 (20)
More from Jahia Solutions Group
More from Jahia Solutions Group (20)
Recently uploaded
Recently uploaded (20)
Mobile First et AMP - Developers Meetup - May 2017
- 1. 1 Accelerated Mobile Pages May 31th, 2017, Paris
- 2. 2 Introduction David Griffon ( dgriffon@jahia.com ) Core Team Senior developper Understand what is AMP Rendering capabilities of DX There are 24 slides
- 3. 3 What is AMP ? 1
- 4. 4 1 What is AMP ? Accelerated Mobile Pages speed up mobile browsing
- 5. 5 1 What is AMP ? Content targeted (news, article) Responsive design alternative
- 6. 6 1 What is AMP ? Supported by Google Free CDN hosted by Google
- 7. 7 1 What is AMP ?
- 8. 8 1 What is AMP ? AMP Flow
- 9. 9 How AMP works ? 2
- 10. 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. 11 2 How it works ? AMP Guidelines Never stop the content Inline size bound CSS Asset independent layout Use HTTPS ...
- 12. 12 2 How it works ? No javascript Inline CSS (less than 50 Ko) Use custom tags amp-accordion amp-img amp-list amp-iframe amp-video See more at https://www.ampproject.org/fr/docs/reference/components
- 13. 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. 14 3 Make DX content AMP compatible
- 15. 15 DX content to AMP page DEMO https://github.com/dgriffon/sample-AMP-DX-integration 3
- 16. 16 DX content to AMP page DX content template - Use to display content in full page - Set AMP headers 3
- 17. 17 DX content to AMP page DX content view - Use to display a single content - Use AMP custom tags 3
- 18. 18 DX content to AMP page DX Render Filters - Use to modify existing content while rendering 3
- 19. 19 4 AMP pros and cons
- 20. 20 AMP pros .. Higher rankings (Google) Free CDN A detailed and active documentation and examples https://www.ampproject.org https://ampbyexample.com 4
- 21. 21 AMP cons .. Limited functionality Ad revenues Analytics / SEO Google cache 4
- 22. 22 5 AMP and DX, what's next
- 23. 23 What's next Extend DX channels to support AMP richText filter Sample components: - Authentication - Forms - Links 5
- 24. 24 THE END! THANKS FOR LISTENING