Cloud Platform
D7 to D8 Toolbar Evolution
As we saw in Dries' keynote in Portland there's a new toolbar in Drupal 8 that looksand worksquite different to the one in Drupal 7. This series will give some history on how the new toolbar came to be as well as some of the design thinking behind it and how it can be used and extended by content authors, site builders, themers, and module developers.
The Drupal 7 toolbar was a big improvement over what we had in Drupal 6 but just in the short few years since it's introduction the whole landscape of front-end design has changed with the explosion of mobile devices and the toolbar needed to change with it. The image below dramatically illustrates the weakness of the D7 toolbar on a phone.
The Drupal 7 toolbarLack of responsiveness wasn't the only gap in D7 toolbar. The proliferation of contrib menu systems that users were using to replace toolbar pointed to other usability needs:
Admin tools:
In addition to these contributed solutions in Drupal 7 Roy Scholten and Lewis Nyman (now maintainer of the Seven admin theme) from the Drupal UX group had already worked on prototypes that solved these and other responsive issues.
Lewis Nyman's prototypeThe Spark team picked up and extended that work with Navbar in Drupal 7 which eventually became the Drupal 8 responsive toolbar.
The advantages the toolbar in Drupal 8 has over previous versions are that it's fully responsive, configurable, themeable and extendible. It has a top application bar with a home link, menu tab, user tab, shortcuts tab on the left and, depending on your context, an edit toggle, responsive preview dropdown or tour trigger on the right.
Link, tab, toggle dropdown triggerwhy all the differences?
The flexibility of the toolbar comes in it's ability to accommodate different types of user interactions. For instance home is a link that always brings you back to the homepage of your site but menu is a tab that opens the menu tray without leaving the page you are on. Shortcut and user are also tabs that open the tray. Edit is a toggle that shows and hides edit-in-place links (contextual links) so users on touch devices can see what's editable. Responsive preview (a module to view what your content will look like on different devices) has a dropdown, and Tours (A Guided tour of administrative pages) has a trigger that starts the pop-up tour of features of the current page.
As with everything in the toolbar all of these interactions are extendible so if a module developer wants her module to add a link, tab, dropdown, toggle, or trigger to the application bar, she can do that. The most common practical application of this will probably be for distribution developers who want to add an entirely segregated administrative section, eg. store in Drupal Commerce.
Application bar with store addedThe tray provides a place for menus and their children. It has four modes: Horizontal left-to-right (LTR), Horizontal right-to-left (RTL), Vertical LTR (screen left), and Vertical RTL (screen right). So if, for example, your content language is english (LTR), and you are viewing the site on a desktop, your toolbar will be horizontal-LTR. If your content language is hebrew it will be horizontal-RTL. By clicking the menu orientation toggle you can change the menu from horizontal to vertical and the menu will move to the left or right depending on your content language.
Application bar and tray (horizontal LTR)Application bar and tray (vertical LTR)If you shrink your browser window beyond a certain width or view your site on a tablet or phone the menu will automatically change to vertical to fit in the smaller viewport. This combination of responsiveness and configurability is one of the great strengths of the toolbar.
Another responsive feature of the toolbar is that on a phone the labels in the application bar disappear leaving only the icons. This saves a great deal of space and follows current responsive best practices.
Toolbar on iPhoneAbsolutely. Every feature of Drupal 8 core has to pass the accessibility gate. In fact in the process of creating toolbar, we created two whole new systems for making things accessible in Drupal: The tabbing manager, which tells a screen reader where to skip to next in the UI, and Drupal announce, which is the method for adding spoken text to things in the UI.
The overlay and jquery modals have been refactored to be responsive and to work in conjunction with the toolbar depending on it's state. Some of the features of this are:
Cloud Platform