The Road to deninet 6.0: Better Breadcrumbs, Better Errors
The Windowlight theme made some progress this weekend despite my limited time. Since my last, hastily written entry, it dawned on me to check out drupal's themeable functions. While these functions solved some of the string-replace hacking, it's far from the proper separation of data and presentation I would prefer to see.
This weekend I focused on two particular aspects of the new theme: breadcrumbs and error messages.
Breadcrumb trails are today considered a standard website UI element. They allow you to quickly navigate deep hierarchical structures by providing you a series of links that refer to "parent" pages. From my own experience, I know that no complex website should be without a breadcrumb trail element. In my previous theme efforts of Citylights and Starlights, I had left the breadcrumb trails provided by drupal relatively unmodified. I was still new to theme development and as a result, did not put as much thought into their value.
This time, however, I wanted to improve the deninet UI experience, and proper breadcrumb trails are essential. After some research at the venerable listamatic, I came up with a preliminary design. Implementing it in drupal, however, proved far more difficult than I had expected. The HTML provided by drupal wasn't ideal for this sort of modification. Unaware of the theme functions, I resorted to some ugly hacks to even try to get it to work. Even then, it wasn't as good as it could have been.
As I was clicking through Stumbleupon in a zombish attempt to stay awake, I ran across this article from Janko at Warp Speed. The article lays out how to create http://apple.com style breadcrumbs using some simple CSS. While my opinion of apple has suffered lately due to their poor attitude toward iPhone developers and 3rd-party systems, I still find their software UI standards to be the best around. Drawing upon the article and the theming functions, I set about coding a new breadcrumb widget.
During the process I began to find it difficult to find a spot to put the thing in the web design. I eventually narrowed it down to two locations. One was over the main header graphic, the other at the top of the content area. After some debating, I settled for immediately above the content area. It's closer to the text, meaning less mouse travel for users. Even with the issue decided, something felt wrong. It wasn't just mouse travel, but scrolling.
Previous versions of the theme had the header graphic taking up a majority of the screen space. This forces the user to scroll downwards just to see what a page is about. In other words, the graphic was unnecessarily dominating the design while contributing little to usability. For this reason, I shorted the header area by several hundred pixels. This reduced horizontal scrolling and tightened the overall feel of the theme.
Also, Windowlight will feature the return of something not seen in the current Starlights theme -- the Denizen Entertainment logo. The "brick" didn't seem to have a good place in Starlights. I was also away from the notion as deninet as a organization toward that of a solitary effort. The logo didn't feel appropriate at the time, but I've grown to miss it more and more. Staring at the earlier versions of Starlight also felt...lacking. There was a distinct sterility I wanted to correct. Placing the logo in the corner of the content area was the obvious choice for placement, as it's be the standard location going back to deninet 2.0. Sizing, however, was a concern.
I didn't want to make the logo appear too small. A small logo almost seems apologetic. Too large and the logo would dominate the page. I wanted it to be just right, present and quietly proud. After some trial and error and encouragement from a friend, I selected the size you see in the image. Interestingly, it also solved some positioning problems with the breadcrumb trails.
As I was working with the new theme -- testing it out on different pages -- I also began to find another problem. The breadcrumb trails provided by drupal aren't particularly effective. More times than not, I would find the trail to be "home > Current page", a nearly useless configuration. After some searching, I located the Custom Breadcrumb module, which allows you to control your breadcrumbs. Combined with views, I believe the usability of the site can be greatly improved.
Today, however, I wanted to cover a different series of issues. For a while now, I've wanted to customize the status and error message boxes provided by drupal. In previous themes, I've simply styled them without seriously examining their usability. In deninet 4.0, I made a special effort to create friendly error pages. (This incidentally, also spawned one of my favorite error messages ever: "Uncaught FeatureNotImplementedException, explaination: programmer lazy.") Drupal provides two kinds of error messages, status messages and error messages. The only difference between the two in Drupal's default presentation is that of color. Status messages are green, error messages are red.
I felt this could be improved through the use of the theme functions. I created a override that interpreted the error type as it is sent to the theme engine. Then, it would either print "The following action has been performed", or "The following errors occurred" in addition to a list of what actually happened. It was easy to add an additional line at the bottom to suggest to the user how to react to the message.
Oddly enough, I spent most of the day trying to get the background of the message boxes just right. Originally, I wanted to include a simple icon. As I began working on it, however, I felt I wanted to give it more than a simple solid-color background. Windowlight has a recurring theme of stripes throughout its UI and I felt that the same could be used here for a subtle, but aesthetically enhancing effect. The stripes were easy enough to produce, but the message boxes still lacked an icon.
There was no easy way to add one without adding enough div to the message. While I could easily do that, I stumbled upon another problem. I had wanted to identify status messages with a round 'i' icon, and errors with a triangular or octagonal '!' icon. As you can see, 'i' and '!' next to each other are kind of difficult to tell apart. After some more thinking, I decided to go with large, subtle text in the upper right corner of the boxes.
The theme is shaping up. Whenever I go back to the production site after working with the new theme all day, I shudder a bit. Hopefully, the new theme will be ready soon so I can focus on competing the 6.0 features.
