The website design crimes that infuriate.
If you're in web marketing, web design, web development, or usability testing, pay attention. The decisions you make have a serious effect on the experience that visitors to your sites will have. What might seem to you like a great piece of web design, be it from a marketing or artistic point of view, may actually seem to the visitor like a form of torture or a missed opportunity. It will reduce the chance of that person spending more than a few seconds on your website, will reduce the chance of anyone bookmarking your website, and will mean that those visitors will go to a site run by a competitor if it means they can avoid the problems your website presents them.
This page describes the problems that drive me, personally, away from a site. Avoid making similar mistakes on your websites.
Foul Rating: Extreme.
Some site managers seem to think along these lines: "Most people use the latest version of Internet Explorer, so don't bother testing your code on other browsers, we haven't got time." I know this because I've worked for such people. Some might have been slightly more accommodating and stated that the site being developed should also be tested in Netscape. But generally, development and testing in such places concentrates on the features and limitations of Internet Explorer.
Adobe's webstore did this to me recently. I purchased Photoshop Elements 4.0 (because the UK price finally seems to reflect the US price) and the process went fine until the important bit. I was purchasing the download version, and the download button did not work. Trying to go back to the order summary page caused a session timeout, so I was stuck with nothing. A call to customer services (two days later because it was the weekend) got me back to the download page, but it still didn't work. The customer services agent gave me the number for technical support, but by then I'd worked out what was going on. Adobe's web developers seemingly hadn't bothered to test the download button in Mozilla Firefox, and they'd used JavaScript on the page. For a company the size of Adobe to have a broken website is ridiculous.
Let's examine the data for my site in 2005 so far (data for 297 days).
| Browser type | Unique visits | Percentage share |
|---|---|---|
| Internet Explorer | 18624 | 50.18% |
| Mozilla | 14380 | 38.74% |
| Netscape | 2398 | 6.46% |
| Safari | 594 | 1.60% |
| Konqueror | 969 | 2.61% |
| Opera | 95 | 0.26% |
| Lynx | 17 | 0.05% |
| Galeon | 23 | 0.06% |
| WAP mobile | 15 | 0.04% |
(You can see the full table in this PDF file: Bobulous Central browser count data, 2005-Jan-1 to 2005-Oct-25.)
More specifically, only 46.52% of unique visits were made by users running Internet Explorer 6. To concentrate on that one browser would leave more than fifty percent of these visitors with problems viewing the site. Next time your boss tells you to test in only one browser, give him a slap.
Foul Rating: Extreme.
The Powergen site did this to me a while back (December 2003). It waited until I'd put in contact details, energy consumption details, bank details, preferred payment details, Tesco clubcard details, and more, and then, finally, after pressing the confirm button to finish it all off, I was presented with the following, in very small font, Sorry, service is temporarily unavailable. Try again later. It was 'temporarily' unavailable for over a week. So I gave up with the site and added Powergen to the list of companies that I intend to avoid for a long time. If there's a problem with receiving user data, the problem should be checked and reported BEFORE the damned customer fills in twelve pages of forms.
Foul Rating: High.
If I want to open the link in a new tab or a new window, I can use the middle mouse button in Mozilla, or the 'Open Link in New Window' option that appears when I click the link with the right mouse button. Forcing the link to open a new window without me asking for one just leaves windows open all over the place that I don't want.
Foul Rating: Very High.
Ooh, this bugs me. By helpfully telling my browser to change its shape, you screw up the carefully chosen size that works just right for me, on my monitor, on my desktop. Ninety-nine percent of the time (and that's no exaggeration) the content of the new window does not fit in the new-sized window, because whatever moron tested it only tested it on their machine, on their monitor, on their desktop. Even more useful is when the developer sets the option that banishes scrollbars from the new, new-sized, badly-fitting window, so it's impossible to actually scroll around to the bits that don't fit. Let me summarise the last two points in one easy sentence: Do not force links to open in new windows! Thank you for listening.
Foul Rating: Very High.
When I see a popup window appear without my permission, I close it before the contents even load. Which means I don't even see the advertisment, and I'm still being put off ever visiting the website again. Luckily the Mozilla Firefox browser does not allow unrequested popup windows to display, so I don't see them anymore, but most browsers still force their users to suffer these popup windows. Don't do it: your website will just become an annoying place to be. I'm much more likely to pay attention to a subtly-placed banner ad on the main page, whereas I'll ingore popup ads in protest.
Foul Rating: High.
Ah, JavaScript again used to evil ends. Adverts that float over the page text and require the user to manually close them, or wait until they disappear, are annoying. Another way of telling your visitors that you view them as click-through cattle only, that the content of your pages is not really worth reading. Much better are the ads that appear between paragraphs. Those ads are noticeable, without getting in the way of the text.
Foul Rating: High.
Lazy, lazy, lazy. If you use thumbnail images to illustrate a page, make sure you create dedicated thumbnail files; don't just load the full-size image and give it smaller width and height attributes. A thumbnail image is a little preview of an image that sits on a page alongside text. It should be small in dimension, and even smaller in filesize. For example, a good example of a thumbnail image could be 120 by 90 pixels in a file that is 2,500 bytes in size. A bad example of a thumbnail is an image that hasn't been shrunk at all, is still 1800 by 2400 pixels in dimension, and is 250,000 bytes in size. A page full of such "thumbnails" is a pain in the ass, and it will take a fair time to fully load even on a good broadband connection. Someone on a dial-up connection may not even bother to wait for the images to load. Create small thumbnail files, or frustrate your visitors.
Foul Rating: Very High.
So many sites with so much useful and valuable data, and such a useless search engine. Just one example of many, the O'Reilly Safari Bookshelf. Using a free trial of this service [June 2004], I was amazed at how much excellent content they had for the technical reader - a digital bookshelf full of volumes on Java, C++, Perl, PHP, MySQL, UNIX, DNS, firewalls and machine security, internet protocols and services, and many other technologies. More information than surely anyone could need at any one time, and certainly more information than anyone could search manually in the time they have to look for an answer to a technical query. So a quality search engine is promised by O'Reilly to help navigate this jungle of knowledge. Promised but not actually delivered, the last time I checked. For instance, the Safari Bookshelf contains a book called Mastering Regular Expressions, which is entirely about UNIX regular expressions. But a search for 'regular expressions' turns up a list of 793 books, none of the first twenty-two of which are actually books about regular expressions. In fact, Mastering Regular Expressions, 2nd Edition (by Jeffrey Friedl) comes in as 25th, with a reported relevancy of only two-out-of-three. The number one book according to their search engine is a book about ColdFusion MX, simply because that book has two chapters about regular expressions. How this beats back an entire book about regular expressions, I don't know. But among the many people who either tested, coded, designed, or commissioned the search engine feature, someone should know. And that person should actually try using the damned thing to find useful results. Such a waste of good content.
Foul Rating: High.
Oh despised JavaScript, what a place in Hell I have for thee. Bastard language without standards; ruiner of inter-platform compatibility; tool of the evil worm-writers; killer of reliable website functionality. JavaScript should have been banned by the United Nations before it was allowed to get this far. Used carefully and sparingly, and tested on several versions of several different browsers, you might just get away with it. Tested briefly on IE6 alone, and used for every graphic, every link, and every form on the entire site, and you're guaranteed to create a monster. Your site will look like it's been built by a lazy twelve-year-old. Actually, that's unfair: even a twelve-year-old should know not to mess with JavaScript.
Foul Rating: High.
Several companies have done this to me recently [in 2004], including Adobe. I wanted to buy Photoshop Elements 2.0, so I went to adobe.com to find out how much the product was. Good news, the product offers a download upgrade price for owners of Photoshop Limited Edition. With the exchange rate the way it is, it was going to be a cheap ugrade. But then I see the message that the adobe.com shop is only for users from the United States and Canada, and I should go to adobe.co.uk. Which I did, and discovered that to download the very same product there was no upgrade path at all and, with it costing more in the UK anyway, it was going to cost me twice as much for the exact same download. So I didn't buy Adobe Photoshop Elements 2.0 — I bought Jasc's Paint Shop Pro 8 from their US online shop, even though it didn't receive as glowing a review as the Adobe counterpart. At least they value their European customers enough to give them the same price. A download is a download, and a payment is a payment. It shouldn't matter where the customer is.
[Adobe have, now Photoshop Elements 4.0 is being sold, reconciled the price difference. But their webstore is still broken in Mozilla Firefox.]
Foul Rating: High.
At the time of writing, the contents page at Workstation UK features a clutch of brightly coloured strands that float about in the lower-left of the browser window. Each strand has a variable number of segments. Each segment is a link to somewhere. But each segment is unlabelled, so you have to hover over it (if you can catch it while it's moving) to make a tiny label appear. If you hang around long enough to actually click a link, you are taken to a vacuous Flash animation that features expensive photography and trendy vibes. There is no non-Flash version of the site.
Sites like this are utterly worthless. They have no place on the web. They are usually produced by media or fashion houses that believe that style is more important than function. They provide no information, and they offer no reason to visit the site at all. Providing visitors with an experience like this is a great way of telling them to go elsewhere.
[December 2005: the Workstation UK site has been improved greatly from a navigation point of view, but is still light on substance.]
Foul rating: Low.
Even on the websites belonging to billion-pound companies, it's possible to see this mistake made. When an HTML document is created in an editor that is set to one character encoding, but is served from a web server that is declaring the document to be a different character encoding, the page will appear incorrectly in a visitor's web browser. If your page is inexplicably full of question marks of empty box characters, then you've probably mixed up your character encodings.
The best plan is to decide on a single character encoding for your site, and stick with it. If you do need another character encoding for a specific page, make sure to configure the page and your server so that the different character encoding is correctly communicated to your visitors' browsers when that page is requested.
September 2010: take a look at Web Design Crimes 2010, which lists website fouls you're more likely to encounter in the new decade of shoddy websites.