The printing press has existed for centuries, yet every day thousands
of pages are written and printed that do not communicate effectively.
Writing teachers and journalism teachers and graphic design teachers have
tried and tried to teach people how to make effective use of the printed
page.
The web first came into wide use in the late 1990s; most people who produce
web pages have never had any formal training in it, and have learned on the
job. As a result, there is a lot of raw material that could be used for
bad examples. We feel that it would be inappropriate for us to make specific
reference to web pages that we think are ineffective, but you should have
no trouble finding your own examples.
Right onward.
The web is not made out of dead trees. The most common mistake
made in producing web pages is to think of them as being "almost
like print", or to take the print version of something and reformat
it for the web. Many commercial publications started their web pages making
this mistake, but if you look now at any good-quality online newspaper
or magazine, you will see that it has a completely different design from
the design of its printed-on-paper cousin. Start from scratch.
Screens are small. Use screen space sparingly. Every browser
has the ability to enlarge letters should the reader have difficulty reading
them. Make every place on the page earn its keep. White space can be used
effectively in graphic design, but don't waste space by using letters
that are too big, lines spaced too far apart, and too much space between
design elements. It is very common to see giant icons and giant pictures
where tiny little ones will work just as well, or better.
Viewers' time is precious. Use bytes sparingly. Nobody wants
to wait 5 minutes for a page to download. Not even 20 seconds. The world
is in a hurry. If you fill your pages with giant photographs and music files,
people will, more likely than not, click "stop"
before your page finishes loading. There are very few cases in web design
in which it is appropriate to put automatically-played music on a web
page; it is amazing to us how many church-related web pages include enormous
sound files to play sacred music, forgetting that it takes 46 seconds
to download that sound file. After waiting nearly a minute for a sound
file to download, the response is not likely to be sacred, but profane.
Be aware of exactly how many bytes need to be downloaded before somebody
can see your page, and know how many seconds or minutes it will take to
do that download on modems of various speeds. In 2004 the generally-accepted
rule for web pages is that 80,000 bytes is the limit for one page with
all of its included images.
Educate yourself about pictures.
There are many different formats for online pictures, and each has its
strengths and weaknesses. If you are going to put pictures on your web
site, you must master this material. Find out about JPEG, GIF, TIFF, PICT,
PNG, and bitmap files. Learn about transparency and interlacing. Learn
how to make pictures use fewer bytes. Learn about bit depth and color
palettes. Don't pay for 24-bit color depth if most screens will use only
8 of them.
One mistake that we see too often, which makes us squeal with pain, is
web pages that include giant pictures with hundreds of kilobytes of space
and download time, and then include HTML codes to shrink the picture down
to a small size after it has been downloaded. This way you pay for a large
picture and get a small one. This effect is most often caused by using
the "save as HTML" option in general-purpose word processing
programs. If you are going to put pictures on a web page you must learn
how to use an image-editing program such as Adobe Photoshop Elements.
You had better have a very good explanation for why you feel the need
to include a picture that is bigger than 500 pixels tall and 700 pixels
wide. It is not safe to assume that a screen is bigger than 600 by 800,
and some are still 480 by 640.
Make it readable. Black letters on a dark green background
might be dramatic, but are rarely legible. If you are using some fancy
visual effect, test it carefully with many different computers. A color
that looks light green on your screen might be a near-black dark green
on somebody else's screen. Be extremely cautious with your use of unusual
colors, and test carefully.
Give every page links to other pages in your site. A reader
might have found your page with a search engine and not by clicking to
it; if you don't put a link to the top-level page of your site on all
of the other pages, then if a reader got to your page via a search engine,
they won't be able to find your home page. While you're in there, give
every page a title, because search engines always feature page titles
prominently.
Be available to your reader. Every page should have links
to, or instructions for, reaching the person or people who made the page.
If you use a "mailto" link, make sure you also provide the email
address in text, as some older browsers, and browsers in public libraries,
typically cannot use "mailto" links.
Use links. People know how to click on things. Give them
things to click on. They like it, and it makes your page shorter if you
can link to something instead of repeating it.
Don't overuse links, and police the links you use. You probably
don't need a page with 300 links to other places. The web is full of collections
of links. Link to some of them, and be done with it. If you must have
large collections of links, then you must check them regularly. It makes
your pages look very foolish to have a large number of broken or outdated
links.
Don't EVER use an "under construction" sign. If
a page isn't ready, don't publish it and don't link to it. You are not
in such a big hurry that you must publish your site before it's ready.
The urge is very strong to get your web site out there so that you can
say you have one, but if you publish it while it is still under construction,
you are telling the world that you are not very good at making web pages.
You can mention that you expect soon to have a new section of your web
site, but don't put in links to it until it is done.
Never play music at someone without permission. There is
a stylistic debate as to whether or not music files have a place on web
pages, but they are absolutely inappropriate as "autoplay" or
"background" material. Many computers do not have sound cards
and give annoying error messages when they attempt to play sound files.
But even for computers that are prepared to play sound files, you are
being rude to the reader of your page by playing unsolicited music at
him. If you must use music, link it to a button that explains how big
the sound file is and what music will be played when the button is clicked.
Do not use the blink feature if your audience contains adults. One
of the principles in our "Design tips" section says "know your audience". If you expect
anybody in your audience to be older than 13 years, do not use the blink feature. Almost all adults find it intensely annoying, and the presence
of a blinking field on your web page will completely change the way an adult responds to your page. You will note that we are not even using
the blink feature as part of our suggestion that you avoid it, though if you click here, you can see a copy of
this paragraph with some blinking text in it. Note: because blinking is so annoying, most modern browsers do not honor blink requests any
more.