Principles of good web design

Or, how not to make me hate you

One of the wonderful things about HTML that its simplicity allows almost anyone to build their own web pages and put their thoughts, ideas, and information on the web. One of the worst things about HTML that its simplicity allows almost anyone to build their own web pages. It seems almost too simple: look at some well-designed books, magazines, websites, etc., and use them as a model. Unfortunately, a huge number of people don't seem to pick up on what makes a publication look good and, instead, build a terrible looking or functioning site. Many books about building websites that I've reviewed concentrate on coding a page instead of making it look good and, to make things worse, any idiot with a WYSIWYG editor can point and click his way to an absolutely atrocious site. (Microsoft FrontPage users seem particularly clueless in this respect; FrontPage is to web design as AOL is to the world.) I've rambled on about this in various parts of the site before, but it seems that it may take a whole page with all my tips in one spot to nudge even the biggest Bobo a little closer to the light. I've divided it up into handy, bulleted sections for those whose brains have been exposed to FrontPage and may not be able to handle full paragraphs any more.

What not to do

This is your brain. This is your brain on FrontPage. Any questions? But seriously, I have seen each one of these mistakes more than once. These things are too stupid to make up. I've also decided against buying products or recommending a site to someone else based on one or more of these annoyances. I won't send you an email if your page is no good, I'll just simply close the browser window with the same disdain as if it were a pop-up ad. In fact, studies show that only .007% of visitors to your site will send you an email complaining about your lack of taste and/or skill. The rest, like me, will simply go away and never come back. Therefore, it's up to you to detect problems and fix them on your own--chances are no one else is going to point them out to you. [Note: However, if you tell me what my screen resolution is currently set at, I will be kind enough to send you a nice little email telling you to start researching partnerless reproduction--though not in those exact words.]

• Don't embed music.
  Don't ever make me listen to music without clicking on it first. You may think that MIDI by the Screaming Monkey Eaters is so good that everyone in the world would go nuts about it, but I prefer Beethoven, and I'm probably listening to it on the computer while I'm surfing. And, even when I hear Beethoven on a webpage (and I have), it still irritates me. A collision of new and old music isn't a thing of beauty. If you simply can't resist putting it on, at least give me a control on the page to allow me to turn it off. And, if you're technically sophisticated enough to use an embed tag but not smart enough to add a control (read: you used FrontPage to plug it in), at the very least don't set it to loop infinitely. And yes, I know, I can disable sounds in the browser's preferences. That misses the point. I shouldn't have to do any work when I'm at your site. That includes, first and foremost, tinkering with my computer to get your page to work right, look right, or sound right. That's your job. And, just because I know how to do it doesn't mean everyone else does. If there are people stupid enough to use FrontPage, there are people stupid enough not to know how to change their browser settings.
• Don't use Flash gratuitously.
  Flash makes great movies and games, but terrible websites. Flash was designed to make great movies and games. HTML was designed to make great websites.
• Don't bother with a splash page.
  Do you think your logo is so cool I want to see it fill the entire screen before I get to see it on every single page in your site? Well, I don't. I don't want to see your logo dance in Flash, either.
• Don't tell me to use Internet Exploiter or Netscrape in whatever resolution I'm probably not using at the time.
  I use Opera. If Microsoft hadn't slipped something into the world's water supply a few years back, everyone probably would use Opera, too. If your page conforms to valid HTML as specified by the W3C, it will display correctly in any browser. With a little effort and a style sheet, your page can look the same at any reasonable resolution. And don't query my machine to get its settings. Ever. Really. I mean it. I don't peek in your windows just to see how your living room is laid out and then call you up and tell you your couch is ugly. Just because Microsoft does it doesn't mean you should. In fact, because Microsoft does it probably means you shouldn't.
• Don't disable right-click functionality.
  Sure, you can do it with a small JavaScript and not let me right-click in IE or Netscape. Usually this is done by people who want to protect their pointless ramblings or jokes they ripped from other sites. Unfortunately, it also disables the "Open in new window" option, which I use almost all the time. It's a pointless exercise, though, because if I want to steal your content, I can either select and press Ctrl-C for text, open your webpage in GetRight for images or files, or--the simplest way--just use Opera, as it doesn't allow you to hijack my mouse. Incidentally, I don't copy content when I'm asked not to--I respect authorship rights. However, the whole foundation of the Web is openness. Don't want to share it? Don't post it.
• JavaScript has its uses, but so does the atomic bomb.
  Do I really need your wisdom scrolling through the bottom of my screen? Do you really need an applet to do something that HTML already does, and probably better?
• Don't make me drill through your site to get what I want.
  One of the things I hate about splash screens--beside the increase in page load time--is that I have to click on something for no good reason. Don't bury things under layers upon layers of useless waypoints. If I can't get to it in two clicks, it's not that important to me. My time is no less valuable than yours.
• Don't use illegible fonts, color combinations, or backgrounds that are impossible to read over.
  Perhaps the dumbest thing I've ever seen is yellow text on a white background. I actually had to highlight it with my mouse in order to read it, and I've got 20/10 vision--what if I were color blind? Using colors like red, for example, are usually a bad idea, too. Would you want to curl up with a novel that had red pages? Then why would you expect me to struggle for longer than, say, five seconds to read about your pet goldfish?
• Don't use DHTML, FrontPage extensions, browser-specific tags, etc.
  I have seen precisely zero effects that impress me with any of these worse-than-useless things. And the <BLINK> tag is like a reverse IQ test: if you use it, you automatically score zero. Surrender to Netscape! is a parody of Netscape tags gone wild.

What you should do

• Look at your page before you upload it.
  And don't just look at it in IE at 800x600. This site has been tested in 800x600, 1024x768, and 1280x1024 resolutions in Internet Explorer, Netscape Navigator, Opera, Mozilla, Amaya, and Lynx. It works and looks identical in almost all cases, because it uses a style sheet. That image that fits perfectly at 800x600 may repeat and look pretty ugly at 1280x1024.
• Use a style sheet.
  There are two reasons to use a style sheet: me and you. The ability to use relative positioning will make your site look the same at my 1280x1024 resolution as it did when you designed it in 800x600, and vice versa. You get the added benefits of having a consistent look and feel to your site and, if you want to change it all at once, you can do it by simply changing the style sheet. The W3C has a few more reasons you should use style sheets.
• Give me access to your entire site on every page.
  There is nothing (besides some sidebar-like things) on this site that you can't get to with two clicks or less.
• Validate your HTML.
  Most browsers can tolerate sloppy code, but this doesn't mean you should write it. (And, yes, WYSIWYG editors write sloppy code, too--sometimes even worse than if you'd coded it yourself. This is especially true of tables.) If you can earn the little icon on the bottom of this page, your page is almost certain to work in just about anything.
• Get rid of .gif's; use .png's instead.
  Sometimes people do incomprehensibly stupid things for no apparent, logical reason. Intel decided to add a unique processor identification number to the Pentium III, Hitler invaded Russia in the dead of winter, and Unisys decided to try to make money off its patent on the compression algorithm used to create .gif images after it had become a de facto standard. This is stupid for several reasons, but perhaps the biggest one is that .gif is not irreplaceable--in fact, it's not even that good. The Portable Network Graphics format is free, just as functional, and compresses images slightly more than .gif. People will not pay for something when there's an alternative that is just as good--or better, in this case. The W3C recommends .png as a Web standard, the Defense Department requires it on their sites, and, even if they didn't, you shouldn't encourage greedy behavior like that of Unisys. A great application for converting your images is the webgod Eric Raymond's tiny--and free--application gif2png. It makes smaller .png's than any other application I've tried. And if AOL's brain-dead browser supports them, you can bet that they work in almost any browser. For a complete list of browsers that support them, click here.
• Interlace your images.
  Interlaced images display bit by bit as they load. If you've got a slow connection, head on over to my graphics intensive Astronomy in Flight Simulator page and watch the images as they load. Interlacing gives me something to watch while your one Megabyte baby picture loads. IrfanView and GIMP are free and can create interlaced images. I used GIMP to create the spiffy modified FrontPage logo at the bottom of this page. (I found the original image at an AOL user's site--which, not surprisingly, didn't work entirely correctly. AOL and FrontPage go together like Thalidomide and birth defects.)
• Check your links.
  Few things are as useless as a page full of dead links. Link rot is as annoying as it is easy to prevent. Simply use Xenu to check your links every month or so. It will report which ones are dead, which ones have moved, and which ones miraculously still work after four years.