Firm up that Backend

Easy Exercises for a Usable Admin Interface

Lauren Byrwa | @labbydev

Senior Front End Developer

What do you do with Drupal?

  • Front-end?
  • Site Building?
  • Module Development?
  • Content Administrators?
  • Have you ever entered content into Drupal?

Why does it matter?

  • Developers don't know what it's like to not be developers.
  • Content administrators don't always know Drupal.
  • The backend gets left behind.
  • Content administrators don't have the confidence to do their job without assistance.

Warm ups

  • Use the Administration Menu (instead of the default Toolbar).
  • Add help text
  • Does your structure and naming make sense to people who don't know Drupal?
Screenshot of Admin menu dropdown in action.

Dropdowns allow users to easily and quickly get through the system

Screenshot of Drupal help text.

Adding help text on fields, and descriptions on content types, taxonomies and contexts

Company Workflow

  • Intake with the client to discuss their internal needs
  • Create a custom workflow for those clients needs
  • Determine number and needs of roles
  • Craft permissions based on client needs and custom workflow


  • Content administrators can focus on only the tasks that they need to complete.
  • Prevent content maintainers from unintentionally breaking the website.
  • Prevent unauthorized users from seeing parts of the site that they shouldn't.

Permissions by Role

Tools to work out your permissions

An easy exercise for role testing is to use Masquarade.

Permissions Before

Screenshot of Drupal 7 Admin menu showing all possible links.

Too many options to distract Content administrators

Permissions After

Screenshot of Drupal 7 Admin menu showing only links that content administrators need.

Content administrators can focus on their tasks

Admin Views with VBO

Administration Views

  • Customizable view
  • Overrides the content, user and taxonomy system pages

Views Bulk Operations (VBO)

  • Adds functionality to these views
  • Is useful when dealing with a lot of content
Screenshot of Drupal 7 content page filters.
Screenshot of Drupal 7 content page use admin views and vbo to give more faceted search.

Node/Entity Ordering


Adds easy drag-and-drop interface


  • Relatively lightweight module
  • Works like the weights already built into menu items
more information on node ordering


  • Supports translated nodes
  • Allows seperate permissions for editing and ordering
Screenshot of a Drupal 7 nodequeue


  • lightweight (only two additional database tables)
  • Uses core node edit page
Screenshot of a Drupal 7 node weight

Content Interface

Exercise 1: Organize the Edit Page

Display Suite + Field Group

  • Clean up the node edit page
  • Divid fields into manageable chunks
Screenshot of Drupal 7 node edit page

Default node edit page

Screenshot of Drupal 7 node edit page after being organized with field group

Node edit page after being field grouped

Conditional Fields

Show and hides fields based on the values of other fields

  • Keeps edit page from becoming cumbersome
  • Great if you only need certain content in some instances
  • Helps keep the whole website unbreakable
Screenshot of Drupal 7 node edit page hiding fields with conditional fields

When content isn't featured, no "Featured Image" upload appears

Screenshot of Drupal 7 node edit page showing fields based on the status of another field

When content is featured, "Featured Image" upload appears

Exercise 2: Taming Images

  • Insert images into the WYSIWYG.
  • Create specific style options
  • Add additional CSS styles if required
  • Use alt and title text to encourage administrators to keep their content accessible.
Screenshot of Drupal 7 node page using Insert to add images to a WYSIWYG
Manual Crop
  • Administrators can crop images in the Drupal after uploading
  • Maintains aspect ratio
  • Links into image styles
Screenshot of Drupal 7 manual crop interface

Manual crop

Exercise 3: Trim down the options

Override Node Options

Hides default options like "Promote to front page"

Exercise 4: User friendly select lists

  • Turn select lists into auto complete tagging fields
  • Particularly useful on selects with over LOTS of options
Screenshot of Drupal 7 chosen interface


Exercise 5: Character Counts

  • Limits the ability to be too wordy
  • Avoids text breaking the design
  • Helpful countdown for administrative users
Screenshot of Drupal 7 maxlength on WYSIWYG interface


Exercise 6: Updating and Reverting Content

Workbench Moderation

Helps clients revert content to former versions

Screenshot of Workbench Moderation

Workbench Moderation


Illustrates what changes were made to the content.

Screenshot of diff module


Configuring the WYSIWYG

Screenshot of the default WYSIWYG buttons
  • Get rid of unused buttons
  • Use the CKEditor module
Screenshot of WYSIWYG after you limit the buttons to only what content admins need

The only options left here are bold, italicize, format, lists, links and images.


  • Helps content editors link to internal content
  • Allows users to easily search for content on the system or link to a URL
Screenshots of the WYSIWYG button for linkit and the interface to link items

Pushing it to the next level

Custom Dashboard

Login Destination

Redirects users on login


The Workbench suite is modular, allowing site builders to build the workflow that best suits the content administrators on their site.

Screenshot of Workbench dashboard

The only options left here are bold, italicize, format, lists, links and images.

Cool Down

Admin Themes

Screenshot of D7 content page using Shiny theme

Shiny is very consistent with Seven, but with a larger font and more polished look and feel.

Screenshot of D7 content page using Adminimal theme

Adminimal uses flat UI, color coding, and responsive breakpoints. But, fieldsets are not the best.

Screenshot of D7 content page using Ember theme

Adminimal uses flat UI, navbar, and responsive breakpoints.


  • There are a lot of easy-to-add modules on d.o that can help content administrators streamline their workflow
  • Consult a developer for recommendations about what is the best fit for your website and workflow


Lauren Byrwa | @labbydev