What is a call-to-action?

A call-to-action is the fundamental reason that you have a website in the first place. In web marketing, it’s defined as something, either a design element or some piece of content, that compels a visitor to take some specific action that you can measure to determine whether your website is working or not.

Every type of website you can think of has a call-to-action built into it, although of course some websites are better at emphasizing it than others. Calls-to-action provide focus for your website and if done right, give direction to your visitors for what you ultimately want them to do. Examples of a call-to-action include:

• Make an online donation
• Request an appointment
• Purchase a product
• Fill out a request form
• Register for an event or program

What makes a call-to-action effective?

Unfortunately there are no easy answers to that question, and there are plenty of people out there who ponder that question every day. While every website and every situation is different, there are some general guidelines you can follow when making your calls-to-action, both from the content and the design perspectives.

Also keep in mind that you should continually test whether your calls-to-action work or not. There are some free tools out there that will give you a good start at this, especially from Google. Their analytics tool will tell you what people are looking at on your website, while their website optimizer can help you test different combinations of calls-to-action in order to see what works better.

Writing calls-to-action

Using the right words appropriate to your website will drive people to take the action; using the wrong words can distract them, at best, or cause them to leave your website, at worst. With that in mind, here are some tips for writing effective calls-to-action:

• Lay the groundwork – Before someone is willing to follow one of your calls-to-action, they first have to recognize a need that requires them doing so. Telling your visitors the benefits of taking that action will help give them the motivation to actually do so.
• Use action-oriented words – Using an active voice encourages people to follow your calls-to-action, and also helps people scanning your website quickly identify what your call-to-action is about. This is also one of the reasons you should avoid using “click here” in your link text.
• Have one on every page – There should always be at least one call-to-action within the content on every page of your website – no page should be a dead-end. Ending your content with a call-to-action tells visitors what the next step is and keeps them moving on your website.
• Limit the number and keep them distinct – Having too many calls-to-action on a website can be confusing for your visitors. Limit yourself to only a few, and keep them distinct so visitors know what the primary call-to-action is, as well as what you want them to do first from the choices.
• Keep your forms short and clear – Unless someone has a compelling interest, many people see a long form asking for unnecessary information and won’t fill it out. Follow some of my other tips for writing clear instructions if your main call-to-action is a form.

You can also look through a previous post that I’ve written about improving your titles and sub-headers for some tips that are just as applicable to writing effective calls-to-action.

Designing calls-to-action

Web designers can have a lot of influence over how effective calls-to-action are. Following general usability and design guidelines help make the website as effective as possible. Here are some tips for how to do that:

• Put it above the fold – You want your main call-to-action to be visible wherever people go throughout your website – almost like your logo. The right side of your website’s header is a natural location to do that; any other lesser calls-to-action can go in sidebars, above the fold as well.
• Use images for emphasis – Images or icons get people’s attention because they get noticed by your eyes before content on a page does. Buttons also do the same thing and are great to use because they stand out against text AND imply action by their very nature.
• Choose contrasting colors – If you’re using a button as your primary call-to-action mechanism, use a color that contrasts with your main colors for maximum effect. Just don’t choose a color that contrasts so much that it becomes too hard to ignore when reading the content around it.
• Consider homepage placement – We all know how important your homepage is, which is why you need to make it as usable as possible for your visitors. Your main call-to-action should be prominently placed on it where people will really see it.
• Use some white space – The more white space around your call-to-action, the more people’s eyes will naturally be drawn to it. Crowding your call-to-action in with surrounding content will decrease its effectiveness as it gets lost in the overall noise of the page.
• Make it bigger – Size isn’t everything when it comes to your call-to-action, but making it bigger definitely makes it more likely that it will get noticed. Just don’t make it so big that it totally overwhelms the rest of the content on your website – find the right balance.

Thoughts?

Creating effective calls-to-action are a HUGE topic and business for a lot of people, so I hope that this gave some good, introductory guidelines for making your calls-to-action more effective.

Have you had any particular success working with calls-to-action on your website or on a website you’ve done for a client? Leave a comment below to share your thoughts and experiences!

There are many people who fall into the category of lower literacy when it comes to websites. Some researchers estimate that as much as 50% of the U.S. population can be defined as having a lower literacy, while 30% of total online users can be said to have the same.

What’s discussed below is definitely something worth considering and applying to your website, especially if you think that a significant proportion of your visitors fall into the lower literacy category.

Higher literacy vs. lower literacy

The most important thing that I can emphasize up front is that when I use the term “lower literacy”, I’m not talking about people who are illiterate or unintelligent. Quite the opposite in fact.  People who have a lower literacy are able to read – they just struggle with it to some degree depending on the particular medium in question. In this case, I’m talking about lower literacy as it pertains to websites.

In general there are some common characteristics of people who have a lower literacy:

• They have trouble scanning text
• They need to go through content word-by-word
• They’ll often find themselves re-reading long, unfamiliar words

People who are otherwise highly literate and intelligent might actually have a lower literacy when it comes to websites. Older people in their 50s, 60s, etc. are a perfect example of this. Anyone who has sat and watched how their parents use a website knows exactly what I’m talking about – some of those characteristics describe them perfectly.

Higher literacy is just the opposite. People who are highly literate, especially on the web, are able to look at a website quickly, scan it for what they’re looking for, and interpret what’s on the website and what the website has to offer them.

If you think this describes you perfectly, you’re not alone – there’s a significant gap in web literacy levels between older and younger generations. Younger people have been using websites for a greater percentage of their lives than older generations have, so they’re that much more familiar with them. Add in the fact that older generations tend to be more “afraid” of computers than younger generations are – such as clicking the wrong link, filling out a form, etc. – and you begin to account for that generational gap.

Lower literacy on the web

So how does lower literacy manifest itself when people use websites? Here are some common habits that lower literacy website visitors display:

• Reading the navigation – Lower literacy visitors tend to read through all of your navigation links first, and then choose the option that best meets what they’re looking for.
• Narrowing the field of view – Lower literacy visitors will read through content line-by-line, giving them a particular narrow focus that they might find hard to zoom out from.
• Skipping over information – If something becomes too complicated, then lower literacy users are more likely to completely skip over it, potentially missing something important.
• Accepting as “good enough” – Digging deeper requires a lot of reading (which can be challenging and time consuming), so lower literacy users skip, usually looking for links.
• Avoiding search tools – Lower literacy users might have difficulty spelling the search terms, and then when they see the results, have difficulty processing out-of-context content.

How to design for lower literacy users

How can you improve your website’s usability for lower literacy users in order to make it work for a broad audience? Here are some suggestions:

• Prioritize your content – Place the most important content at the very top of the page, where readers who might otherwise give up after a few lines will see, and keep any other important information above the fold. This especially applies to your call-to-action.
• Avoid confusing navigation links – The links in your main navigation(s) should be written so that they’re as intuitively as possible. There’s no need to be creative and write “Who We Are” when writing “About Us” will do just as good a job instead.
• Improve your in-content navigation – Follow some of the basic recommendations to improve your page titles and headers, and you’ll not only break up the content for higher literacy users, but keep lower literacy users from getting frustrated.
• Avoid distractions – Design elements like Flash banners can serve a useful purpose on your homepage, but on internal pages, avoid anything that moves or might otherwise be a distraction. These really get in the way when you’re trying to concentrate, which lower literacy users need to do.
• Use a consistent page design – Unless there’s some compelling reason otherwise, every page on your website should have the same general feel to it, and should include all of the major navigational elements. Consistency is the goal – something that lower literacy users struggle without.
• Make effective links – There are things that both designers and writers can do to make links more effective. Follow some of these recommendations – such as using icons on particular types of links, or making the links scannable – to help lower literacy users navigate your website easier.
• Simplify form instructions – Forms give many people trouble, so you can imagine the trepidation with which lower literacy users fill them out – especially if giving away personal information is involved. Keep your instructions clear to avoid unnecessary confusion.

Do some of these tips sound familiar? If so, it’s because many of them are also general usability guidelines that you should be following anyways when creating your website. If you’ve already tried to incorporate many of them into your website and think that it’s as user-friendly as possible, then lower literacy visitors shouldn’t have much of a problem using it.

Thoughts?

Is lower literacy something you should be concerned with if you have a website? Or do you think it’s dependent solely on who the particular audience for that website is – no different than gender, profession, interest, etc? Share your thoughts with everyone by leaving a comment below!

Titles and sub-headers have the ability to not only break up your text into manageable chunks, but to engage your readers in what you’re writing about. Since people scan web content quickly, titles and sub-headers are what they’ll notice first – which is why they play such a big role in whether your content gets read or not.

Below are my tips for improving your content’s titles and sub-headers – recommendations that both web content writers and web designers can implement to make them more effective.

5 tips for the Web Content Writer

Writing great titles and sub-headers is easier said than done. It’s a skill that you need to develop as a writer, especially given the unique ways that people read content on a website. Here are some of tips for how to write more effective sub-headers in your web content:

• Keep them short and concise – Your goal should be to keep your titles and sub-headers to 8 words or less. At that limit, they will be long enough to make your point, but short enough so that they don’t wrap onto a 2nd line on the page based on how the designer has styled them.
• Strive for clarity, not creativity – You shouldn’t get so creative with them that people don’t know what comes below. Rather, sub-headers should convey information quickly so scanners can get an idea of what the content below is about without having to stop and think about it.
• Don’t re-state what comes below – When you can’t come up with an effective sub-header, the tendency is often to re-state what’s contained in the content below. That’s why writing great titles and sub-headers is a skill to develop – re-stating what comes below is the easy way out.
• Move the keywords forward – Put the keywords you’re writing about at the start of the sub-header for even greater emphasis. Scanners tend to notice only the first few words, so this will help emphasize what comes below in your content. (It can’t hurt for SEO purposes either.)
• Pose a question – Another way to get your readers to read your content is ask them a question within the sub-header that they’ll have to read the paragraph below to find the answer to. If you can do this effectively, it can be a great way to get people to look at your content.

5 tips for the Web Designer

Creating effective sub-headers isn’t just the content writer’s job. Web designers play a large role by giving the titles and sub-headers the visual qualities that will best capture the visitors’ attentions. Here are some design tips that you can use to make them more noticeable:

• Make them a different color – Rather than just making them plain black, choose a color from within your website’s color scheme to make them stand out. Go for a darker color though, especially on a white background, in order to give it enough contrast.
• Make them big and bold – You should always be able to tell what the headers are based on how big they are in relation to the rest of the content on the page. Make them bigger in size – enough so that were you looking at the page in black and white, you could tell what the sub-header is.
• Move the copy in – To make the sub-headers stand out even more, considering giving an indent to the rest of the content beneath them. An indent of 10-20 pixels should do – it will be subtle, but the effect is enough to give your content the desired visual separation.
• Keep the size proportionate to importance – Page titles should use the <h1> tag, which should always be styled the biggest; <h2>’s, <h3>’s, etc. should be used as sub-headers, and should all get smaller as you move further down the list.
• Keep the fonts simple – Since people are scanning, you don’t want your sub-headers to be styled in a fancier font that might take them longer to read and interpret. Style your sub-headers in simple, clean fonts like Arial or Verdana in order to make scanning as easy as possible.

Thoughts?

Do you have any common practices when it comes to either writing titles and sub-headers, or designing how they appear on the page? If so, share your thoughts with everyone by leaving a comment below!

Many forms contain some content aside from the questions of the form itself. This content usually serves some instructional purpose such as helping the visitor understand the purpose of the form, knowing how to get help, etc. There’s not anything wrong with having it in your form, but it can be problematic if you have too much or if it doesn’t clearly communicate why someone should complete the form.

Everyone avoids trying to read instructions on a form, so the challenge is making them as usable as possible – especially if there is key information in them that visitors need to know. With that in mind, here are some tips for writing clear instructions for your form in order to improve its overall usability.

(The tips below are based on chapter 4 of Caroline Jarret’s and Gerry Gaffney’s book, “Forms That Work: Designing Web Forms for Usability”.)

4 tips to writing better instructions

Want to write better instructions and content for your forms? Following these tips can go a long way towards making your forms more usable:

• Keep it simple – Write the instructions in plain language that most people will understand; anything more complicated and you might be asking for trouble.
• Know your audience – Use the right terms in the right ways. For example, there’s a big difference between American English and British English – something travel websites have to consider.
• Limit the jargon – Only use terms a specific audience would understand if the form is designed for that audience. If the form is meant for the general population, keep the language simple.
• Show graphics if necessary – Where can they can find the information you’re asking for? Show them; the security code on the back of credit cards is a good example.

Write these instructions…

Now that you know how to write better instructions, here are the things you should include as instructional text in your forms if you want to make them more usable:

• A clearly written title – The title of your form page is the first thing that people will notice about it, so make sure that it says exactly what they can do by completing the form. Is it an order form? Then the title of your form should be “Order ____”. And since a form implies that people are going to take some action, your title should start with an action word to emphasize that point.
• Where they can go for common answers – Maybe you’ve noticed people are using your contact form to ask questions they could easily find the answers to elsewhere on your website. Do you see that happening a lot? Preempt those questions with instructions at the top of the page telling where they can find that information before they take the time to complete the form.
• Who this form is intended for – Put some instructions at the top of the page saying who exactly should fill out the form, and you’ll save people the time from filling it out for the wrong reasons. Write these instructions in the positive voice though, and be as specific as possible – people will understand what you’re saying much easier than if you were to write it in the negative voice.
• What they need to complete the form – Most people want to get through a form as quickly as possible. If they’re halfway through the form and are asked for information they don’t have right in front of them, are they likely to continue filling it out? It depends. Telling them what’s needed ahead of time could avoid any aggravation on their part, and increase the likelihood of them completing it.
• Why you want certain information – Only ask for the information that’s absolutely necessary for the person filling it out to tell you. For example, does your contact form ask for a street address when only an email is needed? If so, will you be adding them to your print mailing list if they give you their address? Then tell them why you’re asking for it  – but give them the chance to opt out, of course!
• What the next step will be – Most forms display some confirmation content once the user hits the “submit” button. This is an often overlooked spot to leverage, and where you should tell them what the next step will be as a result of their having completed the form. You might also put links here to other content so that they don’t leave the website just because they completed the form.

…but don’t write these instructions

You can skip on this content in your forms – it might make them less usable:

• Sales pitches – When someone is ready to fill out a form on your website, they’re willing to complete some transaction with you because they’ve already been sold on what you’re selling. Keep the content directly related to the task of completing the form – anything else can and should go.
• How “quick and easy” it is to fill out – Your visitors will be able to tell right away both how easy your form is to complete and whether they’ll be able to do so quickly or not. Don’t have to specifically tell them that; some people might even be suspicious if you do. Is it really that quick and easy if you say so?
• The time needed to fill it out – For relatively simple forms, mentioning how long it will take to complete isn’t necessary. It’s understood that forms take some short time to complete. But, if you have a truly large form that might take, say, 20 minutes to complete, advance warning is useful.
• Help text for every field – If your field labels are clearly written, skip the help text. But if you have a field where it’s not so obvious how the user should respond, you might need it. Just make it short enough to fit right next to the field, or use an icon (such as a question mark) as a link to it.

Thoughts?

Do you have any other tips for writing clear instructions in a website form? Has anything in particular that you’ve tried worked well? Share your thoughts with everyone by using the comment form below!

(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!

For the Content Writer

• The first link is the most important one – The first link in your blog post, article, or piece of content will generally gain the most attention and have the highest click-through rates because that’s what people see first. So when you’re writing content, if you make the first link the one that is of the most interest to your audience, you’re increasing the chances that they’ll click on it.
• Don’t link to everything – Links are used to either emphasize something relevant to the point you’re writing about, or to get the reader to take a particular action. Linking every other word will make both more difficult because your links will become less noticeable. Make sure that your sentences have no more than 1 link in them and paragraphs have no more than 5, and you should be fine.
• Don’t depend on links to help your content make sense – People are either too busy to click on every single link you provide, or maybe they’re reading your article in a format where they can’t click on the links: print, offline, or mobile. My point is that as the writer, you need to make sure that the reader can understand your content without having to click on the links.
• Don’t hide your the URLs of links - People are used to being able to know where a link will take them when they hover over it – either by seeing it in their web browser’s status bar, or by reading the TITLE attribute (if you’ve written one). Either way though, you should avoid doing anything that hides the ultimate destination where they’ll be taken to once they click on the link.
• Make links scannable - This is something that I mentioned in last week’s post about why you should avoid using “click here” in your link text. Your link text should be written so that when someone is scanning through your content, they can quickly identify what the link is and where it will take them to. Using “click here” as the link text won’t do that.

For the Web Designer

• Links should look like links – I covered this topic exclusively in a separate post about how text links should be styled, but the gist of that post is simple. Text links should be underlined and in a color that stands out from the rest of your content. People expect them to look that way, and not styling them according to these conventions will make them less usable and noticeable.
• Use icons sparingly – Using icons on your links can help give your visitors a sense of what will happen when they click on the link, but going overboard with them can be a bad thing. My rule of thumb is that the only time you should use icons is if clicking on the link engages a software application other than your web browser – email, Adobe Reader, Microsoft Word, etc.
• Skip any gadgets that alter link behavior – You can find several applications that try to provide a more interactive user experience by giving people a preview of the website that clicking on the link will take them to. While good in theory, it can get annoying very quickly when used all over your website, so skip the gadgets and use your TITLE attribute instead.
• Make the links easy to click – Horizontal lists (“A | B | C | D | …” or “1 | 2 | 3 | 4 | …”) and vertical lists are often used to help users navigate through content. Either way though, make sure that the clickable area around each link is large enough so that people can easily use it; adding in some extra padding or margins in your CSS should do the trick.

Thoughts?

What do you think about link usability – do you have any tips that you do differently? Share with everyone by leaving a comment below!

#1 – It’s not informative

It’s an established fact that most people don’t really read the content of a website – they scan it. This applies to almost all written content on the web, and people tend to do it for a number of reasons, such as:

• They are too busy to read something fully
• They are looking for a specific piece of information, and once they find it they want to move on
• There’s a lot of information out there that is competing for their attention
• They might have other issues that make it harder for them to read content online, such as screen resolution, screen glare, tiny font sizes, contrast, etc.

When someone writes content for a website, they have to keep in mind that it’s probably not going to get read except by those who have an inherent interest in doing so.

Most people are going to scan it instead, and when they do, certain things will jump out at them – links being one of them. Of course, that will depend on whether the web designer styled the links properly by making them underlined and a different color from the surrounding text.

Yes, people scanning content will still see your link even if it says “click here”. But using “click here” as the link text doesn’t take that next step of telling them where the link is going to as they scan over it quickly.

The bottom line is that people like to – and want to – know where a link from your website is going to lead them. Using the words “click here” just doesn’t do that for them, and here’s a good example:

• Bad - If you want to learn more about this, click here to read this article from the New York Times
• Good - Learn more topic about this by reading this article on the New York Times

The second one tells people at a quick glance not only that there is a link, but that it’s to an article on the New York Times website. What does “click here” tell you? Only that a link is there for them to click on.

#2 – It’s not action-oriented

Most websites want people to take some action as a result when they are visiting it. People respond to action words, so those who write content for a website will want to keep that in mind by writing link text that encourages visitors to take the desired action. Here’s an example:

• Bad – Enjoy what you see? Click here to subscribe to our blog for free updates!
• Good – Enjoy what you see? Subscribe to our blog for free updates!

Notice the difference? The second one has the desired action contained within the actual link text, which will be much more obvious when someone is scanning the content quickly. Using “click here” doesn’t convey that desired action – again, it only tells them that a link is there for them to click.

#3 – It’s not SEO-friendly

Search engines such as Google use the strength of your links in their algorithm when they determine your placement in search engine results. While the number of links (both internal and external) on your website is important, how those links are worded can be just as important. Here’s an example:

• Bad – Click here to read more web design articles by Addicott Web
• Good – Read more web design articles by Addicott Web

The second one is the much-more friendly link. When you use “click here” as your link text, all that you’re doing is letting the search engines know that your content contains a link. If you want to also help them estimate how relevant that link is though, start using keywords in the link text instead.

#4 – It’s not modern

During the early days of the Internet, people defended the use of “click here” on the grounds that if it weren’t used, most people wouldn’t know what to do when they came across a link. Content writers came up with it as a solution that gave users the hint of what action they were supposed to take – literally, click here.

Needless to say, that’s drastically changed as more and more people have become familiar with websites in recent years. If you continue to use “click here” in your content, you can give your visitors bad impressions that you don’t want them to have, such as:

• That you don’t respect their intelligence enough to know what a link is
• That your website or the content on it hasn’t been updated in years

You always want to make a positive impression of who you are through your website, and most people nowadays think that websites that still use “click here” are just plain old-fashioned. I would venture to guess that that is definitely not the impression you want to convey about your business or organization.

Thoughts?

Do you still use the phrase “click here” when you’re writing links? Do you have clients or people you work with who still use it and don’t understand why they shouldn’t? Share your thoughts on this topic by leaving a comment using the form 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!

SEO is not just optimizing your website for Google; there are other popular search engines used as well. (Although as anyone in the SEO world will probably admit, that’s not really true – it really is all about Google.)

I focus on Google here because they are unique in the variety of tools that they offer to help optimize a website for their search engines, a lot of which I have personally used for some of my clients.

Tips for Website SEO

Create a sitemap.xml file

A sitemap.xml file is a listing of the pages on your website in a format that is friendly to the search engines. You might be more familiar with a site map that is intended for humans to use; it’s the same concept, but the XML format is in the language that the search engine crawlers read.

There are a variety of tools out there to generate site maps for your website:

• Static HTML website – If you have a website that is static HTML pages, then you can use the free sitemap generator at XML-Sitemaps.com to generate one.
• WordPress website – I recommend using a great plug-in that I found called Google (XML) Sitemaps Generator for WordPress. It will generate and update a site map automatically for you.

Create a robots.txt file

A robots.txt file is a set of instructions that tells the visiting search engine crawlers what they can and can’t index on your website.

For example, you can give instructions to tell certain search engines not to crawl your website, or that all engines shouldn’t crawl a particular directory on your website. The most basic instructions tell all search engines that they can crawl all directories on your website.

When you subscribe to Google’s free Webmaster Tools, there is a tool that will create a robots.txt file for you. Once you create it, make sure that it goes in the root directory of your website.

Submit your URL

This one should be obvious, but it’s worth mentioning anyways. Submitting your URL to the search engines helps them find your website quicker – although sometimes it will still take some time after you submit it before the engines crawl your website.

At the bare minimum, you should submit your URL to the three major search engines. Here are the links for where you can do that:

• Submit a URL to Google
• Submit a URL to Yahoo
• Submit a URL to MSSN

Submit your sitemap

The same benefit as telling the search engines what your URL is applies to your sitemap as well – it will just help them find your website and content easier. From personal experience, Google makes it very easy to do – there is a tool within their webmaster tools that lets you do that.

Tips for Page SEO

Title tags

A page’s title tag is the first thing search engines look at when determining what a particular page is about. Title tags are also what potential visitors see and read when they’re looking at a search results page.

Most websites include the company name in the title tag, although there is still a good deal of debate about whether the name should be at the beginning or end of the title tag.

The most important thing to do with your title tags is make them relevant to what the page is about. It’s important to include one or two keywords in it as well, but don’t stuff your title tag full of keywords – that will just make your website look bad, and there are limits for the number of characters that can appear.

Header (H1, H2, H3…) tags

From the standpoints of usability, accessibility, and SEO, there are arguably fewer things that are more important than using your header tags properly. Not only do they visually break up your content on the page, but they also give users who are glancing through the page an idea of what is being written about.

How should header tags be used?

• H1 tags – Used for your main page title, to show what the page is about
• H2, H3, etc. tags – Used to break up your page copy, but also to show the search engines what the topics are on a page so that it can index your website properly

ALT and TITLE attributes

These two attributes don’t usually play a prominent role in the average user’s experience with a website, but they’re still important and shouldn’t be overlooked. There are also some small SEO benefits that can be gained from using them.

The ALT attribute is used when coding an image onto a page; think of it as some alternate text that appears should an image not load on a page. This attribute is important from an accessibility perspective because the screen readers used by blind people won’t show them what the image is, but if there is some descriptive text in the ALT attribute, they will pick up on that.

From an SEO perspective, the ALT attribute is another opportunity to get some code onto your page that the search engines will be able to read. Making it as relevant as possible to what the page is about can help contribute to stronger search engine rankings.

The TITLE attribute is usually used on links, and is often one of the small touches that a great website has. You’ve all seen the TITLE attribute in action even if you don’t realize what it is; if you hover over a link and a little tool tip appears, that’s the TITLE attribute in action.

From an SEO perspective, it’s again all about relevance, so be sure that what you’re putting in the TITLE attribute relates to where the link takes someone. Doing so will also help from a usability standpoint, which is just another added bonus.

Use META tags

Contained within the header of every page’s source code are what are called META tags. They are invisible to a website’s visitors, but are there because search engine spiders read them.

The two META tags that you need to concern yourself with the most when it comes to SEO are the description and keyword tags.

• The description tag is especially important because it is listed in your search result – it’s what users read when a link comes up and what makes them decide whether to click on the link or not. A well-written description should read like a sentence and should be a succinct summary of the page and what someone can find when on it. You don’t want to include as many keywords as possible, but be sure to write the description with a focus on the keywords that are relevant to that page.
• The keyword tag is still worth focusing some attention on, so be sure that you include at least a few relevant keywords in there – but again, don’t go overboard. Back in the early days of search, people used to stuff the keyword tags with anything and everything to improve their search engine results, and as a result, many search engines now just disregard the keyword tag.

Content is king

Want to know the most important aspect of SEO on a website? It’s the content. It always has been, and it always will be. You could use all of the tips mentioned above, but unless they are all relevant to the content on the page, then you’re just wasting time.

Yes, it’s true that most people will not read your content – but that doesn’t mean you should ignore it, because the search engine crawlers do read it and weigh it highly in their algorithms. The tricky part is that you also can’t write content that is entirely for the search engines, because real people need to read it and make a connection to it. There needs to be a balance between the two.

Here are some tips to help you write SEO-friendly content:

• Focus the content around a few keywords only – don’t try to include as many as possible
• Make sure that it reads well and makes sense from a human point of view
• Just write naturally and explain the information in terms most people will understand
• Keep it relevant to what people would expect to read on that page

SEO-practitioners often forget that the search engines are not the end unto themselves – they are only a tool that real people use to help them find what they’re looking for. So even if they can get the search engines to think that a page is great, it’s only as great as its ability to either keep people on the website, or to get them to make a purchase or complete a transaction of some sorts.

And in an interesting twist, yet another thing that the search engines factor into their algorithms is how quickly someone leaves your website from the search engine results that brought them there. This is just further proof that SEO can be summed up in one word, which I’ve already used repeatedly: relevance.

Thoughts?

These are some of the simpler steps that you can easily incorporate on your website. There are a lot more out there, so fill out the comment form below to share your best SEO tips, tricks, and tools with everyone!

Please only share SEO techniques that are considered “white hat” or ethical – no “black hat” or unethical tactics that can backfire and get you banned from the search engines. Thanks!

Early web browsers used to have default styles for text links, which were usually blue and underlined. That’s why you most often see links with those characteristics, so it’s no surprise that this is how people expect text links to look like.

With the advent of CSS a few years ago, web designers began to assert greater control over how those links appeared. That’s been both a good and a bad thing, because with the greater control also came greater variation in how text links were styled.

With that in mind, here are some things to take into consideration when determining how you’re going to style text links on your website.

Contrast Against the Page Background

• On a lighter background (white, light grey, etc.), use either medium to darker shades of blue or red. Those options generally give the most contrast against the light background.
• On a darker background (such as black, dark blue, etc.), use very, very light shades of yellows, greens, oranges, blues, grays, or white.
• Try to stay away from light reds, pinks, etc., since those can be too jarring to the eye in contrast to the background color.

In either case though, the specific choice depends on the color scheme that the designer is working with, so we need to use our judgment about what we think looks and works the best to make the links stand out.

Contrast Against the Text

Most text on websites is either black (on a white background) or white (on a black background). So if your links are already underlined and are a different color than the main text, you’ve done the job right.

But when you’re picking the color of your links, please please PLEASE choose a color with enough contrast so that there is a noticeable color difference between the text and the link!

Using black text? Then coloring your links in navy blue is not going to cut it. At most “normal” font sizes on a website (around 12 pixels in height), the human eye can’t tell the difference between those two colors without straining – for example, can you tell this is a link? How about this instead? And at even smaller font sizes, forget about it.

Links Should. Be. Underlined.

A more recent trend in websites is to not underline text links. A lot of people feel that doing so gives a website a cleaner, more professional appearance. I agree with that result, but I disagree with the concept of not underlining text links.

Links should be underlined because when a text link is in the middle of a chunk of text (or as a headline), even if colored differently it isn’t always plainly obvious what is the link and what isn’t.

Think of people who are colorblind. They could look at a website and not be able to tell the links apart from the text if the links aren’t underlined. So from an accessibility perspective, underlining your links is a good thing.

And, when taken in combination with coloring your links the right way, it takes away any doubt the user might have about what is a link and what isn’t.

There Are Always Exceptions

Keep in mind that as with any particular element in web design, too much of a good thing can sometimes be a bad thing.

Yes, underlining and coloring links appropriately are the right things to do from both a usability and accessibility perspective. But I don’t go crazy having every link underlined on one of my websites if doing so means sacrificing the overall look and feel of the website as a whole.

For example, on the websites I design I usually have the text links underlined, but I don’t underline the main navigational links. When it’s obvious that the word is a link, as in the case of a link in a main navigational area, there’s generally not a need to have it appear underlined.

As a designer, my job is to create websites that are not only usable and accessible, but that look great as well. I have to take all of these factors into account and use my judgment when deciding how to style text links.

But, as long as I keep in mind usability and accessibility principles when making a decision, it’s guaranteed that the overall website will be that much more effective and successful.