The Problem
Many web sites have great visuals for clickable things like buttons and tabs, but when you try to click on them, sometimes it doesn't work. You have to "zero in" on a certain small portion of the tab or button, such as the text wording of the button, to make it click.
This is really frustrating! It's very bad design. As of Sept 2006, many major web sites still have this problem. For example Flickr's next/previous buttons at the bottom of page (when viewing a person's photo collection), and Barterbee's three colorful tabs along the top of the page. This surprises me, especially since the fix is so simple and easy.
The clickable elements often look like this: a colorful square or rectangle shape with a word or number in it, which you're supposed to be able to click on. Try clicking on the outer corners of these buttons - the entire colored area should really be active, but it isn't. Only the words are:
What Were They Thinking?
The web developers for these sites have learned by experience to reduce the number of images their web pages load. They do this by replacing small things like button images with a textual equivalent using everyday features of HTML and CSS. This is a smart thing to do - it dramatically speeds up page draw time for their customers, and increases the number of customers their site can support (by reducing the load on servers and reducing network bandwidth demand).
For example, they create a SPAN tag with a lot of padding and a border, some words and a solid background color in the middle of it. This looks like a cool big rectangular button, inviting you to click on it.
What's Wrong With That?
The problem is, they're only enabling the text portion of the button to be the active content. The code is basically:
<style>
.mybutton { padding: 8px 16px; border: 1px solid black; background-color: aqua; }
.mytext { text-decoration: none; }
</style>
<center>
<span class=mybutton><a href="http://cnn.com" class=mytext>prev</a></span
> <span class=mybutton><a href="http://cnn.com" class=mytext>next</a></span>
</center>
You can see here that only the "prev" and "next" phrases are surrounded by the anchor tag. That's not good enough.
The Solution
All they have to do to fix this problem is make the outer rectangular element be the active content. That's the thing you want people to click on. Regardless of what's inside the rectangle (big words, small words, numbers, whatever) - it's the big rectangle, not it's contents, that people are trying to hit.
This modified HTML shows the fix:
<style>
.mybutton { padding: 8px 16px; border: 1px solid black; background-color: aqua;
cursor: hand; }
</style>
<center>
<span class=mybutton onclick="window.location='http://cnn.com'">prev</span
> <span class=mybutton onclick="window.location='http://cnn.com'">next</span>
</center>
Now try it out:
Now the entire rectangular area of each button is active. The edge of the "visual" button is the edge of the actual button. Now that's the way a button should work!
This trick uses Javascript, which is supported by all modern web browsers today.
Summary
Pay attention to detail, and make the best-behaving web sites you can. You can create web pages better than some of the most popular sites out there today.
Be nice to your customers by making a highly usable site. Your customers will enjoy your site more without knowing why. They'll be more inclined to bookmark your site and tell their friends.
Don't miss the latest web tips and tricks!
Subscribe to our low-volume mailing list:
Privacy Policy
| Copyright © 2006 Fastech Learning LLC, all rights reserved. |
| Phone toll free 1-866-464-6688, Phoenix Metro area 480-895-6688 |
| Problem with this web site? please let us know |