Download - Mag amp 2015_v0.3
![Page 1: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/1.jpg)
HelloT3EE!
![Page 2: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/2.jpg)
Let‘s talk about AMP
![Page 3: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/3.jpg)
What can you except?
AMP HTML
Mobile web
Speed TYPO3
![Page 4: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/4.jpg)
Mobile Web some numbers
![Page 5: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/5.jpg)
Evolution of content discovery
![Page 6: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/6.jpg)
Mobile ContentFrom where does
the content comes?
![Page 7: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/7.jpg)
Mobile Web – From where comes the Content ?
![Page 8: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/8.jpg)
AMP HTMLAccelerated Mobile Pages
![Page 9: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/9.jpg)
AMP HTML – General
Open Source ProjectA way to simplify the integration of static content on mobile devices.Built-in best practicePromice of speed, speed, speed
More info here:https://github.com/ampproject
![Page 10: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/10.jpg)
AMP in actionCheck out the demo from Google
![Page 11: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/11.jpg)
AMPPerformance
![Page 12: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/12.jpg)
“Predictable performance is a key design goal for AMP HTML. Primarily we are aiming at reducing the time until the content of a page can be consumed / used by the user. In concrete terms this means that:“
HTTP requests necessary to render and fully layout the document should be minimized.Resources such as images or ads should only be downloaded if they are likely to be seen by the user.Browsers should be able to calculate the space needed by every resource on the page without fetching that resource.
AMP – What is the plan?
![Page 13: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/13.jpg)
What is the plan?
Preloading Images
Minifying HTML and CSS
Special Lazy Loading
Best practice
CDN
AMP – More specific
![Page 14: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/14.jpg)
a fary tale aboutthe good, the bad and the ugly one
![Page 15: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/15.jpg)
AMP‘s point of view
JS
„HTML“
CSS
the bad the good
the “ugly”
![Page 16: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/16.jpg)
magic always demands a sacrifice
![Page 17: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/17.jpg)
AMP HTML documents MUST
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.contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag as the last element in their head.contain <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> in their head tag.AND read the Markup specification
AMP – Requirements
![Page 18: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/18.jpg)
Allowed
<style><meta> (http-equiv not)<a> without “javacript”<link> for certain values<button><svg>
AMP Validator:Allowed / Prohibited / Replaced
Replaced
<img><video><audio><iframe>
Prohibited
<form><script> (only amp, and custom elements)<input><embend><object><param><applet><base>
![Page 19: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/19.jpg)
Custom elements
![Page 20: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/20.jpg)
Youtube
AMP HTML – examples
![Page 21: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/21.jpg)
Iframe
AMP HTML – Elements Example
![Page 22: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/22.jpg)
Carousel
AMP HTML (Examples)
![Page 23: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/23.jpg)
AMP HTMLI want to try it
![Page 24: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/24.jpg)
AMP HTML – Let‘s test the speed
![Page 25: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/25.jpg)
AMP HTML vs. HTML
![Page 26: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/26.jpg)
AMP HTML
![Page 27: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/27.jpg)
HTML
![Page 28: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/28.jpg)
Round 2
![Page 29: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/29.jpg)
Round 2 (HTML)
![Page 30: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/30.jpg)
Round 2 (AMP)
![Page 31: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/31.jpg)
The point I mentioned TYPO3
at the beginning
![Page 32: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/32.jpg)
Integration into the CMS
?
![Page 33: Mag amp 2015_v0.3](https://reader034.vdocuments.mx/reader034/viewer/2022052705/587d3a401a28ab2a448b6c17/html5/thumbnails/33.jpg)
worth to think about