A presentation at DrupalCon Europe 2020 by Sascha Eggenberger
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
In this session we’ll have a look at how to setup Drupal in 2020 to deliver an improved experience with a focus on content editors. Which contrib modules will help you achieve that?
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.