Call to Action: Design Tips

The linked article is not new or rocket science. However it is nice to have reminders and examples.

E-commerce calls to action: design tips | Blog | Econsultancy: "Call to action buttons need to jump out at the shopper and leave them in no doubt about the next step they need to take to make a purchase."

Button Sprites with Text Part 2 - An ANSWER!

As you may already know I love button sprites you may already too! In an earlier post Button Sprites with Text I showed 2 versions. Unless someone has a better argument I think the SPAN-ed the text version is the best.

My original problem was the silly "active highlight that expands all the way to the left and out of view." See the top button in the following example. What the hell is that!


Well my friends.... "outline:0 none;" saves the day! Below you can see the code in action.

Now, normally I would say don't remove this outline. It is probably a very helpful for assistant technology users. Though if you are using :hover, :active, and :focus I think you may be indicating the actions that are happening anyways.

CSS Solution
a:link, a:visited{
position: relative;
display:block;
width:200px;
height:30px;
background: url(/images/buynow.png)no-repeat 0 0;}

a:hover, a:active , a:focus {
outline:0 none; /% this removes outline. %/
background: url(/images/buynow.png) no-repeat 0 -50px;}

a span{
position: absolute;
top:0; left:-9999em;}


HTML Solution
<a href="">
<span>Buy Now</span>
</a>

Button Sprites with text

Edited 4/30/2009: New findings see Button Sprites with Text Part 2 - An ANSWER!

--------------------------------------

Button Sprites. I love em. Changing a background of a text link instantly to make hover and stuff is awesome.

Though what is the proper solution when you want the words to be stylize in the graphic and you do not want to use the default text in the browser?

Unusually I find this version often. It will take the text in the span and position it -9999em to the left. Unfortunately you get the crazy active highlight that expands all the way to the left and out of view.

<a class="CLASSname"
href="http://www.blogger.com/LINK" title="Click Here" >
<span>Click Here</span>
</a>

I have also seen the use of the dreaded clear.gif or spacer.gif. This takes advantage of the alt text for accessibility. It seems right but what a waste of extra code and bandwidth even if it is only 43ish bytes.

<a class="CLASSname"
href="http://www.blogger.com/LINK" title="Click Here" >
<img src="/clear.gif" alt="Click Here" />
</a>


New Findings See Button Sprites with Text Part 2 - An ANSWER!
If you would like to make a comment make it at the newer posting.

<Img> with an Alt and Title verse <a> with a Title

What do you do if you have an image in the link? Do you place the title= attribute in the a tag, img tag, or BOTH?

One post from 1998. http://www.useit.com/alertbox/980111.html This seems valid.
Extensive review on about.com http://webdesign.about.com/od/htmltags/a/aa101005.htm

From a little research and maybe I am misinterpreting w3c but I guess we don't need to have a title= in the a the image has a sufficient alt=and title= attributes.

Do you do something different?

"Remove All" Shopping Cart Button?

Is "clearing" a shopping cart with one button still as important as it use to be? My first thought is no, especially since it is very common to have a "remove item" link next to the product. However as I think about it now I might change my mind.

I believe that there are somethings on a website, especially for online stores, that are needed to portray a sence of security and trustworthiness to the user. The "clear all", "clear shopping cart", and "remove all items in cart" maybe one of these feel good items. Plus (I would need some real feed back here) I bet assistive technology users would like to have "clear all".

Any thoughts?