Keeping Labels and inputs together.

When you are placing multiple inputs (and labels) in a <form> tag organizing the layout can sometimes get tricky. There are times when <fieldsets> seem appropiate, that's easy then however there will be times to have more control even with in a <fieldset>. Placing a <div> around each <label> and <input> works. Then use ID or CLASS attributes to control your layout.

<fieldset>
   <legend>Set of inputs</legend>
  <div id="item01">
    <label for="item01input">item01</label>
    <input id="item01input">
  </div>
  <div id="item02">
    <label for="item02input">item02</label>
    <input id="item02input">
  </div>
</fieldset>

That's great! However I think we should make it more semantic. <div> tags are technically block elements. Lets change those <div> tags to <p> tags.

<fieldset>
   <legend>Set of inputs</legend>
  <p id="item01">
    <label for="item01input">item01</label>
    <input id="item01input">
  </p>
  <p id="item02">
    <label for="item02input">item02</label>
    <input id="item02input">
  </p>
</fieldset>

Now I'm happy! If you have other solutions and comments please feel free to speak up.

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?

Don't Forget the tables.

If you are going to be accessible you do not want to design a full page using tables. There are so many reason I can go into why that is wrong. However I want to remind you that using tables correctly, when needed, would be the best and smartest thing you can do for all your users. Especially those using assistant technologies.

Here are some links to help you along making your tables accessible and look pretty too!

1. Explains the use of things like scope, abbr and a good format. (Presented in 2005 but it is not outdated yet.) http://www.usability.com.au/resources/tables.cfm
2. The author at http://aenui.com reminds us that tables still easily look nice. http://aenui.com/user-interface/designing-tables-for-usability/

"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?