Bad web design

If something’s worth doing, it’s worth doing right

While there are an immeasurable number of things that web designers—whether they use web standards or not—do that are good examples of what not to do, I thought I’d compile a list of things that really bother me and explain why they do.

#1. Opening links in a new browser window

This one infuriates me so much that it took me a few minutes to calm down after just writing the title for it. Never never never never never never never never have links open pages in a new browser window.

First of all, most operating systems have terrible window management—Windows, I’m looking at you. So when you have many windows open at once, it becomes a mess. Plus, with the advent of tabbed browsing most people would rather have only one browser window open at any given time. Users don’t want their machines taken over—they like to be in control. Don’t take that control away from them.

Many designers open new browser windows thinking that it keeps users on their site, but it can quickly frustrate users who want to browse the way they like to browse. When you frustrate your visitors, chances are pretty good that you’ll send them away. Isn’t the point to bring more users in to your site? If users want to open a link in a new window, they can use their browser’s “open in new window” command. Opening links in new browser windows also disables the functionality of the “back” button, which is a core interface element for browsing the web.

Some sites are particularly bad about this, however, even having each link within the site opening in a new window. For a particularly horrifying user experience, try browsing around IGN’s Neverwinter Vault. It’s like they went out of their way to make your browsing experience as painful as possible.

Please, I beg you: for the love of all that is good and just in this world, don’t have your links open pages in a new browser window.

#2. Stupid page titles

The page title contained in the <title> element is almost always used as both a click-able headline in search engine results and the default entry for bookmarking a site. Thus, this part should be short; giving the name of the web site, a short tag-line (if necessary), and either the page’s actual title or a brief description of the page. People who put the words “Welcome to” in their <title> elements should be shot on sight, as should people who simply give the filename or some equally useless title. Further, ASCII art generally has no place in the title element. When someone bookmarks your page, they don’t want to have your site showing up in their bookmarks list as something inane like ~-=My Homepage is teh R0×0r!=-~ or :: Welcome to My Homepage ::. There’s plenty of resources out there if you really need help with how to make a good page title. Your search engine of choice should be able to find them for you.

#3. Using tables for layout

Let me put this as clearly as I can: tables should be used for only one thing—presenting tabular data. They are not a layout tool. Use CSS for layout instead. Please.

#4. Complex URLs

Okay, first of all, URLs should never have been exposed in the user interface. But they’re here, and we use them. So let’s at least do each other a favour and make them easily readable. We’ve all seen URLs like this one:

http://www.amazon.com/exec/obidos/tg/detail/-/0321303474/ref=ase_htmldog-20/104-1498029-3683117?v=glance&s=books

These URLs are generated by server-side scripts, and are by no means easy to remember nor are they easily typed. URLs should be concise, contain no special characters, be consistant, properly visualise the site’s structure, contain no MiXeD-case text, and be easy to remember.

A List Apart has many good articles that can help you achieve these goals.

#5. Breaking the “Back” button

When I click the “back” button, I expect to be taken to the previous page, not to the same page I was on when I clicked the “back” button in the first place. A web designer’s job is not to control the visitor’s browser. If you make the “back” button ineffective, users will become frustrated because their web experience no longer conforms to what they expect, and that increases their chances of never going back to your site.

#6. Changing the browser’s interface elements

For some reason, some people like to make their pages hide the browser’s toolbar or the status bar at the bottom, which once again takes the control away from the user. People tend to have their browsers set up the way they like to use them. Why take that from them and piss them off?

Another thing that people like to do is use IE/Win-specific code to change the colour of the browser’s scroll widgets. Aside from this usually being non-standard CSS, if you actually use IE/Win, it can be very annoying when your OS’s GUI widgets suddenly clash with the rest of your OS. Further, what’s the point of implementing a non-standard effect when it will only work in one browser? Nobody using a browser besides IE will see them, so you’re just adding non-standard code to your page for no good reason, and that only hurts the web.

#7. Using the “precision” cursor for links

Once again you have people who just love to change your OS’s interface and take control away from you. In this case, people like to change the familiar “hand” icon for links with the ”+” (or “precision”) cursor. First of all, it looks tacky and will give the impression that you have poor design skills. Second of all, it’s usually done on pages with black backgrounds, making it all but impossible to see—and even when it’s not a black background, it’s still hard to see. Using a low-visibility, low-contrast cursor is bad usability, so don’t do it. Third, stop changing my OS’s interface! You may think it’s “cool”, but you have no right to mess with my OS’s GUI.

#8. Font sizing in pixels

Let’s face it: not everybody has perfect vision. When you set font sizes in pixels, some browsers—most notably IE/Win—can’t resize them. So for those people who have less-than-perfect vision, they can’t really read your content—and what’s the point of making content that your visitors can’t read? There’s also the matter of people like myself who are sometimes lazy even when sitting at their computer desks, leaning back far enough that it would just be nicer if the text could be made larger so as to enable reading it without sitting up in our chairs.

Owen Briggs has developed a very good method for sane, resizable text sizes using CSS. a warm gun uses this method, and I must say it works very well.

#9. Poor text readability

Text should be easy to read. Having a “loud” background image or otherwise removing your text’s clarity will not win you any friends. You may think the background image is “cool” and you like the colour you picked for the text, but if you make your text hard to read then nobody will want to read what you have to say. Don’t use the non-standard <blink> element, don’t use multiple font sizes in the same paragraph, don’t use multiple colours in the same paragraph, don’t make all your text UPPER CASE, and make good use of padding and margins.

#10. Background music

Very few sites have had background music that works well with the design of the site. Usually sounds in websites will only cause a user to either leave your site as quickly as possible, or mute their speakers. Having a mechanism for turning off the music is nice, but really in most cases it shouldn’t be there in the first place.

Also, many people like to listen to music while they do things on their computer, including browsing the web. When you’re listening to one of your favourite tunes and suddenly it’s interrupted by some obnoxious song from the site you’re visiting, you’re going to be one unhappy visitor.

#11. Bad site copy

While this is mostly aimed at English-speaking designers, the truth is that no matter what language you speak, you should really know proper spelling and grammar, and use proper punctuation. If you can’t write well, most people won’t want to read what you have to say.

#12. Frames

If I went over all the reasons why frames are bad, I’d be writing this for the next two weeks. Let’s just leave it at “don’t use frames” and move on to the next topic.

#13. Mystery Meat Navigation

Some people like using JavaScript rollovers to change the text in the status bar when you rollover a link. Instead of the URL in the status bar, you are treated to something completely useless like “Click me!” People want to know where they’re going if they click a link. If they can’t tell where they’re going, they might be hesitant to click on the link. If you have content on the other end of that link that you want them to see, then try letting them browse the web the way they like instead of once again feeling like you need to control every aspect of the user interface.

#14. Sites that require registration

Imagine if you had to fill out an application just to get the newspaper from the bus stop. It would suck, wouldn’t it? Now what makes you think that anyone really wants to go through the process of registering just to view your content? Fortunately, Bug Me Not takes some of the pain out of this, but it’s still a bit like putting a bandage on a cancerous tumour.

#15. “This site is designed for x browser…”

Anyone old enough to remember when Netscape Navigator reigned supreme will tell you that browsers come and go. Why deliberately make your site obsolete when you can use web standards to make your site look good in all browsers—past, present, and future?

While this list is far from complete, avoiding these pitfalls will put your sites on the right path. Now go forth and spread the gospel.

[Editor’s note: A followup to this article—which expands upon the points relating to tables, frames, and URLs—can be found here.]