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!

Why do website homepages have usability concerns that are different from other pages on your website? It’s because of their purpose. They can’t just display lots of text – that’s the job of your internal pages. Homepages have to present a snapshot of a lot of information at once, and they have to do it in a way that both entices new visitors to explore your website further, and makes it easy for returning visitors to find what they’re looking for.

Presenting that much information isn’t easy, and it becomes even more difficult to do when different groups within a business or organization start wanting real estate on it. Tough decisions need to be made when it comes to a homepage’s content, but if you couch your discussions in the content usability terms below, they might become easier to make.

With all of this in mind, here are some tips and considerations you can follow when planning the content on your homepage or if you want to improve the usability of your existing homepage content.

4 important questions to answer

Visitors returning to your website will already know what your business/organization is about and what you do, but new visitors won’t know that information. This is one of the main purposes that a homepage serves, so make sure to answer these 4 questions somewhere that your visitors will have about your website somewhere on yours:

• Who are you? - Visitors might want to see details about who you are. For small businesses, it helps them make a connection with the business owner, and for larger organizations or corporations, it can help support recruiting, PR, etc. Either way, it helps in establishing credibility with the visitor.
• What is it you do? – Use a tagline to convey your purpose, and put it near the top of your homepage where people can see it right away. Just don’t write it so that’s vague and full of marketing-speak – keep it real and tell your visitors what they’re gaining by visiting your website.
• What can I find here? – Your homepage provides a starting point for where the visitors can browse to elsewhere on the website. There should be clear links to the most popular areas of your website; for example, if it’s your blog or news updates, include links to that content.
• What action do you want me to take? – Your primary call-to-action needs to be displayed prominently and written in a way that encourages visitors to take that action. If your call-to-action is either hidden or poorly communicated on it, most people won’t actually do what you want them to do.

Incorporating this information in a way that new visitors can easily find it but returning visitors can avoid it if they want to isn’t easy. If you write your homepage’s content clearly and concisely, and design the homepage so that things are easy to find but easy to avoid as well, you should be fine.

4 ideas for more usable content

While your website’s homepage needs to be designed so that visitors can find what they’re looking for quickly, easily, and intuitively, when it comes to content, you want to strike a balance between providing information on the homepage itself and drawing people further into your website. Here are some ways to accomplish that:

• Emphasize keywords in your link text – Visitors scan the homepage of your website, so you want to make sure that your links are written in a way that attracts their attention and emphasizes the keywords that they’re looking for. As always, avoid using “click here” in your link text.
• Use images for emphasis – People notice images before they do the text around an image, so using them can be great visual indicators of what the content or links around the image are about. The key is finding an image that intuitively communicates what that content is.
• Keep it to a few screens – Don’t overwhelm visitors with lots of content on your homepage – ideally, the homepage should be 1 to 3 (at most) screens in length, with the most strategic links above the fold. If you do find yourself with a ton of information, it’s time to make decide what really belongs there.
• Use content less and links more – Every inch of a homepage is valuable territory, and large chunks of text eat up prime real estate. Great homepages strike a balance between the amount of written content on them (with less being more) and links to the content elsewhere on the website.

Thoughts?

What are some tips that you have for writing better homepage content or for improving the usability of your homepage content? Do you think focusing on the content of your homepage alone will make the homepage more usable, or is it more a function of design? 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!

As a web content writer, the best you can do is to make sure that your intro text you serves a purpose and communicates something to your visitors. While editing your content as much as possible might seem like good advice normally, intro text does have a valid role, so you shouldn’t scrap it entirely.

Below you’ll find some reasons why you need to have intro text in your content, followed by some tips for how to write it so that it makes your content more usable.

3 reasons you should use intro text

The topic of intro text is something that I work with clients on all the time. Here are 3 reasons that I give them about why they need some introduction to their content, especially when it comes to lists:

• Tell visitors what your content is about – Yes, most visitors to your website will scan through your content quickly, but that doesn’t mean you don’t want to let people know what the content is about. If those scanners have any confusion about the content on the page, they’re likely to scroll back up and look for that intro text to help them.
• Bulleted lists look silly without it – Have you ever seen a section or page of web content that’s just a list of links or items? Something will feel a little off, and that’s because there’s no intro text telling you the visitor what the list is a list of, why it’s there, and how you can benefit from it. That’s what good intro text will do; it can be as simple as “The following ____ are/will ____:”.
• It’s unnatural to how we communicate – Try writing some content where you go right into the topic without any introduction to it. Or along the same lines, try explaining something to someone without giving them the context. Both are hard to do because not introducing something properly goes against the very nature of how we read, write, think, and speak.

6 tips for writing usable intro text

Now that you have heard some reasons for why you should write intro text, here are some pointers on how to write intro text that is both usable and useful to your visitors:

• Keep it short and concise – Good intro text should be no more than 1-2 sentences long and should concisely state what the page is about. If it makes sense to include keywords here, do so, but only if they make the sentence more helpful to the reader.
• Limit the jargon and fluff – Intro text isn’t the place to include marketing or technical jargon, but then again, no website is. (That’s another topic though.) And skip on the fluff as well – i.e., content that has no function and is only there for its own sake.
• Focus on the user – Strong intro text focuses on answering 2 questions that the reader has about your content: what will they find on the page, and why should they care about it. If you answer those in as straightforward a manner as possible, you’ll have done a good job.
• Precede it by a header – I’m not just talking about the intro text on a page of content here; the same principles apply to the intro text within a section of content. When writing a section header, the text of the header should be a phrase that summarizes what the intro text beneath it says.
• No more than 1 link max – Because of where intro text is on a page, a link in it is really going to get noticed a lot. If you follow some of these ways to make links more effective as you’re writing the intro text, you’ll increase the likelihood that people will follow the link contained within it.
• Experiment with formatting – Want to get people to pay attention to your intro text 100% of the time? Try experimenting with the formatting to bring more attention to it. Put certain keywords or phrases in bold print, put the whole intro in bold print, or try some alternate formatting within your CSS.

Thoughts?

To those who write web content often, what are your thoughts on including intro text in your content? Is it worth the space on the page, or should it be gotten rid of altogether? 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!

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!

What I’d like to talk about are the characteristics and general rules about how and when to use each attribute. But first, let me give you a little background on just what these attributes are.

ALT Attribute

“ALT” simply standards for “alternative”, and ALT attributes are intended to be descriptions that can be seen instead of images, either before the image loads or if it does not load at all.

The ALT attribute is an important element to the accessibility community. It began as a way for people who are blind and use screen readers (or people who use text-only web browsers) to know when there was an image on the page they were reading.

From an SEO perspective, ALT attributes may or may not benefit your website – there is still no conclusive school of thought on the subject. Most people will agree though that tThey are just another opportunity for you to put code on your page that the search engines will read, and should be taken advantage of as one of the basic steps to make your website SEO-friendly.

That being said though, don’t abuse the ALT attribute for SEO purposes only. Keep in mind some of these tips for how to write them:

• Make them as specific and descriptive as possible without being too lengthy
• If an image contains text, the ALT attribute should replicate the text in full
• Avoid being vague or writing text that isn’t related to the image or context of the content around it
• Don’t use the image’s file name as the ALT attribute

TITLE Attribute

The TITLE attribute can be used with almost all HTML elements on your website. While the ALT attribute emerged from the accessibility world, the TITLE attribute emerged from the usability standpoint.

There are two main roles that TITLE attributes can have:

• Descriptive – Use the TITLE attribute on such things as form fields to let your visitors know what the intended purpose of an element on your website is.
• Advisory – Use TITLE attributes on text or image links to let visitors know where they are being taken to when they click on the link.

You’ll know when something has a TITLE attribute specified because it will appear as a tool-tip when you hover over the link.

When it comes to links, the most important thing to keep in mind is that visitors to a website don’t like to be surprised about where a link will take them. They want to know where they’re going so that they can choose whether to follow that link or not. But you don’t necessarily need a TITLE attribute on every text link on your website. Only use them if the actual text of the link, or the surrounding context of it, is somewhat vague about where the visitor will be sent to if they click on it.

As with ALT attributes, there is still no agreement on whether they help you in SEO. Most web designers do agree though that they should be taken used as another one of the basic steps to make your website SEO-friendly. Just keep in mind that even if they are SEO-friendly, that doesn’t mean they should be abused. Specifically, you shouldn’t:

• Write the TITLE text with only the search engines in mind
• Use them to duplicate content elsewhere on the page
• Stuff them full of keywords that make them completely unhelpful

Here’s a simple way to understand how to write your TITLE attributes: write them so that they are descriptive enough to help your human users, and that should be enough to give you some SEO benefit as a result.

Images that are links

There is always some confusion about which attributes to use when an image is a link. Should you use an ALT attribute, a TITLE attribute, both, or neither, and if so, what should the text of those attributes be?

My answer to those questions is that it all depends on what the actual image is:

• If it contains a lot text – If the image contains text directing people to do something, then you should use both attributes – ALT text for the image and a TITLE attribute for the link. The text of both should be what the image says to do. For a good example, look at how I used these attributes on the “Enjoy this article” button at the bottom of this post.
• If it has only a few words of text – In this instance, your attributes will need to be a little more descriptive because the image itself isn’t. For example, if you have a nicely styled “Contact Us” button (as I do on the home page of this website), you need to be a bit more creative in how you write both attributes.
• If it doesn’t have any text – This is where you need to be the most creative, because the image itself doesn’t give you any guidance. In general, if you try to be as descriptive and action-oriented as possible, while perhaps incorporating one or two of your keywords, you should be golden.

Think before using

In general, you should use both elements when working on a website, but you need to be careful not to overuse them when it’s not necessary to have them. Good web designers know how to use these attributes, but great designers know when to use them – and that’s a big difference.

What are your thoughts on these using the ALT and TITLE attributes on websites? If you’re a web designer, do you use them in your designs? Do you think that the benefits are worth it, either in terms of the search engines, or from your users’ point of view? Share your thoughts with everyone by filling out the comment form below!