Designing the site: CrackingDrupal.com - How to build a "speaking" navigation

evelyn — Wed, 24 Jun 2009 04:27:13 +0000

Hello - I'm Evelyn and I have recently joined GVS as a designer and usability tester. I have been working as a freelancer for the past seven years, and now that my daughter is entering 1st grade I am excited to be spending more face time with grown-ups!

My first task as a designer with GVS was to design a site for Greg's book: "Cracking Drupal". This was also my first real-world experience theming for Drupal and with some help, it was pretty simple.

I began by chatting with Greg about what he wanted the site to do and how it should look. I also gave him a simple design worksheet to complete with questions such as "Who is your target audience?" and "How do you want people to describe your site?" (If I could ask only one question, this last one would be it.) Greg wanted the site to draw on the cover of the book, and wanted it to be elegant, streamlined and easy to navigate.

Book Cover: As a starting point it was an obvious choice to take the book cover and modify it into the header and footer. I pulled the color palette from the cover as well, and added a burnt orange accent to offset the strong blues and blacks. In general I try to avoid black text on white, so the body copy and some headers are actually a dark blue.

Elegant: I always strive for elegance. By elegance I don't mean just "tasteful, refined or dignified" (Oxford American Dictionary.) For me, elegance in web design is integral to good usability. Even grungy, busy sites, when done well, can be described as elegant. So for Cracking Drupal that meant a clear hierarchy and harmonious color scheme taken from the book.

Streamlined and easy to navigate: Putting myself in the position of the site user, I looked at the main navigation areas Greg wanted. I have to admit that while I sort of knew what "errata" meant, I wouldn't have bet money on it. That led to the use of "Speaking Tabs" - navigation tabs that have a subtext area that describes what one will find on that page. I've seen these tabs here and there and wanted to try them out. I thought they'd be a perfect way to clarify some terminology, but they serve several other purposes as well:

liven up the header area of the site,
promote "Growing Venture Solutions" with a prominent position,
explain that clicking "purchase" will take you to Amazon.com, and
simplify the user experience by letting people know specifics like what excerpts exactly, what downloads are available, etc., without them having to poke around. (Less clicking for some folks = better user experience.)

Create Speaking Navigation in Drupal

For this site we could have just hardcoded the "speaking tabs" text into the theme, but we wanted to do this in a more sustainable way that we could actually use for clients some day. So, how to get the text onto the tabs in a way that is admin editable? We used the Primary Links and put the "speaking" part of the tabs into the "Description:" element of each menu item. Next up was to override the default theme_links function to show that text.

We created a theme specific override of the function, copied over the default code, and replaced the default line:

$output .= l($link['title'], $link['href'], $link);

With a bit more code:

if (isset($link['attributes']['title']) && $attributes['class'] != 'links inline') {
  $link['html'] = TRUE;
  $output .= l(check_plain($link['title']) . '<span class="speaking-nav">'.  filter_xss_admin($link['attributes']['title'])  '</span>', $link['href'], $link);
}
else {
  $output .= l($link['title'], $link['href'], $link);
}

The first line is an important one. The theme_links function is used for a lot of things so this conditional checks for menus that have a description set and where it's not an inline link (you know, those things under a node or comment). For this site that's a solid enough check that it only applies to the primary links, but you may need to do something more.

The fun part is inside that conditional where we tell the l function to expect HTML so that we can add a little span with the description in it and then run check_plain and filter_xss_admin on the user entered bits to stay safe (naturally).

The final result is a site that remains with the style of the book while adding a little extra fun.

Growing Venture Solutions - GVS - cracking drupal

Designing the site: CrackingDrupal.com - How to build a "speaking" navigation

Create Speaking Navigation in Drupal