One Line Toolbar

Adrian Sutton

I was going to write a post around accessibility and WCAG 2.0 but got annoyed once again about the EditLive! toolbar taking up two lines instead of one.  I’d already removed a whole bunch of stuff from it but it was still wrapping around by a few buttons.

It occurred to me that there are a range of functions that I had on the toolbar because I use them frequently, but that aren’t actually required because I always use the keyboard shortcut. In particular, I have no need for cut, copy, paste, undo or redo because without exception I use keyboard shortcuts. I could probably apply the same logic to strong, em and insert hyperlink as well but my toolbar fits on one line with them so they may as well stay.

Here’s what it looks like:

  • Styles
  • Insert hyperlink
  • Insert image
  • Strong
  • Emphasis
  • Insert unordered list
  • Insert ordered list
  • Decrease indent (actually I always use shift-tab anyway)
  • Increase indent (ditto but for tab)
  • Insert table (useful on the toolbar so you can just drag out the size instead of going through a dialog)
  • Pop out into a new window – great for getting that extra space you need to see what you’re doing.

Everything else is still available in the menus if I need it, but the toolbar is reserved for really quick access to common stuff – just like it should be.

This leads me to Sutton’s first law of editors:

The perceived value of an editor for purchases changes in proportion to the number of buttons on the toolbar, whereas the actual value of an editor for authors changes in inverse proportion to the number of buttons on the toolbar. Thus, editor vendors should add as many buttons to the toolbar as possible to show off the functionality and nearly all of these should be removed before you actually put it into production. Note however that this is about toolbar buttons, not features – I use an awful lot more functionality than what is on the toolbar but not commonly enough to need to move it out of the menus. This minimal toolbar simply wouldn’t work with an editor that didn’t also have a menu bar.

Note to self: I really must add a good style for highlighting important sections like the law above.

Further note to self: Also need a good style for these notes to self.

Note to engineers: I love how easy it is to add drop shadows with the inline image editor. Finally even lazy people like me can join the Web 2.0 drop shadow revolution! Fantastic work.