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!

Asking these questions often means stepping outside of our role as designers and putting on a marketer’s cap, because ultimately that’s what a lot of this information is all about. Marketers focus on helping clients communicate with their customers, and that’s exactly what a successful website does.

People sometimes rely on our expertise as web designers without understanding that marketing is also an important part of what we do. If information about the target audience falls through the cracks, sooner or later the client might come to realize that their website isn’t doing as well as it should be. In their mind, that’s a reflection on your product and work as a web designer.

So put on your marketing cap, and ask your clients some of the following questions in order to design a website that will truly meet the needs of a particular target audience.

Demographic information

The most basic information you can get about a target audience is their demographic information. While it’s important that your client is happy with the website, you need to take into account basic demographic information in order to create a design that will make the website more successful.

Here are some basic demographic questions to ask about a target audience:

• What gender are they? – Knowing whether the target audience is male, female, or both makes a huge impact on your design decisions, mainly in what colors you choose. Men and women react differently to colors, and colors symbolize different things to age groups, professions, and ethnic or social groups.
• How old are they? – Generally speaking, different age groups may be more computer savvy than others, have different familiarities with finding or doing something online, and have different expectations about what functionality they’ll find on a website.
• What keywords are they searching for? – Knowing what keywords people are using to find the product (specifically) or search online for (broadly) is useful for SEO purposes. Ask whether the website is geared towards businesses, individuals, etc., and then use keywords based on their answer.

Content information

Visitors are coming to your website for some purpose, whether to find information, make a purchase, etc. While the colors and functionality of the website are important, the content is what they’re really looking for.

Here are questions that I ask my clients about the content expectations of their target audience:

• Why are visitors coming to your website? – Websites for businesses, organizations, and news media all have very different purposes. People come to each type of website looking to do something specific. Knowing what people are most often looking for will help you, as the designer, know what content to emphasize, how to structure the information architecture, and more.
• Why should they come back again? – Designing a successful website means that you’ve convinced people that it’s worth their time (and/or money) to visit the website again in the future. That means communicating some incentive to them, either through your products or through the information they can find on the website. Getting them to visit once is great, but getting them to come back is even better.
• What should they see on the homepage? – It’s always tough to prioritize what information should be seen on the homepage. Focusing on your target audience and understanding what they want quick access to should help make those decisions easier. Also keep in mind what the purpose of your website is, and what people are coming to your website for, to help prioritize what content should go on it.

Technical information

If I’m being hired by a client to redesign an existing website, I always check with them to see if they’re using an analytics program to track their website usage. Most of these programs also offer you information about the website’s visitors, which would be very useful to know when making some design decisions.

Here are a few questions that you should ask if you know that data is available from the current website:

• What kind of browser are they using? – What proportion of your visitors are using Firefox? Internet Explorer? Safari? This information might be especially useful to know if the target audience is largely using IE 6.0; if they are, then chances are you’ll have to find some workarounds for the inevitable programs with how your design will display.
• What are the most common screen resolutions? – Are they using 1280 x 1024? 800 x 600? Something in between. This information is useful because it will give you a sense of not only how wide your main content area can safely be, but of what proportions you can use in your design in order to let most people be able to see it so that it still looks nice.

Thoughts?

What other questions do you ask about a website’s target audience when you work with clients? Share your thoughts with everyone about this topic and anything else that comes to mind by filling out the comment form below!

Dark websites can seem refreshing sometimes, especially because most websites are somewhat similar in the sense that they feature dark text on a white background. That’s no coincidence, either – that color contrast is easiest on the eyes.

Light text on dark backgrounds, on the other hand, is more difficult to read because it makes your eyes strain more in order to read the text on the page. Add that natural effect to the fact that a lot of dark websites out there don’t necessarily pay attention to some of these usability concerns, and it’s no wonder that some people have a love ‘em or hate ‘em mentality when it comes to them.

I’ll admit it: I was one of those designers who didn’t necessarily pay attention to all of these unique concerns. I created a dark website for a friend back in 2008 – actually the only one that I’ve done so far. I paid attention to most of these special concerns, but as I write this and look at the website again, I notice some things I would have done differently that don’t follow the advice I give below.

Concern #1: Font selection

On a lot of dark websites, designers use a serif font (such as Georgia, Times New Roman, etc.) because those types of fonts help convey all the senses that dark websites have (elegance, professionalism, etc.).

So what’s the concern? Using a serif font for your main text, at a normal size of 12-14 pixels, means that the flourishes on the serifs start making the text less readable. The letters will start to blend into each other, so your eyes have to strain more to tell words and letters apart.

Here are a few tips to keep in mind for proper font selection:

• Use serif fonts for headers only – Headers, page titles, and elements of that nature are always larger than the text around them. When you increase the font size, the flourishes in the serifs are more distinguishable, and that text is easier to read.
• Always use sans-serif fonts for text – Sans-serif fonts, such as Arial, Helvetica, etc., don’t have flourishes. On a dark background, this will make them easier to read, especially at the smaller sizes usually associated with regular body text.

Concern #2: Text contrast

Text contrast may be one of the most important determining factors in whether a dark website is successful or not. Too little contrast will make your text extremely difficult to read and your website difficult to navigate through – especially in conjunction with what fonts you used. Too much contrast will make everything stand out too much, and the design won’t look as nice.

The key to a great dark design is finding the right balance between the text and the background. Here are a few tips for how to do that:

• Experiment with shades of gray – On dark websites, most body text is generally in some shade of gray. Use a shade that’s not too dark though, because if you choose one that is, the text will be very difficult to read – especially when in conjunction with poor font selection, as I mentioned above. (This is one of the most common usability mistakes you’ll see on dark websites.)
• Use pure white sparingly – Pure white text on a black (or similarly dark) background will be very noticeable to the eye. How you use white – and how often – depends on a number of things, such as how dark your background is, what your text color is (for example, you might use white for links if your text color is a shade of gray), how big your text is, etc., so use your best judgment.

Concern #3: Font size

The size of your text needs to help compensate a bit for the additional eye strain that people will have trying to read your text. That’s why on a lot of dark websites, the  text is a little larger than it would normally be on a light website.

Keep in mind too that the font size is what will bring together the past three usability concerns. If your body text is a serif font, colored in a shade of gray that doesn’t give enough contrast, and is sized too small, that’s the perfect trifecta for what make your text almost completely illegible.

Concern #4: Color schemes

Generally speaking, when you’re designing a light website, you have a lot more flexibility when choosing a color scheme than when you’re working with a dark website. Most color schemes work well with a light color to contrast against, but they don’t all work well with black.

Most websites start with white as the foundation, and use color to achieve depth and some sort of visual effect. Dark websites are different in the sense that you’re already starting with a color and already have some depth to the website. You don’t want to add a color scheme with a lot of colors on top of the dark color you’re already using – that’s a lot of colors, and can be visually confusing. Your color scheme should generally be simpler, and should use less colors than the color schemes for light websites.

Here are some other things to keep in mind:

• Use color to draw just enough attention – When your eyes first see a dark background, they are drawn to color much quicker than they would on a light background. So use your colors to help lead people where you want them to go, but don’t overuse them so that they overpower your website and it’s difficult for people to focus on your content.
• Choose your color scheme appropriately – Depending on what your website is for, there might be certain colors that make sense to use in contrast to the darkness of your background. Yellow and black work well for action, red and black for romance, blue and black for technology, etc. So know what your website is really for when deciding what colors to use as contrast colors.

Want to see samples?

There are plenty of galleries out there with samples of great dark websites. Here are a few worth looking at for inspiration:

• 30 Dark Designs You Should’ve Seen (Smashing Magazine)
• 25 Beautifully Dark Website Designs (Vandelay Design)
• Web Design Inspiration – 27 Dark Website Designs (Dzine)
• 30 Most Inspirational Dark Web Designs (Elite by Design)

Thoughts?

If you work with or come across a lot of dark websites, what do you think about some of these usability concerns? Are there others that I haven’t listed that you think are also important? Share your thoughts with everyone by leaving a comment below!

Flash banners are useful because they can convey more information than you would normally be able to if you were using static images and unchanging content alone. This is especially true if you’re looking to communicate more than one point or display more than one photo, and if you only have a limited amount of space to do that.

As the designer, it’s important that you convey to a client that while making a Flash banner is easy for you to do, making an effective one (and incorporating it onto the website) is another story.

Here are some of the content and design considerations that I talk about with my clients in order to make their Flash banners as effective as possible.

Content considerations

• Keep it short and simple – If you’re using a banner with transitioning content, keep the written words short enough so that people can read them quickly and so that you can maintain a decent transition pace. Short phrases or no more than 1-2 sentences are ideal.
• Use call to action words – Flash banners attract attention because the motion catches people’s attention. Take advantage of that and emphasize your call-to-action in your banner. Keep the content you include in them action-oriented, and you’ll definitely help your own cause.
• They’re not good for SEO – Content embedded in Flash banners can’t be found by the search engine crawlers, which only find words on a page. Make sure to emphasize any keywords or content within your Flash banner elsewhere on the page where the crawlers will be able to find them.
• Remember to style links in them – You can include links in your banner, even if the banner itself isn’t SEO-friendly. Just remember that you should style those links to look like links should – after all, how the links are styled helps make them effective and usable.

Design considerations

• Use to shorten the homepage – Flash banners are a great way to convey more information in a limited amount of visual space, which is perfect for designers concerned with homepage usability. This will help make your homepage shorter, more concise, and more usable.
• Use on the homepage only – A Flash banner on a website’s homepage is a great-looking accent. A Flash banner on every page of a website (in the header, footer, etc.) is just distracting and becomes annoying after only a few visits to the website. Use it once, and leave it at that.
• Leave long gaps between transitions – When rotating content, leave a long enough gap so that people have time to really notice what the content is saying or what message the photo is trying to convey. Slow and steady is the key – transitions that come too quickly will overwhelm your visitors.
• Use photos to match your message – Photos can say a lot about your organization or business, so make sure to use ones that really emphasize what you want to convey about yourself. You don’t have to use a lot of them – 4-6 are usually enough to make the point.
• Shouldn’t be overwhelming in size – Your Flash banner shouldn’t be so large that it visually dominates and overwhelms the homepage. Limiting the banner to perhaps 2/3 the width of the main content area and floating it to one side is enough to achieve the effect you want.

2 key things to remember

• Get it right the first time – You have, at most, one chance to get someone to watch your Flash banner in its entirety, and that’s when someone is visiting your website for the first time. Once they become return visitors, they’re much more likely to go right to the content that they’re looking for and skip your banner – or your homepage – altogether.
• Not the primary means of delivering content – While Flash banners are great as accents, they shouldn’t be a primary means of delivering content on your homepage. If you want to incorporate content or a vital link within a banner, make sure to place it elsewhere on the page. You should always assume that the banner won’t be watched in its entirety and the content in it won’t be delivered.

Thoughts?

Do you have any suggestions for how make Flash banners more effective that I didn’t mention here? If so, share them or any other useful information with everyone by leaving a comment below!

I took a quick look around at the major cities that I could think of that had public transportation systems, and I was quite surprised by the results. Some of the websites were quite nice and featured great web 2.0 designs, an emphasis on usability, nice graphics and colors, etc. Others were quite disappointing, and it was obvious that they are still languishing in the web 1.0 days.

I’ll let you judge for yourself though. Here are my top 10 public transportation websites – 5 of the best, and 5 of the worst.

The 5 best websites

1. Chicago

2. Boston

3. Washington, DC

4. San Francisco

5. Los Angeles

The 5 worst websites

1. New York City

2. Philadelphia

3. Portland (Oregon)

4. Seattle

5. Dallas

Thoughts?

Now that you’ve seen the websites, what are your thoughts? What do you think makes the 5 best ones so great, or the 5 worst ones so bad? 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!

There are a variety of popular hosted search services available, such as Google’s Custom Search Engine, but the thing to keep in mind is this: no matter which one you choose, if your visitors can’t find the search field or it’s not very usable, it won’t do them, or you, much good.

So here are some tips for how to make your hosted search tool as usable as possible once you incorporate it onto your website – both for the search field itself and on the results page.

For the search field

• Use a search box with a type-in field – Let your visitors type in their search term right from the page that they’re on, rather than having them go to a specific search page to do it. Doing so makes the search more accessible and cuts out an unnecessary step from the search process.
• Style your search field appropriately – If the search field is too short, your visitors won’t be able to see the full search term they’re typing in. This is a problem particularly if they need to revise their term before searching. Avoid this problem and make the search field wide enough to contain multiple terms.
• Keep it in a consistent location – Your search function should be in as prominent and consistent a location as your website’s logo. I prefer either the right side of the header or in the main navigation area. The point is, visitors expect it near the top of the page, so make sure to put it there.
• Use an icon to emphasize its nature – Improve your website’s usability and make your search field more obvious by using an icon within your input field. A magnifying glass is the universal symbol for search, so use that to call attention to, and visually communicate the nature of, your search field.

For the search results page

• Limit the number of search results per page – If you have a lot of content being indexed, a large number of results might show up for certain search terms. Break the search results up into manageable chunks will help your visitors browse through them easier.
• Put a search box at the top of the search results page – This will make it easier for people to do another search should the results of the first one not be what they were looking for. You should customize the code a bit to make it look a bit larger than your regular search field.
• Have the term they searched for display in that search box - Having the searched-for term appear within the box on the results page when the results appear will further reinforce what they had typed in, and if they mistyped something and got wrong results, they’ll see what the mistake was.

Thoughts?

Do you use a popular hosted search tool on your website? If so, have you customized it to make it more usable for your visitors? If not, which of the tips mentioned above would you incorporate? Share your thoughts with everyone by leaving a comment 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!