Start a FREE 7 day trial! Get training videos and books, plus expert support:  

Drupal Tutorials and How-to Support Articles

A First Look at Spark Usability Improvements in Drupal

Spark DrupalOver 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 https://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
 

 

Start a FREE 7 day trial! Get training videos and books, plus expert support: