Easy Out of the Box Keynote

A presentation at DrupalCon North America in April 2021 in by Sascha Eggenberger

Slide 1

Slide 1

Easy Out of the Box A Drupal Core Strategic Initiative

Slide 2

Slide 2

Table of Contents 01 04 Overview What is this initiative and where are we now? How to help Ways to get involved for all contributors. 02 05 Case Study See how these features help a large foundation. Q&A Time to answer your questions. 03 Next Steps What are we working on next?

Slide 3

Slide 3

What is Easy Out of the Box? The Easy Out of the Box initiative is making the editorial experience clear and empowering from the moment Drupal is installed.

Slide 4

Slide 4

What is Easy Out of the Box? The initiative is composed of three important features for editors: Claro, Layout Builder, and Media.

Slide 5

Slide 5

Initiative Leads Emilie Nouveau Sascha Eggenberger AmyJune Hineline DyanneNova CivicActions saschaeggi Unic AG volkswagenchick Kanopi Studios Cristina Chumillas ckrina Lullabot

Slide 6

Slide 6

Initiative Leads Tim Plunkett Lauri Eskola Adam Globus-Hoenich Marcos Cano tim.plunkett Acquia lauriii Acquia phenaproxima Acquia marcoscano Lullabot

Slide 7

Slide 7

Claro Making site administration beautiful

Slide 8

Slide 8

Claro in a nutshell Design Based on the newly created Drupal Admin Design System Interface Redesign of administration pages, touches some editor components like contextual links and the administrator toolbar Accessibility A very important aspect from Conception to Implementation Still Experimental Claro is the one feature here that isn’t marked stable yet

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

History 2017 2018 2019 2021 (?) First design proposals Claro Theme In Core as “Experimental” New default Admin theme Around DrupalCon Vienna Development started as a contrib theme Since Drupal 8.8 Once we reach stable

Slide 12

Slide 12

Layout Builder Tools to build your content your way

Slide 13

Slide 13

What is Layout Builder? Build with sections No longer need to be tied to full page designs and hard coded templates. Content Type layouts Design a standard layout for all content of a certain type. One off page designs Create different layouts for individual pieces of content. Stable Layout Builder is stable, but not enabled by default in the Standard Drupal installation.

Slide 14

Slide 14

Slide 15

Slide 15

History Spring 2017 Winter 2017 Spring 2019 ? Layout Initiative Experimental Stable Standard The initiative to build a better layout tool in core begins Layout Builder is added to core as an experimental module Layout Builder is marked Stable Help us get it there!

Slide 16

Slide 16

Media Organizing your digital assets

Slide 17

Slide 17

What is Media? Media items Store your Media as reusable entities instead of in fields. Media Library Filter and organize your assets with Media Library. Relevant metadata Keep your data with your multimedia asset. Stable Media is stable, but not enabled by default in the Standard Drupal installation.

Slide 18

Slide 18

Slide 19

Slide 19

Case Study: How the NSF is using Claro, Layout Builder, and Media Built in partnership with

Slide 20

Slide 20

Slide 21

Slide 21

➔ Editors have a modern and welcoming backend through Claro.

Slide 22

Slide 22

➔ Content Editors can edit page layouts without HTML knowledge.

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

➔ Using Media, the NSF can share multimedia items easily through the site.

Slide 26

Slide 26

Slide 27

Slide 27

Easy Out of the Box Media Searchable, shareable multimedia assets Layout Builder Easy page building with consistent branding Claro A clear, modern design that enables editors

Slide 28

Slide 28

What’s Next?

Slide 29

Slide 29

Claro Making site administration beautiful

Slide 30

Slide 30

New “Content Creation” menu proposal ➔ dgo.to/3203618

Slide 31

Slide 31

New “Content Editor” role ➔ dgo.to/3059984

Slide 32

Slide 32

UI improvements ➔ This first draft was presented at DrupalCon Amsterdam

Slide 33

Slide 33

Contrib Theme based on “Future UI” ➔ dgo.to/gin

Slide 34

Slide 34

Contrib Theme based on “Future UI” ➔ dgo.to/gin

Slide 35

Slide 35

Layout Builder Tools to build your content your way

Slide 36

Slide 36

Full site layout editing ➔ dgo.to/2924058

Slide 37

Slide 37

Block Visibility Controls ➔ dgo.to/2916876

Slide 38

Slide 38

Media Organizing your digital assets

Slide 39

Slide 39

Provide tools to manage audio and video transcripts ➔ dgo.to/3002770

Slide 40

Slide 40

Improve Media’s usability ➔ dgo.to/2924058

Slide 41

Slide 41

How to Help

Slide 42

Slide 42

Why contribute? Community Be a part of the community! Gratitude Everyone’s contribution are valued Career Development Build your resume and Drupal street cred Professional Development The more you contribute, the more you learn

Slide 43

Slide 43

Who can contribute? Designer / UX Marketing Documentation Look and feel Presentations and copy Help future users Social media Accessibility Developers Get the word out Be as inclusive Concept to code

Slide 44

Slide 44

Intuitive Clean Novice and new users Accessible Easy to use

Slide 45

Slide 45

OpenSocial ➔ ➔ ➔ Meet the contribution mentors Find a way to participate in today’s initiative Contribute to things other than today’s strategic initiative Get started here: drupalcontributions.opensocial.site/group/easyout-box-wednesday/about EOOTB: drupalcontributions.opensocial.site/group/easyout-box-wednesday/topics

Slide 46

Slide 46

In the issue queue By tags: ➔ #NorthAmerica2021 ➔ #Easy Out of the Box ➔ #Claro ➔ #Media Initiative ➔ # Layout Builder Get started here: www.drupal.org/project/issues/search

Slide 47

Slide 47

Come visit us! ➔ ➔ Meet the team Get some direction Meet and greet: drupalcontributions.opensocial.site/node/52 EOOTB: drupalcontributions.opensocial.site/group/easyout-box-wednesday/topics

Slide 48

Slide 48

THANK YOU Come work with us! #easy-out-of-the-box Join us right after this for Q&A CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik