By Al Fasoldt
Copyright © 1997, Al Fasoldt
Copyright © 1997, The Syracuse Newspapers
Last week I mentioned my five basic tricks of Web-page design. Let's see why they're important.
Never use images when text will do the same basic thing.
The problem with images isn't just that they take time to load. It's that most Web-page designers don't know how to use them. Most Web pages use images as if they were pictures—which would be fine if we all had very-high-speed access to the Net. Since most of us don't, images need to be used as eye-catchers first, pictures second.
So how do you do that? It's simple. If your image is merely a headline or a banner, skip the image and use a line of text instead. (Look at the banner on top of nearly every page at my Web site to see what I am talking about.) Your pages will load much faster, and many visitors who have glacially slow connections—AOL members, for example—will actually stay long enough to view your pages. (If the first item on the page doesn't load fast enough, most Web surfers will cancel the page.)
But you should use images intelligently when text just won't do. Each of my Web pages has a tiny GIF image that creates a gray 3D rule. Sometimes I stretch that GIF (using HTML code that tells the browser what size to make an image, regardless of the image's real size) so that it appears much larger than it is. And this means, of course, that it loads faster than an image of that apparent size.
Sometimes I compress the rule's image, to make it smaller. Why do that? To provide a theme—same image, same look, smaller view—for subsidiary pages that ties them visually to main pages. The big benefit of doing this kind of stretching and squeezing of the same image is that the image is pulled across the Internet only once, the first time a browser opens the main page. Every access from then on occurs in the browser's cache, without any delay. (A tip: Make sure your browser is set up to cache images properly.)
Always use a splash of color at a specific and repeated spot on your pages, to help give them a unified look.
You don't need to use color on Web pages. You could make them all drab and dull. You could also forgo your color TV and find an old black-and-white model, too. But who would want to? Color gives life to every page, and you don't need to use color images to get color. You can create colored headlines, rules, boxes and tables, to give you just a few examples.
But a riot of color just fuzzes up the page. Use it sparingly most of the time. Look at how I use color on my Web pages, and you'll see how I combine both approaches—a lot of color in a small area, at the same place on nearly every page, and a subtle amount of color in another repeated location. The subtle color area isn't obvious, so I'll give you a clue: Color doesn't have to be reds and greens and blues; it can be shades of gray.
Never print normal text in any color. Use black-and-white only (or leave out any color tags entirely for normal body text.)
The problem here is two-fold. First, you have no control over the background color that some users choose for their browser, so any body text that is colored could look much different to visitors than it does to you. Second, color should be used (and is always used, in standard HTML coding) for emphasis, for something that needs to catch the eye. Body should be neutral.
Always place a menu at the same spot in all your pages, so that visitors know how to get from one of your pages to another.
You'd have a hard time reading the newspaper I help produce if we put the big stories of the day on Page One some days and on another page (at random, maybe) on other days, or if we buried the index that normally runs on Page One in some inscrutable location. Likewise, anyone who visits your Web site will have difficulty navigating unless you provide links that take the visitor from one main page to another. These links can be displayed any way you like, as long as they are consistent within themselves (so that "Home Page" always refers to the same location, for example) and as long as they are consistent with your page design, appearing at the same location on every page.
Always place something at the bottom of each Web page so that visitors know when they've reached the bottom of the page.
This is one of the biggest flubs beginners make. You may think that no one could mistake the bottom of a page for the, um, bottom of a page, but Web surfers hit the Cancel button a lot, and once you've canceled the loading of a Web page (to skip a big image, maybe), you often have all the text already—but you won't know if you actually do have all of it unless there's a line of text at the bottom of each page that tells you just that.
I'm not suggesting you put a line that says "Bottom of page" at the bottom. What works perfectly is a single line that provides a hypertext link to your e-mail address or to the webmaster's e-mail address.
You can see all these tips in action at my Web site, http://www.dreamscape.com/afasoldt/.