AMP intro

We currently did an AMP phase one project for Hillarys

where we create static amp-html pages

to see if it made in improvement in traffic.

Im here to talk about the pitfalls we came across as we went along.

Transcript

1. Pitfalls of building web pages for AMP By Matt C
2. What is AMP?
3. Benefits to using AMP • Website is delivered fast to mobile users • Your website gets better google search rankings because the website is more performant
4. Gotchas • Everything has to be static HTML • Maximum of 50kb CSS • Amp elements have to have width and height set inline • No support on external scripts • No typekit support • No picture elements • Carousels can be difficult • Constant content amend requests
5. Our Approach
6. venetian-blue
7. Benefit of using Panini • Re-use components • Used JSON data for our pages instead of hardcoded • Compiles to html • Prevents amp-validation errors
8. 50KB CSS - Sad News…. L
9. 50KB CSS - More Sad News…. L
10. 50kb CSS Solution – ”Get all of the things…” Add all of your HTML components that you need to one waste.html file.
11. Use Critical CSS as an initial starting point
12. Add to a css.hbs file
13. No support for external scripts https://ampbyexample.com/
14. No TypeKit Support Include fonts using the @font-face
15. Responsive Images
16. Carousels that have text 1/3
17. Carousels that have text 2/3
18. Carousels that have text 3/3
19. More info on amp-carousels https://ampbyexample.com/components/amp-carousel/ Bit url: http://bit.ly/2iAep86
20. Content amends Elemeno.io Contentful
21. Useful Resources • AMP Validator Google chrome extension • https://validator.ampproject.org/ • https://www.npmjs.com/search?q=amp • https://ampbyexample.com/
22. Re-usable Template • html-to-amp-handlebars-template
23. Thanks! J