A better Experience for Content Editors

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

Sascha Eggenberger Senior UX Designer @ Unic

@saschaeggi Follow me on Twitter

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

Interface

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

Claro to the rescue

Gin Admin Theme a customizable experience

A new layout nice & sleek overview

A new layout vertical navigation

A new layout call-to-actions

A new layout layers

Node edit form improved editor experience

Node edit form sticky action bar

Node edit form focused content form

Node edit form new sidebar

Gin settings a lot of customization options

Toolbar vertical toolbar

Toolbar modern, horizontal toolbar

Toolbar classic, “legacy” toolbar

Darkmode welcome to the dark side

User settings Users can customize their Drupal experience

Examples real world branding examples

Download Gin drupal.org/project/gin

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

Modules

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

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

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”

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

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)

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

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

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

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

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

Quick wins

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

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

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

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

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

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)

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

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

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

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

Demo Repository

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

Brief outlook

Getting Claro stable ❤ dgo.to/3066007

Content Editor role dgo.to/3059984

Make admin menus configurable dgo.to/1869638

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

Key takeaways

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

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

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

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