(If you don’t know what breadcrumbs are and want to find out more about why and how to use them, read through my previous post on the subject, “Hansel and Gretel Would be Great Web Designers“.)

By adding some code

If you feel comfortable working with your WordPress theme’s files, here are 3 different ways to incorporate breadcrumbs into your WordPress website. Choose a method depending on what content you want to use them for on your website.

Simple breadcrumbs for individual blog posts

A post over at WP Hacks details how to make simple breadcrumbs menus using basic PHP template tags. All you have to do is insert the following code into the single.php file wherever you want the breadcrumbs to appear:

<a href="<?php bloginfo('home'); ?>">Home</a> &raquo; <?php the_category(); ?> &raquo; <?php the_title(); ?>

You can style this with CSS to make it look a little nicer; my recommendation is that you wrap everything in a list like as follows, which will give you more options when it comes to styling:

<ul>
<li><a href="<?php bloginfo('home'); ?>">Home</a></li>
<li><?php the_category('') ?></li>
<li><?php the_title(); ?></li>
</ul>

I include the code here because this method is so simple to use. I’ve used it before, and it serves it purpose if you only want to include the breadcrumbs on your blog posts. The only drawback is that there is no flexibility to use it anywhere other than the posts on your WordPress website.

Advanced breadcrumbs for both pages and posts

When you want to add breadcrumbs to more than just blog posts, you need something a little more advanced in order to do that. Here are 2 different methods; both incorporate more advanced code to display breadcrumbs on both pages and posts:

• How to: Breadcrumb function for WordPress
• WordPress Breadcrumbs

With both methods, you just have to copy and paste some code into your functions.php file, and then insert some PHP code into your theme’s files wherever you want the breadcrumbs to appear.

I haven’t tried either one of these out myself, so if someone has used them, or tries them out on their website, leave a comment below and let me know your thoughts.

By using a plugin

If you’re not comfortable editing the code in your WordPress theme’s files, there are plugins available that give you the ability to style and manage them through the WordPress admin section, such as:

• Breadcrumb NavXT
• Yoast Breadcrumbs
• Breadcrumb Trail by Justin Tadlock

I haven’t tried out any of these plugins myself, so I can’t speak from personal experience about how well they work or if one is preferable over another. If you have used one of them or have any feedback about these plugins (or others I didn’t mention), leave a comment about it below.

Thoughts?

Do you have a preferred way of creating breadcrumbs on your WordPress website? If so, share your thoughts with everyone by leaving a comment below!

What are breadcrumbs?

Chances are you’ve seen breadcrumbs before, as many websites feature them in some form or another. But for those who are new to the concept, what exactly are breadcrumbs?

Simply put, they are another form of navigation that your visitors can use to find their way around your website when the main navigation doesn’t quite meet their needs. Breadcrumbs are almost always implemented the same way:

• Progressing from the highest level to the lowest, one step at a time
• Starting with the home page and ending with the current page
• Having a simple text link for each level, except for the current page
• Separated by a one-character symbol between the levels, usually an “>” or a “/”

Of course, the ideas behind using them are slightly more complicated than that, which is what I want to talk about here. I’m going to go over the main usability benefits from using breadcrumbs before giving some pointers on how to use them in ways that will both benefit your visitors and SEO.

Why should you use breadcrumbs?

There are a few main reasons why breadcrumbs should be used on a website:

• Pinpoint your location - Like the large maps at the mall, breadcrumbs show people where they in relation to the rest of your website. They can also show people where the page that they’re looking at is relative to higher-level content as well.
• Help rescue those who get lost – Most people tend to ignore breadcrumbs until they get to a page that isn’t quite what they were looking for, and want to find their way back up to a more familiar page on the website. Breadcrumbs are just another way that you can help your visitors do that, especially if they parachuted into a very specific but inappropriate place on your website and want to get their bearings.
• Open up the information hierarchy – Breadcrumbs allow your visitors to jump more than just one level of content at a time because by nature they show the exact pages that led to the page that they’re currently on. (Note: this is different from showing them the exact pages that got them to where they currently are.) This can give your visitors a better sense of how the website is organized.
• People are familiar with them – Breadcrumbs are common enough now that most people are somewhat familiar with them. Because they are one of those little touches, your visitors might not notice if they are there, but they also might miss them if they’re not there.
• Consistency leads to usability – Breadcrumb trails are for the most part styled the same way, making it easy for people to immediately know how to use it when they see it. Just remember to keep your breadcrumbs styled according to common conventions so that you don’t leave people guessing about what those links are.

How to implement them correctly

Now that you’ve made the decision to use breadcrumbs on your website, you need to make sure that they’re well-designed in order to have an impact on your website’s usability. Here are some tips for using them:

• Proper placement is key – My personal belief is that breadcrumbs should go in your main content area, directly above the main title of the page. Of course you don’t want them to be so obtrusive that they take up a lot of room there, but you also want to make sure that they’re easy to find. Putting them in a spot that will at least visually register with your visitors is important, because then if they go looking for the breadcrumbs, they know where to find them.
• Style them appropriately – As I’ve written about previously, how you style your text links is important from a usability perspective because it helps people know what are the links and what aren’t. When I’m styling my breadcrumbs, I like to make the links underlined and colored differently from the last breadcrumb level, which is the page the visitor is on.  I’ve seen breadcrumbs on many websites where all the text, links included, looks the same, and I can never understand why someone would choose to style it that way.
• Show site hierarchy, not user history – Breadcrumbs are not meant to be a trail of how the user got to that page, but rather should be thought of more as beacons that pinpoint the page location relative to the rest of the website’s content. The user can just as easily click their web browser’s “Back” button to return to where they came from – they don’t need breadcrumbs to do that.
• Focus on how they’re written for additional SEO benefits – If you’re focusing on ways to incorporate SEO into your website, breadcrumbs are another great opportunity to mix in some of those keywords you’re optimizing for. Just make sure that your breadcrumb links provide enough detail about what the pages are about, without being overly lengthy. I generally try to keep my breadcrumb links to within 1-3 words, at most.

Breadcrumbs can’t solve all your usability problems

It’s not absolutely essential that a website incorporate breadcrumbs, even though if they’re done right, they can enhance the overall usability of your website. But if you are going to use them, there’s one catch, and it’s a big one.

They’ll only work if the overall content and structure of your website make sense in the first place.

If people can’t find what they’re looking for on your website to begin with, having breadcrumbs on your content pages isn’t really going to help them very much. Chances are, if your navigation is that bad, it will already have made such a poor impression of your website that the visitor won’t even have made it that far anyways.

As a web designer, your first priorities have to be creating a site hierarchy that makes sense and then constructing a navigation to make the content easy to find within that hierarchy. That being said though, don’t just throw in the breadcrumbs as an afterthought. Badly implemented breadcrumbs might do more harm than good, so if you want to incorporate them, spend at least some time making sure they’re implemented properly.

Thoughts?

If you don’t already have breadcrumbs on your website, do you plan to incorporate them? If you already have them, what do they look like, and what have you found that works or doesn’t work? Share your thoughts about these questions and more by filling out the comment form below!

Yes, you read that correctly.

Barack Obama ran for office using arguably the most technologically-committed campaign ever. The new look of the White House website is no surprise when you keep that in mind – although I must say that I actually was a bit surprised to hear about it. Considering everything else that is being talked about this inauguration day, honestly, who was even thinking about the White House website?

Thoughts on the new design

The new look of the White House website picks up where his campaign and transition websites left off. In fact, if you go to Change.gov now, there is a note saying that the “transition has ended and the new administration has begun. Please join President Barack Obama at Whitehouse.gov” – so you do get the sense of continuity from one phase of his election and presidency to the next.

Macon Phillips, the Director of New Media for the White House and a contributor to the White House blog, writes that the new website is “just the beginning of the new administration’s efforts to expand and deepen the online engagement” that many Americans used to help play a role in the election.

I think what I’m most impressed with the most is how Obama’s calls for transparency and communication in government were carried over to the website. What those two things translate most readily into in web design terms is what I talk about all the time – a commitment to site usability.

What’s done well

What are some features on the new website that make it very usable and that I really like?

• Intuitive navigation – The top navigational bar has only a few simple choices, and the drop-downs that appear when you hover over a link provide links to all sorts of information about his agenda, the administration, the history of the White House, the government, and how to stay informed. They’re simple to use and look great – what more could you ask form.
• E-mail updates – This is a standard feature on many websites, but this is downright genius the way it’s incorporates here – not to mention groundbreaking. But it comes as now surprise to see the administration use this, considering Obama’s use of other technologies during his campaign, such as text messaging.
• Functional footer – This is also a commonly found design element nowadays, but again, it’s use here really fits well with the openness and accessibility that the website and administration are both trying to convey. It makes it even easier for people to find the information that they’re looking if they don’t want to use the drop-down menus at the top – again, a hallmark of usability.

Of course, the snazzy Web 2.0 design really does wonders in tying eveything together, and the web designer in me can’t help but wonder if it’s running on WordPress!

What could be fixed

I know I’m probably being a bit too nit-picky here, but there are a few small touches that I would have done differently:

• Styling the text links – The text links are the same color as the text, and aren’t underlined either, so it’s hard to tell what is a link and what isn’t. I would have done this a bit differently, since styling them properly helps with both usability and accessibility – something I detailed in another post I wrote on the subject.
• Page title tags – The page titles on pages throughout the website are very basic: “Contact Us” is all it says for the “Contact Us” page, for example. I’m sure that the White House website doesn’t have search engine optimization forefront on their mind, but it wouldn’t hurt to include some more information in them. People who use tabbed browsers would be appreciative of that!
• Breadcrumbs – Once you get into the sub-pages on the website, there is a well-styled breadcrumb bar that appears at the top of the footer area. I just wish that they would have done the same at the top of the page where it would be more visible.
• Form fields – Eye-tracking studies have shown that it’s best to put the labels on top of input fields on website forms, but the Contact Form on the website has them reversed. I would switch this up and it will look a lot better.

It’s a great start

Overall though, this is a great website that I’m very impressed with. I’m curious to see how the website grows and changes over time as more content is posted to it – pending legislation and executive orders, for example – and new features come online – such as the RSS feeds, which aren’t quite ready yet.

From a marketing angle, I think it very accurately reflects the message that the new administration wishes to convey about itself. And as I’ve written elsewhere, if the design of a website is able to help convey the right message about an organization, then that truly a great website.