A better Experience for Content Editors

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

Slide 1

A better Experience for Content Editors

Slide 2

Sascha Eggenberger Senior UX Designer @ Unic

Slide 3

@saschaeggi Follow me on Twitter

Slide 4

Agenda Interface Helpful Modules Quick wins What’s next Key takeaways

Slide 5

Interface

Slide 6

« Drupal looks & feels outdated » People on the internet

Slide 7

Claro to the rescue!

Slide 8

Gin Admin Theme a customizable experience

Slide 9

A new layout nice & sleek overview

Slide 10

A new layout vertical navigation

Slide 11

A new layout sticky call-to-actions

Slide 12

Node edit form improved editor experience

Slide 13

Node edit form sticky action bar

Slide 14

Node edit form focused content form

Slide 15

Node edit form new sidebar

Slide 16

Gin settings a lot of customization options

Slide 17

Toolbar modern, horizontal toolbar

Slide 18

Toolbar classic, “legacy” toolbar

Slide 19

Darkmode welcome to the dark side

Slide 20

User settings Users can customize their Drupal experience

Slide 21

Examples Branding examples

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Download Gin drupal.org/project/gin

Slide 27

Support the development Contribute : drupal.org/project/issues/gin Buy me a : github.com/sponsors/saschaeggi

Slide 28

Paragraphs Drag handle issue fix is backported to Drupal 8.8+ No need to patch core anymore!

Slide 29

Helpful Modules

Slide 30

Admin toolbar dgo.to/admin_toolbar

Slide 31

Coffee dgo.to/coffee

Slide 32

Field group dgo.to/field_group

Slide 33

Media library in Drupal core

Slide 34

DropzoneJS dgo.to/dropzonejs

Slide 35

Layout Paragraphs dgo.to/layout_paragraphs

Slide 36

Inline Entity Form (IEF) dgo.to/inline_entity_form

Slide 37

Entity browser dgo.to/entity_browser

Slide 38

Gin Login dgo.to/gin_login

Slide 39

Gin Layout Builder dgo.to/gin_lb

Slide 40

More modules worth a look dgo.to/autosave_form dgo.to/content_lock dgo.to/responsive_preview dgo.to/paragraphs_ee dgo.to/gutenberg dgo.to/gin_gutenberg

Slide 41

Quick wins

Slide 42

Create custom admin views For different content types

Slide 43

Use AJAX for admin views It’s there you just need to enable it

Slide 44

Group elements That belog together on complex content types

Slide 45

Field descriptions Prefix, Suffix & Help texts

Slide 46

CKEditor styles [name_of_frontend_theme].info.yml

Slide 47

CSS Adjustments to Gin gin-custom.css (Since Alpha 31)

Slide 48

Use Paragraphs Icons For easier recognition

Slide 49

Paragraphs Use the EXPERIMENTAL field plugin widget

Slide 50

Paragraph previews Preview view mode

Slide 51

Layout Paragraph previews Paragraph rendering

Slide 52

Demo Repository

Slide 53

github.com/saschaeggi/ drupal9-gin Check it out for some reference

Slide 54

What’s next

Slide 55

Beta 1 Roadmap for Gin dgo.to/3203807

Slide 56

Getting Claro stable dgo.to/3066007

Slide 57

Content Editor role dgo.to/3059984

Slide 58

“Content creation” menu proposal dgo.to/3203618

Slide 59

Admin views should use AJAX as default dgo.to/3146544

Slide 60

Key takeaways

Slide 61

1 Site building is crucial the site builder has an important role

Slide 62

2 Don’t overdo it Always think if you would use it yourself

Slide 63

3 The experience is king A good UX will help with adoption

Slide 64

Thank you!