Spark update: mobile administration in Drupal

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.

Comments

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'.

August 14, 2012 - 05:16
Wim Leers (not verified):

That's a great point! Thanks a lot for taking the time to writing that comment — we'll make sure it is taken into account :)

August 14, 2012 - 21:03
Anonymous (not verified):

Great stuff! Can't wait.

August 14, 2012 - 10:25
Adagio (not verified):

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

August 14, 2012 - 13:56
Nate Jones (not verified):

That looks awesome guys! Great work. I especially like the new dashboard. Very clean and clear. Nice job.

August 14, 2012 - 14:51
Tom Tran (not verified):

From the image above it seems Spark doesn't have a responsive drop-down Menu.

If allowed may I contribute some menu option like this:
http://www.responsinator.com/?url=http%3A%2F%2Fdemo.themeski.com%2Feuler%2F

@webtomme

August 14, 2012 - 16:55
Steven Spencer (not verified):

Are you planning on building in gesture support for iOS, Android, etc...? That would be amazing!

August 14, 2012 - 16:56
Luis Aveiga (not verified):

Very Nice work, mobile matters. Thanks :)

August 14, 2012 - 17:10
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): http://developer.android.com/design/style/metrics-grids.html

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.

August 14, 2012 - 18:16
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.

August 14, 2012 - 21:09

Add new comment

© 1999-2014 Dries Buytaert Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.
Drupal is a Registered Trademark of Dries Buytaert.