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!

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!

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!

The reason I bring up this topic is because last week, I was installing the Search Everything plugin on this blog, and had to decide how to style the new search form. I knew from the start that I wanted to include a little icon in it to convey its purpose; I had seen that done elsewhere and really liked the look of it, and felt that it would work here.

When and how to use icons

This is a nice design effect, and I believe that it could have a place on most websites, in one form or another. But here are a few pointers that I think are worth mentioning regarding when and how to use icons on your forms:

• Use sparingly – Icons shouldn’t be used within every input field in all the forms on your website. It will work best on forms with a small number of input fields – search bars, contact forms, and blog comment forms, for example. On shorter forms like these, you can use it on all the input fields without making it seem like you went overboard.
• You still need a label – You’re not using an icon as a replacement for an input field’s label – you’re using it as a way to accentuate the label. An icon can give some extra usability and design benefits, but that’s presuming that your form is already well-designed and usable to begin with. (If they’re not, you might want to read through an earlier post I wrote about how to design your forms to emphasize their usability.)

Step-by-Step Instructions

For those of you who aren’t reading this on my website and aren’t able to scroll up the page to see the search for yourself, here’s what my search field looks like:

If you’re interested in creating a similar look on your website, here are the steps I went through to make my search field look that way, complete with the styles that I used in my CSS to achieve that look.

1. Step 1 – Create the blue outer wrapper that the search bar resides in. This element isn’t totally necessary, so feel free to skip this step if you want to. (One note: I used a <div> tag here, but you could use a <fieldset> instead – it would do the same thing.)

   #search {
   width:230px;
   padding:10px;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   background-color:#98afc8;
   background-image:url(images/search_bg.png);
   background-position:bottom;
   background-repeat:repeat-x;
   border:1px solid #849ab2;
   text-align:left;
   height:1%;
   overflow:hidden;
   }

2. Step 2 – Create the actual search bar. What you’re doing here is simply creating the <div> tag that the input field will be placed within; the background image for this <div> will be your icon. Just make sure to leave enough padding on the left so that the input field doesn’t overlap with the icon.

   #search #searchField {
   background-image:url(images/search.png);
   background-position:10px;
   background-repeat:no-repeat;
   background-color:#ffffff;
   border:1px solid #849ab2;
   border-radius:10px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   height:1%;
   overflow:hidden;
   padding:0 20px 0 34px;
   float:left;
   margin-right:10px;
   }

3. Step 3 – Style the actual input field. I want it to be seemingly invisible within the <div> tag, so I’m making both the border and background color of it white, which will match the color of the <div> tag.

   #search #search_field input {
   border:1px solid #ffffff;
   background-color:#ffffff;
   }

4. Step 4 – Create the submit button that people will click on.

   #search button {
   padding:3px;
   background-color:#da5e2a;
   color:#ffffff;
   font:bold 13px Arial, Helvetica, sans-serif;
   border:none;
   margin-top:3px;
   cursor:pointer;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   }

Here’s how the final HTML code will look:

<div id="search">
<div id="searchField">
<form method="get" id="searchform" action="http://www.addicottweb.com">
<input type="text" value="Search" onblur="if(this.value=='') this.value='Search';" onfocus="if(this.value=='Search') this.value='';" title="Enter the terms you wish to search for" class="srch-txt" name="s" id="s" size="15" />
</div>
<button type="submit" class="SE5_btn" id="searchsubmit">Go</button>
</form>
</div>

What if you want to style multiple input fields?

My approach works well if you’re only styling one input field. But if you wanted to use icons within multiple input fields, my way isn’t the best solution. You would have to add multiple styles for each icon you’re using, which would make your CSS more bloated than necessary.

Fortunately, that’s where Javascript comes in. As I was researching this topic, I came across a good article by Janko Jovanovic where he describes how to accomplish this technique using Jquery to style multiple input fields. This automates the process a bit, and helps you keep your CSS to a minimum.

Thoughts?

If you’re a web designer, what kinds of websites do you think this would work well with – blogs only, or other websites too? Do you think that it should be used selectively, such as for search bars (which you currently see), or do you think there’s a greater need for this? Share your thoughts using 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!

So before I go into why favicons are used and how to make them, here’s a brief review of what they are. When I use the term “favicon” I’m referring to an icon that is associated with a particular website, and which web browsers display in three places – next to:

1. the URL in the address bar
   
2. the website’s name in a list of bookmarks
   
3. the page title in those browsers that have tabbed browsing
   

Is it absolutely essential to have a favicon on a website? Of course not. But incorporating one into your design is one of those small touches that goes a long way towards improving the overall quality of a website, and it can also have a few smaller benefits for your visitors.

Why use a favicon?

If my clients ask about it, I always tell them the little icon isn’t there just for looks. It has a subtle – yet important – role in building the brand on their website. When a visitor sees one on their website, that can be a strong indicator that they came to the right place – which can also be reassuring in a sense.

But using favicons also serves a more practical purpose as well, at least from your visitor’s perspective. How so? By saving people time when browsing the Internet.

It’s the same principle that applies elsewhere on your website. When you look at a web page, your eyes notice an image before the text surrounding it. So when I’m looking through my folders and folders of bookmarks, looking for the favicons of the websites I’ve filed away helps me find what I’m looking for that much quicker.

In the image I used above, you can see what I mean. When a website doesn’t use a favicon, your web browser will use a little blank page icon next to the website’s name in your bookmarks list. If you get enough of these in a column, then it becomes a bit tedious to sift through all of them to find the website you’re looking for.

But if a website does use a favicon, it makes it all the more easier and quicker to look through a list of bookmarks and find then one that you’re looking for, because your eye will notice the colorful favicons before it does the text of each bookmark’s name and the blank icons surrounding it.

Making a favicon

A favicon is a special file that ends in an .ICO extention, so you can’t just use any old image. But you can design your own image and then use one of the many websites out there that can convert your image into a favicon.

Favicons are 16 pixels by 16 pixels in dimension, so you want to be sure that when you’re designing your icon, whatever your including will actually be readable. Again, this is why so many favicons are simply the logo of the organization or business.

Here are some places where you can upload an image and convert it into a favicon for your website:

• Favicon.cc
• Dynamic Drive
• Favicon from Pics (this is the tool that I use)
• Favicon Generator

See if you notice them

So the next time you’re browsing through your bookmarks or your favorite websites, take a closer look and see if you can notice the favicons that are used. And if you have any other thoughts about favicons, share with everyone by commenting on the form below!