1. Getting rid of the dotted border completely
2. Stopping the border from stretching
3. Editing the Firefox default user style sheet to do solution 1 or two for all websites you visit

The first solution will essentially turn of the border completely leaving no outline

a {
    outline: none;
}

before:

After:

The second solution will keep the border nice and tidy with your image.

a {
    overflow: hidden;
}

Before:

After:

Lastly if you’re annoyed by the border as much as I am, there are two ways to perform either one of these solutions using the Firefox user style sheet.

But we’ll save that for the next entry.

The technique is quite simple, you use the text-indent CSS property and indent your text negatively so far off the screen it doesn’t show up. Designers have come to adopt -9999px or -9000px. This value insures that if you have a right aligned header and the site is being displayed on a large monitor, your text will still be pushed off screen.

Using this method you can put push your text off the screen and replace it with an image or logo and still have semantic and accessible XHTML. Of course you can also link it so that it returns to your home page as is generally practiced.

<h3 id="header">
	Company Name
</h3>

In the CSS you want to make sure that you define a width and height for the image, otherwise the element will colapse onto itself.

/* css */
#header {
	text-indent: -9999px;
	background: url(logo.gif);
        width: 300px:
	height: 25px;
	}

This code shows how you can replace an <h1> tag with an image, yet keeping the <h1> visible to screen readers and search engine robots. However Firefox creates slight problem with links. Theres a thin dotted outline around the tags. Ever since version 1.5 Firefox has started to include the -9999px indention, so the border goes to the far left of the screen at when the link is clicked.

In the next entry we’ll see how to get rid of the dotted line border on the links in Firefox.

Everything on this list is obvious yet I see it happen all the time. Most of what’s on this list, everyone already knows, however people STILL feel it absolutely necessary to do. This is simply a list of things you should not do on a website. Period.

Splash pages. If I have to choose high or low bandwidth before entering your website you’ve failed. This is 2007. There is no need for splash pages anymore… personally I don’t think there ever was. From an SEO standpoint having a splash page can be very hurtful towards your rankings. Search engine spiders will index your splash page instead of your home page and usually a splash page consist of flash or some other form of media such as a picture. The only actual text content on a traditional splash page is the “skip intro” link. Users with dial up or even slow broadband will become frustrated after waiting for your page to load up only to find its a splash page and no actual content is on there. You want to make it easy as possible for users to navigate your website, and you want them to do as little work as possible. Having them wait for a splash page and then click “continue” goes against this principle.

On going music. Unless you have a couple of hit albums there is no reason you should be playing music on your website. I’m usually listening to my own music when I’m on the computer, the last thing I need is for your website to add its own soundtrack. Music on a site is usually done wrong in the first place. Why is your song restarting each time I go to a new page or refresh the current one? If you’re going to do something unpleasing at least learn how to do it right so its not that much more unpleasant. Again users on a low bandwidth connection and search engine spiders will come across your site and leave. This is an age of instant gratification especially on the Internet. If you really really want music because it just happens to be your favorite song of the week, please allow the user to stop the song, and don’t do it on page load.

Multiple video formats on the web are irrelevant in 2007. How many of you ACTUALLY have real player installed? C’mon don’t be shy now… ok 3 of you. Good. How many of you have flash player installed? Oh everyone who’s ever watched a video on YouTube. Hmmm does that tell you something? Flash has become the default player for delivering video on the web, stop using Real Player, or window media player. Stick with what works best.

JavaScript Links. C’mon people enough I cant stress enough what year it is… If I can’t right click and open in a new tab/window you’ve failed. This is a huge usability flaw. Like most web savvy users, I user Firefox, and if I can’t use its built in tab feature then that’s almost as bad as…

You resizing the user’s browser how DARE YOU! I am browsing your website with the settings I want. Resizing the users browser is a huge flaw. First of all you don’t need to be doing any more. Who uses 640×480 even 800×600 is out the door. 1024×768 should give you PLENTY of room to design your website without having to launch external content in a new resized browser window. At least put up some sort of notice that says, “This link will resize your browser” I wonder how many would actually click then… that alone should tell you something.

This will be an on going list. Stay tuned for more!