A First Look at Spark Usability Improvements in Drupal

Spark 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:

tutuploadsmedia_1344608997827.png

After installation, your site will look normal:

tutuploadsmedia_1344609280478.png

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.
tutuploadsmedia_1344609294706.png

Click Edit and a grey overlay comes over the page. Anything that you can edit will now be outlined in blue.

tutuploadsmedia_1344609348926.png

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.

tutuploadsmedia_1344610045795.png

Click the Save button in the top-right corner of the pop-up to complete the change.

tutuploadsmedia_1344610097763.png

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:

tutuploadsmedia_1344610148053.png

Click on the Tags area to edit the Taxonomy:

tutuploadsmedia_1344610165514.png

Click on any field to edit it:

tutuploadsmedia_1344610210240.png

Click on the body and you’ll get a floating editor bar with a WordPress-style list of around 10 buttons.

tutuploadsmedia_1344610251432.png

You can click on any images in the content and drag them and around to place them elsewhere in the content;

tutuploadsmedia_1344610295588.png

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.

tutuploadsmedia_1344610632662.png

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:

tutuploadsmedia_1344610585216.png

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.

tutuploadsmedia_1344610523462.png

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:

tutuploadsmedia_1344612057682.png

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:

tutuploadsmedia_1344612498911.png

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:

tutuploadsmedia_1344612457137.png

These breakpoints can be edited to meet your needs:

tutuploadsmedia_1344612535510.png

You can also create your own fluid grids:

tutuploadsmedia_1344612559261.png

And define regions for your layouts:

tutuploadsmedia_1344612581387.png

Instructor

  • Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Blog Rating
Subscribe
Notify of
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Phil

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!

Rooby

This looks fantastic. Great work.

Lets hope we can say fairwell to that overlay in drupal 8 🙂

Jerome Danthinne

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.

Jesse Beach

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.

chloe

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.

Kurt

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.

7
0
Would love your thoughts, please comment.x
()
x