The whole object of getting on the web is to get noticed. Of course, you want good notices, not bad notices. One way to assure yourself of bad notices is to have poorly designed web pages. And believe me, bad pages will get you noticed, most likely by people like a certain Mr. Mirsky, who runs a website called “Worst of the Web.” Put up exceptionally poorly designed web pages (or bizarre content), and you could have the “good” fortune to receive a review at his site, which is a dubious honor at best (unless, of course, you’re trying to have a bad website – that’s another story…).
THE RULES OF GOOD WEB PAGE DESIGN
Rule #1: Make it readable!
It’s better to have a plain black and white web page with no graphics whatsoever but with highly readable text, than it is to have a jazzed up page with an intricate Netscape background and purple and green text. You’re putting information up for people to read. Make sure they can actually read it!
If you’re writing your web pages for Netscape browsers, you have the option of using background colors and images. My suggestion is to stick with solid colored backgrounds, preferably light pastel colored backgrounds (white to mint green) with black text.
An exception to the above rule is when you will be displaying a number of images on a page, such as an “art gallery.” In this case, a dark background will enhance your images. However, be sure to limit the amount of text on a dark background, as it is much harder on the eye.
However, if you must have a background image, you’ll have the best readability if you stick with a light embossed grey-on-grey graphic, rather than the wildly multicolored graphics I’ve seen at many websites. In general, though, any background images will decrease the readability of the text on the page.
Text values should be the opposite of the background. If the background is light, the text should be dark. If the background is dark, the text should be light. Enough said.
Rule #2: Break up your pages into chunks!
I can’t tell you how many websites I’ve been to that have this problem: it’s one page of text that goes on, and on, and on, and on… scrolling ad infinitum. This is a BIG no-no!
A lot of this falls back to readability. As a rule, I wouldn’t go much beyond two screens of information per page, unless the extra information is strictly on the main topic of the page. For instance, a page of links to other web pages can extend much, much farther than a page full of book reviews. I would put each book review on its own page.
This, of course, necessitates some sort of navigation links on each page. However, your readers will appreciate the extra work you put into splitting your pages into bite-sized chunks, rather than one endless tome. If you don’t agree with this philosophy, look at it this way: which would you rather have to read, a document printed on a twenty foot long 8″ wide single sheet of paper, or printed on twenty regular sized pages, broken up into sections?
Rule #3: Don’t overuse horizontal rules!
One of HTML’s built-in features is the horizontal rule. This puts a horizontal line on the page whenever it is invoked. And it’s so simple to invoke: just put
-==-
in your HTML code, and you have a horizontal rule. I wish it wasn’t so simple.
The other evening, I was speeding through web pages, and I came across one that had some information I needed. Unfortunately, the author put a horizontal rule between every single paragraph! I don’t know if they thought they had some sort of slick design thing going on, but besides being ugly, it made finding the particular information I wanted into a real task. Imagine this report with a horizontal line between every paragraph! Better yet, how about if I do it for awhile, to give you a taste!
Notice how the horizontal line actually makes the paragraphs seem closer together than plain white space does? That’s the problem. Even if you allow extra white space for the horizontal rule, it will appear to pull your paragraphs together, rather than separate them.
If you must use a horizontal rule, make sure it’s there for a reason. Don’t just use them to separate paragraphs, use them to show a change of context. In other words, in this report, a horizontal line would fit just fine in the space between the end of one of these design rules, and the beginning of the next. An applicable web page example would be to use a horizontal rule between the end of your text and your navigation or credits sections.
An even better design option than the horizontal rule, though slightly more work, would be to use a small, unobtrusive graphic to denote a change of context on your page. This doesn’t mean one of the “cutesy” versions of the horizontal rule which you’ll see all over the web (a mouse with a long horizontal squiggly tail, a wavy ocean, etc.).
The best option, though, is to remove those excess horizontal rules from your web page, and replace it with white space.
Rule #4: Be careful with your images!
When designing your web pages, you need to keep in mind that people will not be reading them locally (as if they were saved on their own computer). Rather, they will be down loading it, sometimes over slow modems. This means they’ll have to wait for every image to download. This can take a long time.
How to get around this problem? Two ways. First, you should limit the number of images on a single page. Second, the images you do have on your page should be made as small as possible, both in physical size and file size. I’ll address these separately.
The first solution should be fairly easy to deal with. Just don’t load up your page with graphics upon graphics upon graphics. I’ve actually had more problems with websites from large corporations being graphically loaded than websites from small businesses and individuals. In my opinion, that’s because small businesses and individuals are more likely to be made up of decision makers who are actually on the Internet.
The decision makers at large corporations just think they should be on the Internet, and they delegate setting up the website to the same designers who design their print materials. Print and web design are two different animals!
Anyway, for every image you put on the page, decide if it’s vital to the topic of the page, or if it’s just there to look good. Eliminate unnecessary images, as they only serve to slow down the loading of your web pages.
As for the second suggestion, a little image education may be in order. Physical image size is easy to understand, and has a direct correlation with the file size. The larger the image, the larger the file size, and the longer it takes to download.
If you have a large image that you’d like people to be able to see, produce a much smaller version (called a thumbnail), and put the thumbnail, linked to the larger version, on your page. If a person’s interested in seeing the larger version, they can click on the thumbnail. If they aren’t interested, they don’t have to sit through the extended download time. If you do this, make sure to add text by the thumbnail telling the reader how big the file is, so they know how long they’ll have to wait.
To reduce the file size of your images without reducing the physical size (as well as for producing thumbnails), you’ll need image editing software such as Adobe Photoshop or Corel Photo-Paint. Creating thumbnails is as easy as reducing the dimensions of your image and saving it under a new name.
There are two methods you can use to reduce the file size while keeping the dimensions constant. First, you can alter the image by reducing the number of colors in the image. For instance, say you’ve scanned in a photo of yourself to put on your website. Typically, your scanner will bring the photo in with at least 4,096 colors (called “true color”). Most people browsing the web will have their systems set for 256 colors. Anything over that is a waste. So, reduce the image’s colors to 256 – you’ll barely notice a difference, and you’ll lose around two-thirds of the file size!
The other method of reducing file size is by saving the image in the proper format. On the Internet, you should only save images in the GIF and JPEG graphics formats. In general, GIF is best for non-photo graphics, such as clip art, and JPEG is best for photos. This is because JPEG is a lossy compression format (it compresses the image, making the file size smaller, by dropping out bits of the image), and photos show less degradation of quality. If you are saving an image as a JPEG, you can control the amount of compression you wish to use. The higher the compression, the lower the quality will be.
The GIF format, on the other hand, is a lossless compression format (it compresses the image as much as it can, without dropping out any data). GIF images retain all their quality, at the expense of usually larger file sizes. One other advantage of the GIF format is that you can set the image’s background to be transparent, which can make your graphics look more interesting on the page.
Finally, the latest version of the GIF format, GIF89a, can save graphics in an interlaced fashion (rather than saving the data line by line from the top of the image to the bottom, it saves every fifth line from the top to the bottom, like venetian blinds, then starts again from the top, until the whole image is saved). This is particularly advantageous to the reader who is using a Netscape or other interlaced-compatible browser, as the image will load in from top to bottom quickly, but at a low quality, gradually sharpening up as more lines load. The reader will not have to wait for the entire image to load before they can see what it is and decide whether or not they want to wait for the entire image to load.
Don’t feel trapped into using JPEG only for photos and GIF for clip art. If you aren’t concerned about your image being interlaced and/or having a transparent background, try both formats when you save it, and use the one that ends up smaller.
Now, don’t get me wrong. You can design some beautiful pages that are made up entirely of images. However, you’d better make sure that you’ve reduced the size of the images as much as you can, or else you’ll have a lot of people who stop downloading your page before it’s half over, only to jump to someone else’s page. Not good!
Karl Mills,
articles@successfull-rewards.com
http://www.successfull-rewards.com
Karl Mills is the owner of Successfull Rewards
Home Business “In a Box” at http://www.successfull-rewards.com
Consultant Sales Rep and Trainer with over 20 years of experience.
He is also publisher of the free Online Winners Newsletter
featuring e-courses, articles, tips, ‘pointers’ and bonus ebooks.
