Today, I'd like to share an HTML/JS prototype we've created for a mobile toolbar and dashboard for Drupal that we hope to include as part of the Spark distribution and then propose for Drupal 8 core as part of the Drupal 8 Mobile Initiaitve.

Drupal 7's default administration tools (e.g. Toolbar module and Shortcut module) were not designed in a “mobile first" way, and as such can be difficult to work with on tablets or smartphones. For example, here is a screenshot of what happens to the Toolbar and Shortcut modules when using a responsive version of the Bartik theme on an iPhone:

Drupal toolbar on iphone
On an iPhone or other mobile device, the default Drupal 7 toolbar and shortcut bars both wrap, taking up nearly a third of the screen.

Kevin O'Leary from the Spark team has come up with the following design. The toolbar design in particular takes heavy inspiration from efforts by Lewis Nyman and his mobile navigation prototype.

We set out to do justice to the complexites of Drupal's administration layer while accounting for the constantly evolving universe of devices. We think what we've come up with is scalable, responsive, and usable.

Here is Preston So, author of the prototype, demonstrating the functionality in a short, 7 minute video:

As we begin work on this feature, it will live at the Mobile friendly navigation toolbar project as a contributed module for Drupal 7 first. If these changes are well-received, I hope we can target this functionality for Drupal 8 core, as a replacement for the Toolbar and Shortcut modules.


Trsh (not verified):

Love it.

Some feedback Re: vertical pull out.

Toggles that move around the screen are an unnecessary load to the brain after the first few uses and the novelty has worn off. Even simple 120px slides in one dimension require a few extra brain watts to go fish for compared to the fixed alternative. It's unnecessary energy. 'Go fish'

People use the drawer metaphor a lot for these handy panels, but physical drawers don't have tiny moving targets. We'd grumble if there were.

There's a responsive advantage to this, too, I've found, when it's fixed to the top left edge, beneath the home button . No matter the device, it's top left.

An 'ahh' vs a long term go-fish 'grmblmmbmbl'.

Adagio (not verified):

Looks really awesome! Kept thinking spotlight type search would be a good fit though :)

Cameron Eagans… (not verified):

Looks very nice. I would like to see the mobile Dashboard <--> menu toggle be a bit bigger, though. If contrib modules are adding a bunch of items to that menu, then it can be very easy to miss the toggle and click on the menu item instead. The Android design guidelines recommend a 48dpx48dp minimum size (about 9-10mm on screen):

Apple iOS HIG doesn't have a size recommendation, but all of their buttons are about the same size as Android's, so it seems like a good pattern to follow.

Ryan Price (not verified):

First of all, I appreciate the flexibility and mobile-first-ness of this design. I'm sure it has taken lots of work and whiteboarding to get here.

I really hope that I as the Site Builder will have the option to replace this interface with others (or modify it). This reminds me a bit of the often-forgotten Dashboard screen from Drupal 7 - I don't know anyone who uses it.

At the same time, each of my sites includes a few to a dozen custom admin screens with draggableviews or views bulk operations for specific kinds of content administration, or a "vendor" dashboard for site with more user generated content. I realize the menu system with permissions goes a long way to delivering this, but for me as a a site builder improving the "out of the box" experience only goes so far to making my job easier.

As a trainer, this could certainly reduce a lot of the initial confusion with trying to get noobs up to speed, but I wonder if too many things are hidden behind a click.

I have not downloaded Spark yet, but I am looking forward to trying it out. I am most looking forward to the in-place editing experience.