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...).
 |
| Website examples |
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
<HR>
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.
 |
| Website examples |
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!
 |
 |
|
