re-imagined accelerated mobile pages - drupalcon reimagined.pdf · amp: accelerated mobile pages...
TRANSCRIPT
L U
L L
A B
O T
1
AMP:Accelerated Mobile Pages Re-Imagined
DRUPALCON SEATTLE 2019
Karen StevensonDirector of TechnologyLullabot
L U
L L
A B
O T
2
We’re a strategy, design, and Drupal development company that creates large-scale digital publishing systems.
⭑ One of the first Drupal agencies⭑ Contributed to over 150 modules⭑ Published books on Drupal⭑ Many articles, podcasts, and presentations about Drupal
About Lullabot
L U
L L
A B
O T
3
What is AMP?
❏ Open standard❏ Better mobile experience❏ Better search results
L U
L L
A B
O T
4
AMP Requirements
❏ Page head markup❏ Schema.org metadata as JSON-LD❏ CSS restrictions❏ No javascript other than AMP async javascript❏ Numerous alternate and/or prohibited HTML elements❏ Explicit element width and height
L U
L L
A B
O T
5
AMP, circa 2016
❏ Separate AMP page❏ News articles only❏ Dumbed-down content and theme❏ Limited list of static components
L U
L L
A B
O T
6
AMP, circa 2019
❏ AMP pages look like rest of site❏ AMP for all pages, including landing pages❏ AMP-only sites❏ Expanded, dynamic, interactive components
L U
L L
A B
O T
AMP in Drupal 8
7
L U
L L
A B
O T
8
Some things are easy(ier) ...
❏ Custom markup❏ Twig templates and template overrides
❏ Adding/removing css and javascript❏ Library API❏ Render API (#attached)
❏ Alternate markup for structured content❏ View modes❏ Field formatters
L U
L L
A B
O T
9
Some things are not ...
❏ Rendering css inline instead of @import❏ Limiting the size of the css❏ Creating an AMP theme❏ Cleaning up unstructured content like body field
L U
L L
A B
O T
10
Drupal AMP 8.3
L U
L L
A B
O T
Schema.org Metatag
11
L U
L L
A B
O T
Inline CSS
❏ /Drupal/amp/Asset/AmpCssCollectionRenderer❏ Extends the standard CSS rendering process❏ Renders CSS inline❏ Tracks the name and size of each CSS file❏ Tracks the size of the aggregated CSS❏ Cleans and minifies the aggregated CSS❏ Exposes a method to review the list of files and sizes
12
L U
L L
A B
O T
13
/page-name?amp&debug
L U
L L
A B
O T
14
CSS Tree Shaking
L U
L L
A B
O T
15
theme.info.yml
L U
L L
A B
O T
16
amp.libraries.yml
L U
L L
A B
O T
17
AmpFormTrait.php
L U
L L
A B
O T
18
AMP Formatters
Links to documentation
L U
L L
A B
O T
19
AMP Social Share Block
L U
L L
A B
O T
20
AMP Sidebar
L U
L L
A B
O T
21
L U
L L
A B
O T
22
AMP Library
L U
L L
A B
O T
Automatic Conversion
23
L U
L L
A B
O T
24
Library Updates / Alternatives
L U
L L
A B
O T
25
Resources
❏ Drupal Project - https://www.drupal.org/project/amp❏ AMP Project - https://www.ampproject.org❏ AMP By Example - https://ampbyexample.com❏ AMP Start - https://www.ampstart.com
L U
L L
A B
O T
26
Q&A
L U
L L
A B
O T
27
Contribution Opportunities
Mentored Contribution9:00 - 18:00Room 602
Friday, April 12, 2019#drupalcontributions
First Time Contributor Workshop9:00 - 12:00Room 606
General Contribution9:00 - 18:00Room 6A
L U
L L
A B
O T
28
What did you think?
You can find our session on the DrupalCon website:
https://events.drupal.org/seattle2019/sessions/amp-accelerated-mobile-pages-re-imagined
And, provide feedback!
https://www.surveymonkey.com/r/DrupalConSeattle