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 Were a strategy, design, and Drupal development company that creates large-scale digital
L U L L A B O T
1
DRUPALCON SEATTLE 2019 Karen Stevenson Director of Technology Lullabot
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
L U L L A B O T
3
❏ Open standard ❏ Better mobile experience ❏ Better search results
L U L L A B O T
4
❏ 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
❏ 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 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
7
L U L L A B O T
8
❏ 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
❏ 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
L U L L A B O T
11
L U L L A B O T
❏ /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
L U L L A B O T
14
L U L L A B O T
15
L U L L A B O T
16
L U L L A B O T
17
L U L L A B O T
18
L U L L A B O T
19
L U L L A B O T
20
L U L L A B O T
21
L U L L A B O T
22
L U L L A B O T
23
L U L L A B O T
24
L U L L A B O T
25
❏ 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
L U L L A B O T
27
Mentored Contribution
9:00 - 18:00 Room 602 Friday, April 12, 2019 #drupalcontributions
First Time Contributor Workshop
9:00 - 12:00 Room 606
General Contribution
9:00 - 18:00 Room 6A
L U L L A B O T
28
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