Miso Soup for the Otaku SoulSummer Adventures: Summer jobs and getaways for teens and college studentsYoung and Broke: Student JobsJapan

Web Design Dos


...remember that Web surfers are lazy.

Lazy lazy lazy. Lazy as logs. Lazy as bumps on logs. Lazy as frogs on bumps on logs. Surfers are used to a continual stream of stimulation poured directly through their glazed eyes and into their pr0n-addled brains. Anything that interrupts that stream is an irritation. Too many clicks to get through the navigation system to the page they want? It's frustrating; time to move on. Too long a wait until the page finishes loading? Hell with it, maybe the next page is faster. Got to fiddle with the resolution so they can see the whole page? Forget that, let's go find some more Photoshopped Orlando Bloom pictures. There are hundreds or thousands of web pages on exactly the same topic, so why suffer through one poorly-designed page when some other page has the exact same thing?

Therefore, when you're designing your page, take out anything that means extra work for the viewer. No Javascript popups asking for their name. No high-contrast multicolored backgrounds that strain their eyes. No huge images that force them to wait. No multilayered navigation systems that take more than a couple of clicks to get to the page they want. Mollycoddle your readers. Spoon-feed them. They'll thank you for it.

Sounds stupid? Watch your own surfing habits someday.

...proofread and spellcheck all of your pages before you post them.

Poorly-written text is hard to read. It doesn't matter that the reader "knows what you mean." The important thing is that the reader had to stop to figure out what you mean, and that pause interrupts the flow of the sentence and distracts the reader from what you really want her to pay attention to: your meaning.

Even more importantly, poorly-written text makes you look stupid. Every typo, every misspelling, and every grammatical error drops your IQ a few points in the reader's estimation.

...write solid, clean HTML.

That means keeping all your tags nested properly and closing everything you open. Sure, your table will still work if you write <table><tr><td><td><tr><td><td></table>. ...At least, it'll work for now, on your own browser. Will it work for other browsers? Will it continue to work in the future as browsers upgrade and change their sensitivity to bad HTML? Are you willing to risk finding out? Keep everything clean, and you won't have to worry about it.

...read your pages repeatedly in a browser to pick up messy code.

It's disconcerting to read a sentence like, "She cracked her whip, reveling in the satisfying sound which echoed through the dungeon.</pThe tip fell across Pikachu's back, leaving a faint pink line and making him shiver." Well, actually, it's disconcerting on several levels. But that </p in the middle is the easiest part to fix.

...set the height and width of all your images.

If the browser knows how large your images are, it'll leave a blank space for them and put the page's text up on the screen, then download the images. The reader has something to look at while your images load. If you don't specify size for your images, the browser stops everything while it downloads your 50K page header, and the reader is left staring at an empty screen and hoping that your page justifies a long, boring wait. Never make your readers wait. It makes them cranky. And a cranky reader is a hard-to-please reader.

...make certain that your text doesn't cover part of a background image.

If your background image includes a band of decoration along one edge, make certain that your text doesn't cover the decoration. Not only does it look messy, it also makes the text hard to read. To avoid covering the decoration, set the text in a two-column table which covers the whole page, and set the column which covers the decoration to at least the width of the decoration. Place the rest of the page content in the other cell. (Specify the width of the column over the decoration in pixels, not as a percentage! If you set the column width as a percentage, the column will shrink too much if the viewer shrinks the browser window, and the page text will overlap the decoration.)

...kill all popups.

They're painfully annoying. If you can keep the image/story/link on the same screen, do so. Readers don't mind using the back button to get back to your original page.

< Back to Life Skills  |  On to Web Design Don'ts >

Miso Soup for the Otaku SoulSummer Adventures: Summer jobs and getaways for teens and college studentsYoung and Broke: Student JobsJapan