AMP: Accelerated Mobile Pages Re-Imagined Karen Stevenson - PowerPoint PPT Presentation

DRUPALCON SEATTLE 2019 AMP: Accelerated Mobile Pages Re-Imagined Karen Stevenson Director of Technology L U L L A B O T Lullabot 1

About Lullabot 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 L U L L A B O T ⭑ 2

What is AMP? Open standard ❏ Better mobile experience ❏ Better search results ❏ L U L L A B O T 3

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 ❏ L U L L A B O T Explicit element width and height ❏ 4

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 5

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 6

AMP in Drupal 8 L U L L A B O T 7

Some things are easy(ier) ... Custom markup ❏ Twig templates and template overrides ❏ Adding/removing css and javascript ❏ Library API ❏ Render API (#attached) ❏ L U L L A B O T Alternate markup for structured content ❏ View modes ❏ Field formatters ❏ 8

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 9

Drupal AMP 8.3 L U L L A B O T 10

Schema.org Metatag L U L L A B O T 11

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 ❏ L U L L A B O T 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 /page-name?amp&debug 13

CSS Tree Shaking L U L L A B O T 14

theme.info.yml L U L L A B O T 15

amp.libraries.yml L U L L A B O T 16

AmpFormTrait.php L U L L A B O T 17

AMP Formatters Links to L U L L A B O T documentation 18

AMP Social Share Block L U L L A B O T 19

AMP Sidebar L U L L A B O T 20

L U L L A B O T 21

AMP Library L U L L A B O T 22

Automatic Conversion L U L L A B O T 23

Library Updates / Alternatives L U L L A B O T 24

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 25

Q&A L U L L A B O T 26

Contribution Opportunities Friday, April 12, 2019 #drupalcontributions Mentored First Time General Contribution Contributor Workshop Contribution 9:00 - 18:00 9:00 - 12:00 9:00 - 18:00 Room 602 Room 606 Room 6A L U L L A B O T 27

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 L U L L A B O T 28