Web development mistakes
When I visit a website, especially if it’s the site of a competitor or a prospective client, I like viewing source and take a look at what’s under the hood. It’s one of my not-so-secret obsessions. And I am way too often absolutely disgusted by what I see.
The web is overflowing with sites that use horribly invalid, broken, and inaccessible markup. Even sites built by people who have been in the web business for many years, and who really should know better, are full of problems that shouldn’t be there. The reason? Ignorance, laziness, lack of time, bad tools, you name it. Yes, I’ve been guilty of making many mistakes myself through the years. However, I do my best to learn, and avoid making the same mistakes over and over again.
Update: I have updated the list: Web development mistakes, redux.
Here’s a list, in no particular order, of some of the most common mistakes that even experienced web professionals tend to make:
- DOCTYPE confusion
- Completely missing, incorrect, or in the wrong place. I have seen HTML 4.0 Transitional used in documents containing XHTML markup as well as in
<frameset>documents, DOCTYPE declarations appearing after the opening
<html>tag, and incomplete DOCTYPES.
- <span> mania
- A common way of styling something with CSS is to wrap it in a
<span>element with a class attribute and use that to hook up the styling. I’m sure we’ve all seen things like
- (too much) Visual thinking
- Treating the web as WYSIWYG – starting off by focusing on how things look instead of thinking about structure first, and presentation later.
- Lack of semantics
- Non-semantic markup. Basing the choice of which HTML element to use on the way most graphical browsers render it by default, instead of on which meaning the element has.
- Character encoding mismatches
- Specifying one character encoding in the HTTP header sent by the server, and using another in the document. This may confuse browsers and make them display the document improperly.
- Bad alt-attributes
- Missing or useless.
<img>elements with missing
altattributes can be found in billions on the web. Not quite as common are useless attribute values like “spacer GIF used to make the layout look good”, “big blue bullet with dropshadow”, and “JPEG image, 123 KB”. Remember, the
alt attribute is required for
- Invalid id and class attributes
Multiple uses of the same value for the
idattribute. Invalid characters used in id and class attributes and CSS selectors.
In CSS 2.1, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit.
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-”), underscores (“_”), colons (“:”), and periods (“.”).
- Browser sniffing
- Using scripts, server or client side, in an attempt to detect the visitor’s browser, and send or execute browser-specific code. Very commonly fails for reasons like new browsers, updated browsers, and user agent spoofing (Opera does this by default).
- Missing units in CSS
- Length values (horizontal or vertical measurements) require units in CSS, except when the value is zero. It’s not like in HTML, where you can type
width="10". In CSS, it has to be
width:10px;(or whatever unit you’re using).
- Browser-specific CSS.
- Scrollbar styling, expressions, filters etc. Proprietary CSS that only works in Internet Explorer. Invalid, too.
- Flash dependency
- Assuming everybody has Flash installed. Not everybody has. And most search engine robots do not (Google has reportedly started experimenting with indexing of Flash files, but they still recommend that you make sure all your text content and navigation is available in HTML files), so if your whole site depends on Flash being available, you’re not going to score high with search engines.
- Text as image
- Making images of text, and not providing a more accessible alternative. Not only does it take longer for visitors to download images instead of text, you also make it impossible for most visitors to enlarge the text.
- Bad forms
- Inaccessible, hard-to-use forms. Learn to use the
<legend>elements, and do not use a “Reset” button.
- Old skool HTML
- Multiple nested tables, spacer GIFs,
<font>elements, presentational markup. So common I don’t really have to mention it here.
- Being IE-centric
- Coding for IE/Win first, then adjusting for others, if there is time.
- Invalid HTML attributes
- Using deprecated or browser specific attributes like
<img>elements (in strict DOCTYPEs) just to name a few.
- Unencoded ampersands
- Many URIs contain long query strings with unencoded ampersands (&). This is invalid, and may cause problems. Ampersands must be written as
Did I miss your favourite mistake? Add it to the list.
Update: Note that there is an updated version of this list at Web development mistakes, redux. Please check it before leaving any comments here.