A First Look at Spark Usability Improvements in Drupal
Over the last few months some of the most talented people in Drupal have been working on usability improvements.
Their project is called Spark. Initially their improvements are being released for Drupal 7 and the hope is that they will later be moved to Drupal 8. We mentioned Spark in our summary of Drupal 8. You can also find more background in Dries’s launch post for Spark.
The first Alpha release of Spark has just been released, so we decided to take it for a test drive. Come with us and see where Drupal usability is headed.
Installing Spark
You can download Spark from http://drupal.org/project/spark.
Spark is a Drupal 7 distribution so you install as normal, but just make sure to choose Spark on the first installation screen:
After installation, your site will look normal:
Using Spark
The key difference you’ll notice immediately is with the black admin bar. There are now View and Edit buttons in the top-left corner.
- View is the default setting.
- Edit is where the Magic happens.
Click Edit and a grey overlay comes over the page. Anything that you can edit will now be outlined in blue.
Click on the title of the article and you’ll get a small pop-up. You can edit the title directly inside the pop-up.
Click the Save button in the top-right corner of the pop-up to complete the change.
That’s about it on the homepage, although you can also change the author and date.
The real magic happens when you click through to the full article. Here you can edit almost anything in the content:
Click on the Tags area to edit the Taxonomy:
Click on any field to edit it:
Click on the body and you’ll get a floating editor bar with a WordPress-style list of around 10 buttons.
You can click on any images in the content and drag them and around to place them elsewhere in the content;
Admin Area Improvements: New Theme
There’s a new admin theme in Spark which is called Ember. You can see a typical screenshot in the image below.
With the alpha version of Spark, the Drupal 7 overlay is gone. This is a good thing. Although it looked more professional than the Drupal 6 admin area, the overlay was frequently buggy, and slow. If the admin overlay isn’t included in Drupal 8, that will be a good thing.
[UPDATE] The overlay may return in future versions of Spark. See comments below.
Admin Area Improvements: Navigation
The navigation in Drupal 7 is messy. The black admin bar across the top is not a problem, but the sub menus are. The sub menus are in the top-right corner and easy to miss.
Spark puts the sub menus in the top-left corner, directly under the admin bar:
Admin Area Improvements: Improved Module Area
Module filter is now a core feature in Spark. It allows you to navigate the modules page much more efficiently.
Panels
A simplified version of Panels is now also part of the Spark core. Go to Structure > Panels and this is what you’ll see:
By default, you can’t do anything yet so you’ll need to go the Modules page to enable the remaining Panels modules, plus the Page Manager module. When you go back to the Panels page, this is what you’ll see:
At the moment, the usability for Panels is the same in Spark as for a normal Drupal 7 installation. The key difference is that Panels can now create responsive layouts. You can create a Smartphone layout and then a different layout for tablets and your desktop:
These breakpoints can be edited to meet your needs:
You can also create your own fluid grids:
And define regions for your layouts:
I’m so impressed byt the work being done on Spark. It addresses key concerns / limitations with the current state of Drupal. I’m looking forward to giving the alpha a spin!
This looks fantastic. Great work.
Lets hope we can say fairwell to that overlay in drupal 8 🙂
Very nice work!
Just a bit sad about your thoughts about the Overlay module.
I’ve been using it on every site I’ve built, and never experienced bugs… and I love the fact the when I close it, I’m back at the point I was before.
The great work done on that by Mark Boulton and Leisa Reichelt shouldn’t be left aside I think.
Jerome, we’ll have it back in the distro eventually. For now, while the dev cycle is going strong, the Overlay module imposes some burden on the constant page refreshing when you’re working with CSS and JavaScript.
Many thanks for commenting Jesse. I know you’ve done a lot of great work on Spark.
I’ve updated the blog with to say that the overlay will likely return in future Spark releases.
I am SO happy someone is working on this. I think it will be huge in making Drupal more user-friendly, helping out with the learning curve, and ultimately making it more accessible to people with non-technical backgrounds (like me!) Thanks Jesse and everyone else for all your hard work.
Why would you want to remove the admin overlay (main admin navigation) in the admin theme? Other than that this looks outstanding. Leaps and bounds for Drupal.