Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Enhance Your Drupal Website’s Authoring Experience Part 1 - Modernize the Admin Theme with Gin

Series Introduction

I’ve seen, time and again, the difference a clean and modern website editing interface can have on both the quantity and quality of site content. When a website’s back-end is frustrating and unappealing to work with, it dissuades the author from posting.

Historically, Drupal has been known as a powerful CMS, and its admin forms are some of the best in terms of their accessibility. But because it can do so much, its admin interface can be difficult to use if not given some love and attention.

Luckily the project has made big strides when it comes to usability. However, many Drupal websites are not taking full advantage of these newer features.

Some recent updates to Drupal core and modules (add-ons for Drupal) offer significant improvements to the Drupal editing interface. In many situations, I actually find Drupal to be easier to use than WordPress.

Many of these admin UX improvement modules only take a few hours or less to add to your site. It’s not rocket science to make editing in Drupal 9 more pleasant! Some minor modifications can go a long way. In this series of articles, we’ll share with you some of the best ways we’ve found to improve the Drupal editing interface. We will show you, step-by-step, how these enhancements can make things easier and more pleasant for website content creators and editors.

Here are the posts published so far: 

Gin: Improve Usability by Upgrading Aesthetics

Many Drupal websites are using the default administration theme, Seven. Here’s a screenshot:

The Article entry form using the Seven administrative theme.
Drupal's default admin theme, Seven, leaves a lot to be desired.

Seven is stable and reliable, but feels like editing from the 90s because... well that's when the theme was first designed. A lot of work has gone into a new and improved admin theme called Claro. It is now available as an experiment theme within Drupal core. Here is that same form, but using the Claro admin theme instead.

The article entry form using the Claro administrative theme.
Claro is the new admin theme for Drupal. Once it becomes a stable project it will be the default admin theme.

The visual editing interface of Claro is brighter, cleaner and easier on the eyes. It's a big improvement from Seven, but we can kick things up another notch with a contributed theme called the Gin Admin Theme. It’s a sub-theme of Claro that brings even more polish. Because it's a contributed module and not in Drupal core, it has the luxury of moving quicker with its development than Claro can. Gin is widely-used, stable, and well-maintained theme. I highly recommend it.

You might think, “well Seven works just fine for us.” You’d be surprised, however, at how much a clean, modern theme changes how folks using a visual editing interface feel about using your website. This is because of a phenomenon called the aesthetic-usability effect. It means that,

Users often perceive aesthetically pleasing design as design that’s more usable. Here is the same form, but using the Gin Admin Theme.

Here is the same form, but using the Gin Admin Theme.

The Article entry form using the Gin administrative theme.
Gin is an admin theme that brings a clean and modern feel to Drupal's graphical user interface. 

 

Install & Configure the Gin Admin Theme 

To switch to the Gin admin theme install and enable the following projects:

The admin theme comes with several visual styles to choose from, including the ability to set the color palette. Bringing the theme in line with your site’s branding can give it that extra refinement that leaves authors and editors satisfied when working with the site.

The settings page for the Gin theme.
The Gin admin theme allows site owners to customize the color palette, select from a variety of toolbar layouts and other features to tailor the look and feel while maintaining strong design aesthetics.

How to Support the Claro and Gin Theme Projects

Note that you will want to test the editing workflow to ensure there aren’t any visual issues. The more that the site’s administrative features have been altered and enhanced by contributed and custom modules, the more potential for display issues in Claro and Gin.

Claro's maintainers and Gin’s maintainer, Sascha Eggenberger, are all responsive, so I encourage you to report any bugs you find. There’s a good chance they will be resolved quickly.

You can contribute financially to Claro by becoming a Drupal Association member. You can donate to Gin through its OpenCollective fund. Contributing helps keep the projects well-maintained.

Part 1: Conclusion

Something as simple as switching the administrative theme can have a big impact on the usability of your website for sighted users, thanks to the law of the aesthetic-usability effect. Next in our series, we’ll look at improving the user interface further by removing unnecessary elements,  which is an important step when working with a CMS as powerful and customizable as Drupal is.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web