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.

Job Openings: Drupal Developer, Web Designer with Usability focus

Greg — Wed, 18 Mar 2009 22:15:27 +0000

The Growing Venture Solutions team has expanded over the last 6 months to add two new members. In the face of increasing demand for our services we are now looking to hire new people to join the team.

We are hiring two people. These descriptions are for the ideal candidate, so if you have some of the qualities and are looking to expand in these areas then please still contact us.

Website Designer With a Strong Usability Focus

Most of our projects are heavy on development, but our goal is to be a full service shop. We've satisfied this need so far by working with contractors, but now we want someone to join the team. One of your tasks will be to help polish our site (we've started work on this, but it would be unfair to keep you out of it). You'll also work with our clients on identity, user experience, and wireframing. And if you're interested you will help with some sales work.

Drupal Generalist: Site Builder, Developer, Support Engineer, Trainer

EDIT: This position is now filled.

We provide many services around Drupal: building sites, writing custom code and enhancing modules, providing support to our support clients, and providing training services. If you are a "Drupal generalist" interested in providing at least some of these services that's great. A resume is less interesting than a solid record of contribution to the Drupal project - please provide a link to your drupal.org user profile.

Locations and What it's like to work with Growing Venture Solutions

We like to think we're a pretty special company. The best way to describe us is a hybrid between being a freelancer and an employee. For more details, see this description.

We are currently located in Denver, Colorado and New York City which means we're somewhat virtual. However, we value face-to-face communications and are looking for people specifically in those areas or who are interested in moving to those areas (really, are there any better cities on earth? we think not).

Next Steps - Contact us

If this has your curiosity piqued, the next step is to contact us.