A better Experience for Content Editors

A presentation at DrupalCon Europe 2020 in December 2020 in by Sascha Eggenberger

Slide 1

Slide 1

DrupalCon Europe 2020 A better Experience for Content Editors Sascha Eggenberger • @saschaeggi • www.sascha.is

Slide 2

Slide 2

Sascha Eggenberger Senior UX Designer @ Unic

Slide 3

Slide 3

@saschaeggi Follow me on Twitter

Slide 4

Slide 4

Agenda 01 02 03 04 05 Interface Modules Quick wins Brief outlook Key takeaways

Slide 5

Slide 5

Interface

Slide 6

Slide 6

« Drupal looks & feels outdated » – people on the internet

Slide 7

Slide 7

Claro to the rescue

Slide 8

Slide 8

Gin Admin Theme a customizable experience

Slide 9

Slide 9

A new layout nice & sleek overview

Slide 10

Slide 10

A new layout vertical navigation

Slide 11

Slide 11

A new layout call-to-actions

Slide 12

Slide 12

A new layout layers

Slide 13

Slide 13

Node edit form improved editor experience

Slide 14

Slide 14

Node edit form sticky action bar

Slide 15

Slide 15

Node edit form focused content form

Slide 16

Slide 16

Node edit form new sidebar

Slide 17

Slide 17

Gin settings a lot of customization options

Slide 18

Slide 18

Toolbar vertical toolbar

Slide 19

Slide 19

Toolbar modern, horizontal toolbar

Slide 20

Slide 20

Toolbar classic, “legacy” toolbar

Slide 21

Slide 21

Darkmode welcome to the dark side

Slide 22

Slide 22

User settings Users can customize their Drupal experience

Slide 23

Slide 23

Examples real world branding examples

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Download Gin drupal.org/project/gin

Slide 29

Slide 29

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

Slide 30

Slide 30

Modules

Slide 31

Slide 31

Admin toolbar dgo.to/admin_toolbar • • • • Provides submenus Eases navigating through the UI Possibility to add custom entries “Admin Toolbar Extra Tools” submodule

Slide 32

Slide 32

Coffee dgo.to/coffee • Alfred/Spotlight like quick search • Find the stuff you’re looking for • Neatly integrated in Gin

Slide 33

Slide 33

Field group dgo.to/field_group • • • • • Easy yet powerful module Group related content Guide the content editor Clean up the clutter Setup in “Manage form display”

Slide 34

Slide 34

Media library in Drupal core • Reduces dependencies • Provides it’s own widget • No need for media_entity_browser

Slide 35

Slide 35

DropzoneJS dgo.to/dropzonejs • • • • Different widgets available Drag & drop for media Supports multiple file uploads Use patch from #3051658 (Overwrite upload form for media library)

Slide 36

Slide 36

Layout Paragraphs dgo.to/layout_paragraphs • • • • • Field plugin for Paragraphs Integrates with Layouts in core Upgradeability for existing sites A more visual editing experience Successor to ERL Module

Slide 37

Slide 37

Inline Entity Form (IEF) dgo.to/inline_entity_form • • • • “Embed” entities: Directly edit linked entities inline Works great together with Entity browser Can replace simple reference fields Many configuration possibilities

Slide 38

Slide 38

Entity browser dgo.to/entity_browser • • • Very flexible Content selection browser like media selection Good enhancement/replacement for Autocomplete fields • Possibility to show rendered entities

Slide 39

Slide 39

Gin Login dgo.to/gin_login • • • Supports all the customization options of Gin Great for decoupled sites Seamless experience

Slide 40

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

Slide 41

Slide 41

Quick wins

Slide 42

Slide 42

Create custom admin views For different content types • Quick access to most used content types • Can be helpful when managing a ton of content

Slide 43

Slide 43

Use AJAX for admin views It’s there you just need to enable it • Set administrative views like content, media etc. to use AJAX • Provides a more responsive & modern feel

Slide 44

Slide 44

Group elements That belog together on complex content types • Give content editors a good context • Should serve as a guideline to what the system expects

Slide 45

Slide 45

Field descriptions Prefix, Suffix & Help texts • Give content editors a clear context what the system expects • An easy guide / help Duration Minutes Height Minimal height in meters m

Slide 46

Slide 46

CKEditor styles [name_of_frontend_theme].info.yml • Define your stylesheet • True WYSIWYG experience

Slide 47

Slide 47

CSS Adjustments to Gin gin-custom.css (Since Alpha 31) • For quick overrides • Place in your public files directory: e.g. /sites/default/files/ • Great for small adjustments like changing Logo size etc. (no need for subtheming)

Slide 48

Slide 48

Use Paragraphs Icons For easier recognition • Helps for easier recognition of content pieces • You could for example use the OpenSource library Feathericons

Slide 49

Slide 49

Paragraphs Use the EXPERIMENTAL field plugin widget • Works great with the Paragraphs “EXPERIMENTAL” field plugin widget • More modern appearance of Paragraphs with Gin

Slide 50

Slide 50

Paragraph previews Preview view mode • Use of “preview” view mode in Paragaphs Experimental • Provide content editors better previews of the content

Slide 51

Slide 51

Layout Paragraph previews Paragraph rendering • We use a custom implementation to render paragraphs in the backend • A bit more effort to implement, but worth it

Slide 52

Slide 52

Demo Repository

Slide 53

Slide 53

github.com/saschaeggi/ drupal-lando-starterkit Check it out for some reference

Slide 54

Slide 54

Brief outlook

Slide 55

Slide 55

Getting Claro stable ❤ dgo.to/3066007

Slide 56

Slide 56

Content Editor role dgo.to/3059984

Slide 57

Slide 57

Make admin menus configurable dgo.to/1869638

Slide 58

Slide 58

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

Slide 59

Slide 59

Key takeaways

Slide 60

Slide 60

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

Slide 61

Slide 61

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

Slide 62

Slide 62

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

Slide 63

Slide 63

DrupalCon Europe 2020 Thank you! Sascha Eggenberger • @saschaeggi • www.sascha.is