Managing Your Use of Color

Color is invaluable as a design tool. You use it to call attention to certain elements on your page. You use it to distinguish one type of content from another type. However, color is just as much a visual element as an image, so, as an accessibility-minded Web builder, you need to be careful about how you use it. After all, many your visitors are colorblind.

TIP

Try looking at your site designs in black and white only. If certain elements disappear without color, or if others don't have the proper emphasis, you might want to rethink your strategy.

Take the example in Figure 6.1. Notice how the underline helps you spot a link in this block of text. However, if you remove the underline, as in Figure 6.2, you have no way of telling where the text ends and the hyperlinks begin.

Figure 6.1. Underlines help to call attention to the hyperlinks in a block of text.

Figure 6.2. Remove the underlines, and someone who can't perceive color has trouble finding the links.

So, while color is an effective visual cue or indicator for an element such as a hyperlink, it shouldn't be the only visual cue you provide. By all means, use color to call attention to elements on your page. Just make sure you send the color in with some backup. Use an underline, a solid border, an arrow symbol, boldface, italicsanything that translates to a black-and-white environment, as in Figure 6.3.

Figure 6.3. You don't need the underline to make hyperlinks work without color. Boldface works just as well, and any color-independent visual cue does the job.

Chapter 7. Leaving Breadcrumb Trails

Folktales and fairy stories have much to teach us. Sure, they might seem like kid's stuff, but, if you examine them closely, you find that they tackle the big questionsevil, justice , virtue, Web designin deeply symbolic ways.

GEEKSPEAK

A breadcrumb trail is a navigation element that helps your visitors figure out where they are in your site hierarchy by showing the current page's relationship to the rest of the surrounding structure.

Take the story of Hansel and Gretel. Hansel leaves a trail of breadcrumbs so that he and his sister Gretel can find their way out of the forest, where their wicked stepmother tries to abandon them. On the surface, the story is just another diatribe against wicked stepmothers, until you realize that the wicked stepmother is you, and your long-suffering visitors are brave Hansel and Gretel, looking for a way out of the gnarled woods of your Web site.

FAQ

What is the real story of Hansel and Gretel?

In Hansel and Gretel by the Brothers Grimm, the wicked stepmother tries to abandon her kids in the forest twice. The first time, Hansel drops a trail of white pebbles. The second time, he goes with the breadcrumbs, which don't prove to be as useful. The birds of the forest eat up the crumbs before he and Gretel have a chance to follow them. So, even though we call it a breadcrumb trail in Web parlance, what we really mean is a trail of white pebbles.

Nobody wants to be the wicked stepmother in anyone 's fairy story. Wicked stepmothers all die horribly. Hansel and Gretel's starved to death. However, be comforted, just as Hansel said to his sister. To prevent your Web site from sharing the wicked stepmother's fate, all you have to do is leave a breadcrumb trail for your Hansels and Gretels to follow.

A breadcrumb trail is a navigation element that helps your visitors figure out where they are in your site's hierarchy by showing the current page's relationship to the rest of the structure. It's like a mini site map for that particular section of the site.

This is one of those concepts that makes more sense when you see it. Say an arm of your European folklore site goes like this:

Fairy tales

Brothers Grimm
- Hansel and Gretel
- Rapunzel
- Snow-White and Rose-Red
- The Elves and the Shoemaker
Hans Christian Andersen
- The Ugly Duckling
- Thumbelina
- The Emperor's New Clothes
- The Poor Little Match Girl
Charles Perrault
- Little Red Riding Rood
- Cinderella
- Sleeping Beauty
- Bluebeard

The breadcrumb trail on the Brothers Grimm page is:

Home > Fairy tales > Brothers Grimm

Moving down to the Rapunzel page, you get:

Home > Fairy tales > Brothers Grimm > Rapunzel

But on the Cinderella page under Charles Perrault, the breadcrumb trail is:

Home > Fairy tales > Charles Perrault > Cinderella

Notice that the breadcrumb trail doesn't try to give the entire site structure. It just shows your visitors the logical path to the current pageand, more importantly, the path back home.

Typically, all the items in a breadcrumb trail are links, except for the last entry in the list, which represents the current page. Your visitors should be able to click on any of the previous items and work their way back to the home page.

TIP

Just as Hansel started dropping breadcrumbs as soon as he walked out the door of his house, always begin your site's breadcrumb trail with the home page.

{% if main.adsdop %}{% include 'adsenceinline.tpl' %}{% endif %}

Breadcrumb trails are extremely useful, especially if your site has a complex structure with many levels of pages. These trails help your visitors find their way around, and they give a quick "You are here" to people who arrive on your site from a search engine.

Of course, a breadcrumb trail is only as useful as you make it. Try to position it near the top of the page, right where visitors will see it, as in Figure 7.1. In addition, it's a good idea to distinguish the breadcrumb trail from other types of text navigation. If the breadcrumb trail has the same visual style, as in Figure 7.2, your visitors might not be able to tell what's what. The convention for breadcrumb trails is to use capital and lowercase letters instead of all caps and to separate items with greater-than signs instead of pipes, as Figure 7.3 shows. You're certainly free to experiment with other looks, but keep in mind that your visitors probably already understand this convention.

Figure 7.1. Try to position your breadcrumb trail near the top of the page.

Figure 7.2. Don't use the same visual style for breadcrumb trails as you do for other kinds of text navigation. Your visitors might not know which is which.

Figure 7.3. Stick with cap/lowercase style for the links separated by greater-than signs, and you can't go wrong.

TIP

If your site structure doesn't go deeper than, say, two levels of pages (main category and subcategory ), you don't need breadcrumb trails.

Finally, breadcrumb trails work best as an alternate method of navigation. All good sites have at least two. Don't try to build your site's main navigation scheme around breadcrumb trails, or you'll have a lot of frustrated visitors looking for the Hans Christian Andersen link when they're stuck in the recesses of the Brothers Grimm area. However, if you supplement a typical nav-bar scheme with breadcrumb trails, you make it that much easier for your visitors to get around.

TOOL KIT

Breadcrumb Trail

Add this snippet of code to your page to create a linked breadcrumb trail. Just fill in the placeholders with the correct URLs and page names for your site. If you need fewer than three levels of pages, delete the corresponding lines of code.

[View full width]


[View full width]


<p>
  <a href="

index.htm

">Home</a> &gt;
<! The code for the greater-than sign is &gt; >
  <a href="

levelone.htm

">

Level One Page Name

</a> &gt;
<! Copy and paste the following line ad infinitum if you need

more than three levels of pages in your breadcrumb trail. >
  <a href="

leveltwo.htm

">

Level Two Page Name

</a> &gt;
<! The last item in the list doesn't get a link, because it

represents the current page. >

Level Three Page Name

</p>

Flylib.com

Category list

Similar pages

Managing Your Use of Color