Web Design Rant

I despise bad design and functionality on websites. There's no excuse for it.

Amazing Revelation Number One: not everybody uses Windows XP SP2 with Internet Explorer 6, Flash, all cookies automatically accepted, a maximized window on a 1024x768 32-bit screen, and perfect eyesight. Get it? If your site does not render correctly in browsers other than IE, you have lost a significant percentage of your users. Everybody who uses Mozilla FireFox is alienated. Everybody who uses Linux is alienated. "Resize your browser to..." SHUT UP. "Best viewed with..." NO. Ever heard of XHTML? Ever heard of standardised markup? Try obeying the standards. Many people out there are colour-blind to a certain extent. That means your site should look good in greyscale. Don't use Flash, either.


Oh, MAN. Flash is a rant in its own right. Flash is good for one thing: looking cool. AND NOTHING ELSE. Let's go through the list. Number one, takes a significant amount of time to load. This is the internet. Information on demand, as fast as the modem can manage, instantaneous responses. Every second a user sits waiting for your site to load, he is getting more bored and more likely to hit Back. Number two: by definition, the interface on any Flash site is non-standard. It doesn't matter how user-friendly it is, it's different from the norm and that makes it harder to figure out how to get the information you want. And that causes frustration. Number three: not every computer runs like the wind. Equals low framerates. More alienated users. And even with all your animations running at their smoothest, that menu is still taking time to open. Hint: I didn't click that menu to see a pretty animation, I clicked it to choose something from the menu. Number four: useless for presenting information. Suppose there's a page of text you want to show. In any normal browser there're about six ways to scroll through that text: arrow keys, Page Up/Down keys, mouse wheel, dragging the scroll bar, clicking part of the scroll bar, clicking the scroll arrows. In Flash you'll probably get one - usually just a pair of scroll arrows, which works by mouseovering it instead of clicking it. And scrolls at constant, slow rate. That's typical of a Flash interface. And it sucks. Flash has its uses, presenting content isn't one of them. Use HTML. HTML is powerful and EFFICIENT. Number five. NOT EVERYBODY HAS FLASH. Many of those who don't, don't want it.

Things which move

Basically, nothing should move on your web page. Animated GIFs are what I'm talking about here. Blinking menu buttons. Perpetually cycling animations of people hitting each other with hammers and stuff. These distract the eye from the proper content of the page, and concentrating on the static text with something waggling away up there in your peripheral vision quickly turns from difficult through frustrating to infuriating. Then you've lost a user. Blinking text falls under this category also, though these days most people have the sense to avoid that tag. Scrolling marquees are also bad but have their own special brand of badness also: they typically contain text, that is to say content. So if the user is trying to read the marquee, either the text will scroll too quickly to read or too slowly to pay attention to... and then they have to wait until the end to re-read a part they missed. Marquees do have non-evil applications, but they are limited.


There isn't yet a word to describe the subtle nuances of the sense of frustration one experiences at being unable to navigate a site properly; at knowing for a fact that the content you want is there on the site, but being unable to find it because there are no links on the page you're currently looking at which take you to it, or even any closer to it, or to a search page. On every page of your site you should have information depicting exactly where within the site the user has found himself. This is firstly so that an incoming user can orient himself quickly, and secondly so that browsing users don't get lost. This should include a link to the homepage.

Worse than being unable to find the information is finding the page which SHOULD have the info on, and it not being there. Nowhere on your site should there be a page with no content on it except an "under construction" message. If the page isn't done yet, don't put it up! Stop wasting people's time claiming to have content you don't yet. And for you business websites: nor should there be nothing but promotional blurb. Your web site is not just another form of advertising. The user is already there. Cut the marketing guff and tell them what they need to know: what you do, what you charge for doing it, how to contact you. Include an email address. For Bob's sake, include an email address. This is the internet. A website without an email address is like a house without a letterbox. Worse still than not answering their questions is answering the wrong questions. Like going to the FAQ and instead of answering frequently asked questions, it answers questions that the writer WISHES people would ask... like "How do you keep your prices so low?" Once again: your website is not an advertisement, it is a place of business.

Links within text should obey certain conventions. One. Links should be a different colour from the surrounding text, with the link changing colour if you've visited it. Blue and purple used to be the traditional default for these; these days you can get away with changing them if you want. Two. Links are always underlined, and underlined things are always links. Don't use underlining for emphasis elsewhere in your document; don't have links without underlines. This is a standardised visual cue in the web jungle. You shouldn't have to mouseover a piece of text to see if it's a link or not; if you do, then there will be people who will miss that link. Underlining = link.

DON'T BREAK THE "BACK" BUTTON. DON'T DISABLE THE RIGHT MOUSE BUTTON. I'm sure you all know exactly what I'm talking about.

Site behaviour

Links should not open in new browser windows. If I want a link opened in a new browser window, I'll do it myself. Some people use browsers which use tabbed browsing; what if they want to keep all their tabs in one window? You just broke that. Also, NO POP-UPS. EVER. Many browsers block pop-ups automatically these days. Also, pop-ups look like ads. You should never have anything resembling an ad on your site if you can possibly help it.

Frames are BAAAAAAD. Inline frames (iframes) have their uses, but big ones which divide the screen into chunks just absorb screen real estate like there's no tomorrow. And they end up the wrong size - this will ALWAYS happen sooner or later, it doesn't matter what you do - so there are scroll bars when you didn't want any. And if you turn off scroll bars? Then the user can't see all the information. Great. Don't think using fixed font sizes and fixed layouts will prevent this from happening. Fixed layouts are also to be avoided - don't go for pixels, go for percentages. Your site might look seriously snappy in that eight-point font, but partially sighted people or folks using huge screens with high resolutions won't be able to read it. If they can't resize the font to their satisfaction, you lost their attention, dig? Besides which, if they're using Firefox or certain other browsers, they CAN resize the font, even if you try to fix it steady. Moral: your layouts should flow at all text and screen sizes.

No site should require horizontal scrolling. Most mice these days have a scroll wheel. Vertical scrolling is fine. Also, English text tends to read left to right and then down - so you essentially have a potentially infinitely long page to read, easy. But very few mice have trackballs which enable four-directional scrolling. And if a paragraph of text stretches that wide, you've gotta scroll right, read to the end of the line, then scroll back left to start the next line. That's no good.

Flag links to .pdf files. The number of links I wouldn't click if I knew they'd launch that bloated piece of junk Adobe calls a document reader.


There's only one real commandment here, and that is: have SOME sense of style. Have the intelligence to recognize an appalling, eye-gouging colour scheme. Bright green on a bright blue background is an example of something you should avoid. Garish, highly patterned backgrounds are also to be avoided. Another point about backgrounds: don't use some 800x600 panoramic vista. Or a 1024x768 panoramic vista. Or a patterned sidebar which is 1200 pixels wide. You know why? MONITOR SIZES VARY. I browse at 1280x1024. Many people browse at 1600x1200, or even higher! The number of sites I go to and find that the background image was too small, so it tiled automatically. The designer hoped that no window would be so big as to notice that the background was tiled, but mine was. That means that you get the nice patterned sidebar, and then in some random position towards the right of your screen, you get ANOTHER patterned sidebar sitting there in the middle of space, looking foolish. Typically, the text on the page ends up overlapping it too, making it unreadable. See the Amazing Revelation at the top. Not every browser is the same. If your backdrop won't tile in both directions, you need a new one. Or else to fix it so it doesn't tile at all.

Graphics in small quantities aren't necessarily bad, they can make a nice site look really great. I don't use much in the way of graphics on my site because you can't change graphics as easily as you can change stylesheets, and I change my stylesheets - and indeed the basic structure of the site - all the time, so it'd be futile, but that is a personal choice. Less fickle individuals could probably stand to use graphics to good effect. However, bear some things in mind. Number one: there ARE people out there still using 56kbps dial-up modems, or worse. Graphics take infinitely longer to load than text. The heavier your site, the more users you've lost to impatience. Text is by comparison clean and efficient. So avoid bloat. Number two: if you use graphics for menu options then they aren't resizable; which means sooner or later somebody is going to find them difficult to see, and not be able to resize them bigger. Number three: some people use text-based browsers. Make sure the alternate text for each image tells those users what it is they can't see.

DON'T USE JAVASCRIPT. Okay, that, like much in this document, is a huge generalisation to which there are obvious exceptions. JavaScript has immense practical use for all kinds of purposes. What I mean to say is, use JavaScript responsibly and practically. Don't have a nice menu which smoothly follows your window as you scroll, because that means users end up waiting for it to catch up; and on slower computers, it won't follow your window smoothly by any means. Don't change the cursor to some flashy star with sparkles which follow it. See the section on Things Which Move, above. Don't change the text in the information bar at the bottom of the browser. That means users can't see where the links go. As a general rule, don't use JavaScript for the sake of using JavaScript. The tricks you can do with it look cool to start with but get tiresome. Use it only when you have to.

And finally

Just a few things which don't really go elsewhere. Hit counters are basically pointless things to show prominently; as they can be reset to any value, they don't mean anything to the average user, more so since they show only one value, not the rate of increase or anything genuinely useful. They are only useful for YOU to monitor your site usage. Tuck 'em away, out of sight if possible.

BEWARE, be very much wary, when copying and pasting text from a Microsoft Word document into a web page's HTML. Microsoft Word and other products from MS do fun, helpful, non-transferable things like "smart quotes" and long hyphens and superscript twos which make the document look nicer. Your average web browser doesn't. So instead of proper speech marks and apostrophes, you end up with question marks in their place. Here?s an example. Looks stupid, doesn?t it? To prevent this the best way is to go into the Autocorrect settings and turn off all those automatic "corrections". This will still leave you with a document full of non-smart quotes, though; you can fix this by doing a quick find/replace, replacing each quote mark with a quote mark: this will replace each smart quote mark with a non-smart one. There are many other nonstandard MS characters which can't be dealt with so simply: the best way I know of to find them is to run your web page through a markup validator of some kind. I use this one. It'll probably pick up on a whole lot of other errors you missed, too. I try to make all my pages compliant with XHTML 1.0 Strict according to that validator.

The last and most criminal mistake in designing a website is NOT HAVING ANY CONTENT. If you have nothing to put online, DON'T MAKE A SITE.

External links