Ten Tips for New Web Page Designers
After teaching HTML at the local community college for a few semesters, I have learned to anticipate the mistakes new web page creators make. Here are ten tips to help you avoid falling into the newbie sinkhole of ugly, irritating ignorance.
1. Never leave anyone alone with only the back button for company.
Taking some poor innocent user to one of your web pages and leaving him or her stuck there with no way out except the back button is as bad as stranding someone in the Sahara with nothing but a bag of salty pretzels. Why would anyone want to go back to a page they have already seen? They want to move on to new content, not read the same old stuff again. Nothing but a “Back to Home Page” link is just as bad. Imagine going to the mall and being forced to go back to the main entrance each time you wanted to look in a different store. You might do it once, you might even do it twice, but before long you'd be on the road again looking for a friendlier place to shop.
2. Backgrounds need to be unnoticeable.
A background that is anything more than a soft and soothing sheet upon to lay your tender page will overwhelm the page and make it so hard to read that, guess what? No one will read it.
3. Stamp out long lists of links in huge bold fonts.
Who wants to scroll through fifteen feet of over-large links (preceded by exclamations of Click Here!) when the same information could fit into a neat three inch long table? Where do all those links go in the first place? If they lead away from your site, you are drop kicking people out the back door as soon as they come in the front door. If you must link to places outside your site, do it deep into your site so viewers will have had a good look at your content first.
4. Blinking text, scrolling tickertapes and endlessly looping animated gifs are irritating to the eyes.
Would you read a book if it constantly flashed and blinked in your eyes? No? Well, people won't read your web page if it does that either. Yeah, it's flashy, but does it have anything to do with your message and your content?. Okay, sometimes the animated gifs are cute–for about three seconds–but do they add meaning or significance to what you're saying? Those animated “under construction” signs are merely advertising your inexperienced web newbieness. The entire web is under construction, changes are constant and immediate. People expect change and don't need to be reminded that pages may change. If you have to apologize and make excuses for your site by saying it's still under construction, then you shouldn't be putting it up yet anyway.
You can trust me on this one: any person who can afford a computer and work it well enough to surf the web already knows what day it is and can probably come pretty close to guessing the time. Even Winnie the Pooh knows when it's getting to be a little eleven o'clockish. And who cares whether they are visitor thirty-seven or visitor thirty-seven thousand?
6. Create a sense of place.
You can create a sense of place with something as simple as a banner that you repeat on every page, or a color scheme, or a distinct "look" viewers can expect on every page. As long as viewers are in your space they should feel that consistency of appearance that tells them where they are. Make all your colors match–pick one color set and stick with it. Put your navigation buttons or links in the same place on every page. Use the same one or two easy to read fonts on every page.
7. Use your friends as guinea pigs.
Ask friends who have never seen your site to look at it. This is not a guided tour–give them the mouse and keyboard–you move away and just observe. Listen to the questions they ask. They ask those questions because you have been unclear in your presentation. Notice when and where they get lost, start blindly searching or start repeating themselves with pages they've already seen. Those are places where you need to improve your navigation.
8. Learn to be an image buster.
- There are free or inexpensive graphics programs you can get from www.shareware.com or www.download.com. Learn to use them well enough to reduce the file size of your images. Large image files take a long time to download. If you have gone to sites that offer free buttons, bullets, bars and backgrounds you need to do some work on the images. Often such sites offer large navigation buttons which take up more space on the page than your content. Reduce those buttons to a smaller size. Your pages will download faster and be more accessible to all users if you are dedicated to including these three essentials for every image tag you use: the image source, the image size in width and height, and an alt text description of what the image is.
- The image resolution for Web display should not be more than 72 dpi. Any more than this merely adds download time. Make the image the size you want in your graphics software, not by adjusting the HTML, especially if you use the HTML to make it smaller. You are still downloading a large image when you change the size with the HTML. Do your users a favor and let them download the smallest possible image.
9. Give every page the minimum nutrients for proper growth.
- Every page needs a descriptive title. (This is not the same thing as the name you give the file when you save it.) The title should give the name of the site and the page contents something like this: Virginia DeBolt: Ten Tips for New Web Page Designers.
- Every page needs headings and information at the top of the page that explain what the page is all about.
- Titles, headings, and top of page content are used by the search engines to index your pages. If you want to be found by someone who might search on your topic use all three. I don't know if this approach will work if you are waiting for Prince Charming (or Princess Charming) to find you, but it works for web surfers.
10. Get organized from the very first moment.
- Put all the files for your web site in the same folder. Save your opening page in this main folder. Call it index.html or index.htm or default.htm. Don't save your opening page by any name other than one of those three. If you do, users will be able to get into your directory structure and open everything you have on your site. You may have things on your site you don't want anyone to know about–I often create "hidden" pages on my website that only one or two people know are there. It is a convenient way to share project drafts with co-workers in distant locations. Since the first and only file "loose" in my main site folder is called index.html, no one will find these hidden pages unless I give them the exact filename and address.
- Create subfolders within the main site folder for everything else in your web–image folders and various subtopic folders. Once you have saved a file into a subfolder, leave it there. If you move things around your links will break.
- When you upload your site to the server, recreate the exact same folder and subfolder structure on the server. The server will have a name for your directory, probably www or html or some such. This corresponds to your main site folder. Put your index.html and any subfolders into this directory. If the site organization on the server is in any way different from the way you have it on your own computer, it won't work.
And now, a free bonus tip just because I want you to get more than you expected or asked for. A Freebie Newbie Goodie! If you want everything to work properly when you get it on the server, which isn't nearly so forgiving as your local computer's hard drive, remember this one crucial tip. When you save your files use NO spaces in the filenames.