Manage your website on the go - mobile admin is here

It's a no-brainer that web interfaces that are usable across mobile devices are in demand. Soon content management systems that don't provide this adaptability will be left in the dust. With Drupal, it is already here. 

Ember theme and Mobile Friendly Navigation Toolbar

Rewind: the push for mobile UX

In March, 2011, Drupal founder Dries Buytaert said in his keynote at DrupalCon Chicago, "If I were to start Drupal from scratch today, I'd build it for mobile experiences first, and desktop experience second." Later that year came the arrival of the Drupal 8 Mobile Initiative, which would “make mobile the big theme for Drupal 8”. 

In April, 2012, Spark arrived. Spark was a distribution for Drupal 7 that would serve as an incubator for authoring experience improvements, including mobile adaptability, to be tested in the field. The best improvements would be targeted for inclusion in the next major release. 

“With Spark, we want to test authoring experience improvements in Drupal 7 on real sites with real users and real content.” Buytaert wrote in this blog post

Fast forward to 2014: mobile admin now 

Back in November we decided to take some of these mobile enhancements for a spin. We installed Mobile Friendly Navigation Toolbar and Ember theme and away we went. Although early on there were a few kinks to work out these tools have come a long way even since then. Now, with the official release of Drupal 8 still months away, we have decided to recommend these to our clients who want mobile admin now. Used together, we believe they can offer Drupal 7 users a high quality mobile admin experience.

A quick overview:

Mobile Friendly Navigation Toolbar. This mobile friendly, collapsible admin menu is the Drupal 7 equivalent of the menu toolbar provided in Drupal 8 core. It provides large, “finger-friendly” buttons and will toggle between horizontal and vertical mode based on the device and view port orientation. 

Ember theme. Ember was designed especially for use with the Mobile Friendly Navigation Toolbar, and provides style overrides for commonly used modules such as Views, Ctools, and Panels (among others).  Ember isn't the only mobile-friendly admin theme for Drupal 7, but we like the pace and enthusiasm surrounding its development, and with Drupal 8 just around the bend we decided Ember would provide the smoothest possible upgrade. It also helps that Ember is now the chosen theme for all Acquia-sponsored distributions, ensuring it will be well-supported in the long term. 

Two more contributed modules now available for 7.x that we will soon be adding to our responsive toolbox:

Breakpoints. The Breakpoints contributed module was committed for inclusion in Drupal 8 in late 2012. In responsive design, breakpoints are markers indicating at which width and/or height a design should adjust in order to accommodate different devices. This module standardizes the use of breakpoints, and enables modules and themes to expose or use each others' breakpoints.

More info: Working with Breakpoints in Drupal 8.

Picture. Also a Drupal 8 core module. Used in conjunction with Breakpoints, the Picture module delivers alternate image sources based on device capabilities. We have been using the awesome Adaptive Image for responsive image handling on the front end, but will be switching to Picture for all new installations since it will be a part of core and thus more “future proof”. 

Try it out: Picture module (7.x) demo.

What's ahead?

So what can we look forward to? Plenty! Just because Drupal users can have a mobile admin now, that doesn't mean more work isn't being done to make it better. We will be keeping a close eye on this and are looking forward to new developments and feature improvements for Drupal 8 and beyond.