Software

It's fair to say, on a fresh install the content authoring experience in Drupal needs improvement. WYSIWYG editors are often criticised for various reason such as the ugly HTML they are known to generate or the power they give users to mess up typography. While these are valid criticisms, there is definitely a right and wrong way configure these editors. Doing things the right way will empower users while keeping them safe from nasty pitfalls. Note: this guide assumes you're already familiar with a typical Drupal WYSIWYG setup.

Provide a true WYSIWYG experience

It's important that a WYSWIYG editor represents exactly what appears on the front-end of your website. While it seems obvious, it's easy to ignore and has a big impact on a user's experience.

Our WYSWIYG stack is:

Completed Drupal site or project URL: https://www.concern.net

Concern Worldwide is a leading international humanitarian organization dedicated to tackling poverty and suffering in the world’s poorest countries. Their main website, www.concern.net, plays an important role in their fundraising process. It enables people from around the world to donate towards specific campaigns and ensure that their money is distributed to where it’s needed most.

SystemSeed has the wonderful opportunity of partnering with Concern in leveraging Drupal to power the Concern Worldwide platform for a number of years spanning all the way back to the days of Drupal 5. This particular site was upgraded to Drupal 7 in 2012 as part of a large platform refactor which aimed to consolidate all of Concern’s Drupal websites under a single common platform. We wrote about the transition from standalone sites in this case study.

Since then, we have been leading a large project to bring full responsiveness and optimisations across a wide spectrum of devices to all sites on that platform. Today (July 3, 2014) sees the completion of this project with the rollout of a fully responsive and adaptive theme layer, catering for its widest audience ever. In this case study, we’ll look at some of the components of this project, the processes, the challenges, the successes, and lessons learned along the way.

Key modules/theme/distribution used: OmegaBreakpointsBreakpoint PanelsPictureInline Form ErrorsOrganizations involved: SystemSeedTeam members: mrfeltonrahulbileroblavfastangeljucallme

So I am not kidding NavBar is literally the next step in Drupal navigation, it is being used in core for Drupal 8.  This is great news because not only does it mean that the Drupal 8 core will contain some much needed improvements to the administration navigation scheme.  Back end user improvements like this are perhaps the thing that makes me most excited about what Drupal 8 is bringing to the table.  Lets look a little bit at NavBar.

What You Get

Pretty simply put NavBar gets you a responsive administration toolbar for your Drupal users.  It really isn’t going to do anything for what your visitors see, but your content creators, site administrators, and even site builders will see this as a much welcomed change.  NavBar is first and foremost completely responsive, and for those of you who use the traditional Drupal administration toolbar on your mobile phone oh boy are you excited.  The standard Drupal 7 install, not to mention Drupal 6, doesn’t offer the most mobile friendly administrative experience.  NavBar helps resolve this.  NavBar also offers a more flexible navigation option.  You are able to use NavBar at the top of your site above the header, or as a sidebar on the left hand side.  The customization of the tool, really helps set it apart.

Not only is the mobile experience improved, but there is a much cleaner and professional looking image presented than the Drupal 7 administration menu.  Though this might not seem like much, for those of us who build Drupal sites for clients this is a big deal.  Image is everything, and it is tough to sell Drupal’s out of the box usability against WordPresses out of the box usability.  We have a lot of admin usability improvements in our standard Drupal installation to help combat this, but now NavBar is another one.  Users almost expect clean and friendly design, and now they can get it. 

Installation

I am not going to lie, NavBar in its current state is a bit of installation work, but most people should be able to figure it out if they have a little understanding for how Drupal is structured. 

The first step for me is downloading and installing the project.  I think that drush is the best tool for installing and enabling projects like this, but particularly for NavBar I suggest installing the project before moving to some of the other steps.  The reason is that once the project is installed and enabled it will put some indicators on your /admin/reports/status page that can really help you troubleshoot in the next steps.

Once the NavBar module is enabled, you can visit the site’s status report using the path above and notice that there are a three statuses now associated with NavBar, and this is where the fun comes in.  NavBar requires the installation of three libraries (Modernizr, Backbone, and Underscore), and you may have them already installed, or at least some of them.  Using the status page at this point will help you find out if you have them already installed and ready to run, or whether you need to install them.
If you find that you need to install them, the process isn’t all that complicated, there are some helpful guides on the project page that will point you in the right direction.  Or give us a shout we would be happy to help.  Essentially it is a matter of downloading the libraries, or cloning their respective repositories, and moving them to your libraries folder in the Drupal installation.  The Modernizr library requires you to follow a link and download a specific minimized version of the library but there are specific instructions to follow on the project page to help guide you here, so I won’t reinvent the wheel here.  The instructions are pretty thorough, and relatively simple. 

Once you have the libraries installed you can disable your regular administration toolbar and you are off and running.  If you follow those steps and still aren’t having any luck, the site status report is the best place to look.  Most likely it is an error with the libraries that were installed, and that report will point you to which library is causing trouble, and maybe even what the problem is.

We have fallen in love with NavBar, and it has started making a huge impact on our clients and how well they like using Drupal.  We highly suggest you use it.

For more tips like these, follow us on social media or subscribe for free to our RSS feed and newsletter. You can also contact us directly or request a consultation.