Drupal 7's administration interface and theme leaves much to be desired. The Seven administration theme, part of Drupal Core, has shown its age since Drupal 7's introduction years ago. Mobile devices have taken a large chunk of web traffic: webmasters want to be able to administer their Drupal sites from smaller screened devices like Tablets and Smartphones. You need a modern Drupal admin theme.
I have something to tell you.
I'm writing this very post from an iPad. Not only do our clients often want to have the ability for users to browse the anonymous, public portion of the website from mobile devices, but often they need to be able to add or edit content from one as well. The Daymuse website itself is in fact one such needy customer.
Drupal administration from any device
One of the greatest features of modern CMS is the ability to administer the system over the web from any location (which also happens to be its greatest security concern). Whether you're a traveling online entrepreneur, or just a hands-on executive who needs to be able to make minor content edits from a meeting on your phone, it's possible to setup Drupal 7 to work with your mobile device administration needs.
The combination of Drupal admin theme tools we use to provide mobile administration also happens to make the user interface far more approachable. It modernizes the design style, simplifies several common workflow processes, and generally stays out of the way of the real work: adding and editing content. This package of modules, theme, and libraries we use is nearly consistent across the sites we manage (Drupal 6 is still clinging on in some places).
Forward thinking administration for Drupal 8
We've curated this combination of systems with an eye for the Drupal 8 administration experience. That means, where possible, we attempt to utilize tools which are backports or offer similar experiences to the administration system within Drupal 8. In this way, the teams we work with, will be more prepared and familiar with Drupal 8 once the inevitable migrations occur from Drupal 7.
Let's get down to the meat of it and start with the core part of this elegant administration solution: the Drupal admin theme.
Ember: mobile friendly Drupal admin theme
Ember is part of the Spark distribution, a Drupal distro specifically built in attempt to bring Drupal 8 features to the Drupal admin theme in 7. Unfortunately, the distribution as a whole, hasn't been updated much since its initial creation years ago. A few of the modules and tools within it, however, have blossomed on their own. Ember is one such piece.
The Ember Drupal admin theme replaces the Seven Drupal admin theme as the style and design presented to site administrators. It's been built from the ground up with responsive design. Ember has maintained its focus on being an excellent, mobile administration theme with similarities to the Drupal 8 administration theme. With each update, Ember continues to blaze the trail for a mobile friendly, quality user experience and Drupal admin theme.
Ember Support: contributed module interface tweaks
If you've spent time using Drupal contributed modules, you'll have undoubtedly noticed that several modules diverge drastically from the style of the core admin theme, Seven, for their administration. Most module developers will test their module-specific administration experience against Seven. However, with Ember's incorporation of responsive design and a vast array of style changes, this can break edge case module administration experiences.
Rather than constantly add one-off module-specific tweaks and fixes to the Ember theme, a separate module has been created. Ember Support solves a variety of module-specific style issues. We recommend adding it to any Drupal site utilizing the Ember administration theme to ward off the more common module-specific issues, especially sites using the Panels module.
Mobile-friendly admin navigation with Navbar for Drupal 7
As much as we're fans of Ember for its mobile-friendly approach to Drupal administration, this doesn't solve a primary mobile device issue in the admin: navigation.
Here's one of the first sets of commands I would run on nearly every fresh Drupal 7 sites only a few years ago:
drush dis toolbar && drush en admin_menu -yThe very basic Drupal core Toolbar module had to go. It lacked any power features. At the time, Administration Menu (admin_menu) was nearly a given on any Drupal site we'd run across and any we developed.
Administration Menu module began to show its age, though.
Server hardware has become less and less expensive, meaning we have a little less concern for just how many modules are integrated with a particular implementation. We use all sorts of technically unnecessary contributed modules, but which make life easier for developers, editors, or administrators. Menu items within the administration navigation proliferated. Administration Menu's tiling dropdown menus became less and less useful, sometimes extending beyond the height of the screen, making it impossible to reach the absolute positioned bottom items.
As mobile devices continued to gain a larger share of web browsing, they also become more than just consumptive devices. More and more, folks on iPads and other Tablets wanted to manage their sites. Smartphone users wanted to be able to make quick edits. They wanted to be productive. Administration Menu face planted when used on a small screen device. It was mobile-unfriendly.
The use case where Administration Menu shined before, also began to become a problem spot. Desktop screen sizes, more specifically, resolutions have continued to increase. Where a 1024x768 resolution monitor was common even only a few years ago, 1080p ("HD") is commonplace now. Pricing for even higher resolution monitors has come down drastically. All this means that the small fonts and spacing used in Administration Menu to help alleviate the screen real estate restrictions of an era of 1024x768 yield tiny fonts and difficult click targets on our Retina-era screens.
Enabling the optional Administration Menu Toolbar Style module brought the menu back to the design style of the Drupal core Toolbar module. This brought back quick access to Shortcuts. It did help with larger fonts and click targets, but then didn’t mesh well with the tiling dropdowns. Even with this style, fonts and click targets which are static pixel sizes, continue to become a problem as screen resolutions increase.
Advantages of Drupal's mobile-friendly Navbar menu module
It was time to replace the aging Administration Menu module with a modern, mobile-friendly navigation system. The Navbar module, sprung to life from the Spark distribution initiative, brings a highly responsive, customizable navigation system to Drupal 7.
The look and feel of Navbar is a direct backport of the Drupal 8 navigation system. Moving from Drupal 7 to Drupal 8 will be easier if site users are already familiar with Drupal 8’s navigation via Navbar in Drupal 7.
Navbar Requirements
The Navbar module has multiple JavaScript library dependencies. The Libraries module makes it easier to manage JavaScript libraries within Drupal for contributed modules. Libraries is also a dependency.
- Libraries module (version >= 2.0)
- Backbone JavaScript library (version >= 1.0)
- Underscore JavaScript library (version >= 1.5)
- Modernizr custom build (version >= 2.6.2)
Simplified workflow and process recognition with Navbar’s design
One of the first things you’ll notice about Navbar is its visual design. The iconography used is an attempt to create quick visual recognition of what each link represents for your site users. While you, as a frequent Drupal site builder, may have the Structure navigation system and location memorized, having a massive list of links with odd textual names is one of the turn-offs that new Drupal users experience. Users have two options for displaying Navbar’s sub-navigation elements.
1. Horizontal Navigation: They can be to display as a horizontal, left-right link list.
2. Vertical Navigation: They can also be displayed as a more traditional, left-aligned, top-bottom, list of links. In this configuration, further navigational children can be expanded with a click.
This conscious choice of viewing navigational items is a consistent theme throughout Navbar. Administration Menu could produce scary looking, tiling, massive, dropdown navigational items as you scan the nav and children populate with hovers. Navbar requires a conscious decision to expand the menu tree.
This is where visual design can make a system more approachable. Larger fonts make each navigation item more readable. Spacing around the navigation items help make them more clickable (or tappable).
An aside for diehard Administration Menu users
If Administration Menu will be pried from your cold, dead hands but you want to have some sort of mobile-friendly experience, it's possible to combine the two. The Admin Menu Navbar project exists to provide the Administration Menu module for large screens and Navbar for small screens. Check it out to combine the best of both worlds.
Administration Menu's search plugin can help make exploring the menu system a bit easier. Be sure to enable it in the module's configuration to give yourself access to a quick menu search tool.
Workflow with Drupal Shortcuts
One of the features of the core Toolbar module I missed when converting to Administration Menu, is the visual focus on Shortcuts. While it’s certainly possible to use Shortcuts with Administration Menu, they’re second-class citizens within the navigation hierarchy. Toolbar gave Shortcuts a space to live in on the right side of the navigation. It’s not the most intuitive location for something that, by their very purpose, should be used frequently, but at least it highlights them. Administration Menu doesn’t even make them available by default. Shortcuts don’t get much love, and I think that’s because their accessibility and focus made them slower or difficult to use with incredibly popular Administration Menu.
Enter Navbar.
Navbar takes the treatment of Shortcuts and moves them up to first-class citizens within the navigation hierarchy. They’re front and [left aligned]. Shortcut’s iconography in Navbar instantly draws attention for non-technical content contributors; typical Internet users. That star icon calls to them:
What’s in this drawer? Is it an aptly named set of useful tools for me?
Ember works in concert with Navbar and Shortcuts. Administration pages and edit pages provide for a quick one-click button to add the page to the shortcuts listing. Just click the Star icon on the right to add the page to your shortcuts.
Customize the Drupal administration experience for your clients and users. Put those bookmark-style frequently used links into the Shortcuts system. Will your editors need to constantly access the menu system, block system, or a specific node for their workflow? Perhaps they’ll frequently need to review a draft content queue. Add a Shortcut! This is where you can add value to the folks using the system you build: make their life easier. It’s a simple, yet often overlooked step.
Extras: manage modules, fields, and menus simply
While Ember and Navbar make up the backbone of a modern, mobile-friendly, Drupal 7 administration experience, there are a few extras we always include.
Disable the Drupal core Overlay module
You either love or hate Overlay.
drush dis overlayThis is one of the first commands I run on a new Drupal install, so I think you know where I stand. Sure, the idea that I can edit the site configuration from my current content page, may sound nice. I make my edits, I return to the content page I was on.
In practice, this doesn’t really work as planned. As I’m navigating through the configuration pages, making changes, clearing caches, submitting forms, the DOM ends having to be fully reloaded. That means that the configuration page reloads but also the content page under the overlay. You end up causing two page reloads, slowing down your work and adding some extra work to the server.
I don’t know about you, but I end up working in multiple browser tabs, anyway. This eliminates the use case for Overlay anyway. I end up refreshing the content page I started from (where I probably ran across an issue) in a separate tab, this way I can control when the refresh occurs and I can make a proper comparison.
In addition, Overlay, which is an AJAX-dependent (JavaScript) process, is known to cause issues with a variety of contributed modules that are JavaScript-heavy.
Disable Overlay.
Make browsing Drupal Modules easier with Module Filter
More serious Drupal developers rarely find themselves on the Modules page as they’re doing any module-related work with Drush in the command line. However, not everyone is a serious Drupal developer.
System Administrators and general Web Developers are often the folks who maintain Drupal systems. As much as we, as Drupal Developers, will push for the use of Drush, that Module list page will be used often.
The Modules page has a terrible user experience.
It’s information overload. There’s summary data (version, description, requirements) for every Drupal module available to the implementation. Larger implementations will have hundreds of these. Have you found yourself hitting CTRL+F (or, ⌘+F) to text search the page for the module name you’re looking for? Make your life easier. Help your colleagues.
Install Module Filter, a Drupal module.
What are the benefits of Module Filter?
- JavaScript-powered instant text search
- Filtering: show/hide Modules that are enabled, disabled, required, and more
- Show recently added Modules
- A more approachable, scan friendly list of basic Module information
Improve the Drupal Field UI
This tweak is really for site builders as I suspect your site editors aren’t often going to be mucking with the Field UI.
I always found it irritating that Fields had an edit page and also a field settings page. Why not merge these two things? That’s exactly what Backports module does, a change backported from Drupal 8. It removes an extra step for you as you’re creating and editing your Content Type’s Fields.
Goodbye, Field Settings.
Simplify Drupal Menu Administration
The Menu UI, just like the Field UI, seems to have a totally unnecessary extra step. When selecting edit menu why in the world can’t you edit the menu links? Really, how often are you changing the Menu name (which is what edit menu provides by default)?
The Simplified Menu Administration module merges the edit menu and list links options together. The merged edit menu page provides for naming as well as link resorting and modification.
The space that used to contain list links now provides a direct add link option for the specific menu.
If the site you’re building or editing has a large menu system, simplifying the Menu UI workflow can cut significant effort and frustration off your workflow. Combine this with a solid internal link strategy and you'll be in a good place managing your link strategy.
Modernize Drupal 7’s Administration System
Combining all these tools together, we create a modern Drupal admin theme experience. This system of theme, modules, and libraries will improve site user workflow, expand device support, and generally make the system more approachable to site users.
Let’s bring it all together with a series of Drush commands:
drush dis overlay toolbar -y; drush vset admin_theme ember; drush en ember_support navbar backports module_filter simplified_menu_admin -yWith a quick copy+paste and enter, you’re on the way to creating value for the folks that pay the bills in the projects you build: the managers, contributors, and editors. As the man behind the Macintosh interface said:
As far as the customer is concerned, the interface is the product.
-Jef Raskin
Save them time, give them a better experience. Bring them a step closer to their inevitable Drupal 8 migrations, reduce that future heartache. Give them the ability to use the systems you build from more devices, simply.
Did you like this article or know a team in need of help with their Drupal administration workflow? Share it! Want to take Drupal administration and workflow to the next level? Hire our Drupal team for a completely customized experience!