Common Mistakes of Website Owners

Disclaimers

I am absolutely awesome, of course, but that doesn’t mean I am perfect. I do make mistakes and there are things I mention below that I have done in the past. I however have taken the advice of the wiser than me and corrected my mistakes. Would this article only make one person change only one detail about their website in order to make it more accessible, more simple or more practical, then I would be happier.

Omitting the alt attribute

I do not believe you can ever speak too much of the importance of the alt attribute (yes attribute, not tag!).

The alt attribute is meant to create “alternative text”, that is, what will be displayed alternatively instead of the image (or other content) if, for some reason, the image cannot be displayed. People browsing with images turned off will see this text, blind people will hear it (or read it through braille alphabet) rather than view the image, and if the image is broken, it will be replaced by it.

An awful lot of people omit this tag, both out of laziness and out of ignorance for its real purpose. I blame this on a few facts:

  • Internet Explorer makes the alt text appear on mouse hover. It often misleads newbies into believe this is the purpose of the alt text (and claim that it doesn’t work in Firefox). They will thus avoid using it if they don’t want it to show on hover. Besides, this will make some people call the title attribute on anchors (links) “alt text” because it appears when you hover over the link.
  • Internet Explorer also has a poor support of the alt text for its primary purpose: replacing images that are not displayed. Instead of just plain replacing the image with its proper text, as though
    there has been no image at all, it displays part of the text with a border around it, and an “x” in the corner. This can make part of it unreadable.
  • A lot of website creators ignore pretty much everything of web standards and accessibility, thus never thinking that blind people might eventually come to their site.

Styling The Title Tag

The <title> tag simply displays the title of your website, more specifically of the page currently being viewed. It is plain text, present for practical reasons. It is particularly useful when several windows or tabs are open. I speak by experience.

Considering that it will be looked upon by visitors only for a couple of seconds at a time, just to check what page they are one, there is no need to “style” it. By styling, I mean any of the following practices:

  • Putting spaces between letters, by using several &nbsp; or, worse even, the incorrect &nbsp with no semi-colon at the end, causing the browser to display &nbsp several times
  • Using special characters such as ­­~, brackets or unnecessary parentheses
  • Using multiple periods to separate two parts of the title

It becomes quite annoying when bookmarking. How am I supposed to know the subject of your page if all I can see is a bunch of spaces followed by the capital letters D A R, with the space in between? Of course, I can edit the title when bookmarking, but that is for non-lazy people, and there are few among web surfers.

The title tag is also used by search engines. Its content have very important priority when it comes to analyzing your website for keywords. Of course, search engines cannot erase spaces to stick words back together and understand what you’re talking about. You can easily have clean titles, as follows:

  • Your site’s name, written plainly.
  • The name of the indiviual page, also written plainly. Placing it before the site name can increase readability and ease bookmarking.

An example (beside my own page titles): “Downloads · Wallpapers · Cute-Fluffy-Rabbit.com”

“Automated” titles, for example titles generated by WordPress, are also useful. They will usually get the individual title of your page along with your site title.

Enormous Images

This applies both to the resolution images, in pixels, and the file size, in kilobytes. Apart from high-quality photographs and other graphics that are expected to be huge, no image should be above 60KB. As for its resolution size, you should think of computers with 800×600 resolution, making your image no larger than 790px and no higher than 250px (if you have a better recommendation for the height, you are welcome to make it). There are still people with 640×800, but their number is extremely small, so provided that your layout isn’t too much exceeding that width, you should be fine.

Of course, I’m talking here about images used in headers, not about photography displayed on your website. In that case, however, you should always use real thumbnails rather than HTML resizing.

Unreadable Text

While lack of contrast is covered in another article because it’s everywhre, there are other common problems. The first one is font size. Maybe you like 7pt, but most web users don’t. One of the best ways to make sure your visitors are happy is to use percentages instead of fixed values (points or pixels). This also ensures that visitors using Internet Explorer can resize the text.

While it is good to make headers and links stand out, having too much variety can also be annoying to the visitor. For example, avoid giving bright colors to bold, underline and italic text.

People have a tendency to associate underlined text with links, so it is preferable to avoid using it altogether, except, naturally, for links. The same goes if you give too much of a different color to bold or italic text. They might seem like links to many visitors.

Advertisements

1 Comment »

  1. Baohan Said:

    Me and I.E are the enemy. It just doesn’t go well between us two. And you’re so right about the title bit. I book marked at least 20 sites yesterday, but after that, I can’t recognize which is which because they all have ultra long quotes on their title. Two words should be enough for the title.

    The alt tag is also something that most people are missing. They just forget it. Without that tag among their images, the site automatically doesn’t validate. Anyway, great weblog, with amazing contents. I’d love to see more. 😀


{ RSS feed for comments on this post} · { TrackBack URI }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: