 Netscape
Composer Tutorial
Design Issues
In closing, we offer some issues to
consider when designing and creating your web pages.
Quick Links:
Even though the Web is relatively young,
there are already some definite do's and don'ts regarding content
creation. If you heed some of the following credos regarding text, page
length, graphics, and color, you'll be on your way to presenting an
attractive and well-turned Web page, one with content that readers will
enjoyably sink their teeth into.
Time spent planning before you start
"cooking" up your creation is time well spent. Consider these
issues:
- What's the purpose of the page? Are you
providing a service, a product, or entertainment?
- Who is your intended audience? Knowing
your readers helps you shape the information content and pick a
consistent voice to address them.
- How do you intend to structure the
information? It's common to see at least two levels of hierarchy: a
top level index and second-level pages. Put as much content toward the
top of a hierarchy as possible. (This way, even the casual reader can
quickly grasp the sort of information you're presenting.) The easiest
way to lay out your information is by chunking it: break your topics
into subtopics. If you have several small topics, group them onto a
single page.
- How many links will you include?
Remember that readers can create links that go to your home page as
well as to any page within your set of pages. Also, readers can start
to browse your Web page at any number of points; then navigate them in
arbitrary fashion, choosing where to start and stop browsing. When
planning the number of links you'll include, plan to test their
validity on a regular basis.
- How many pictures, sounds, and movies
should you use? The fancier and more complex your pages are, the more
work and time you'll need to develop them. While multimedia elements
definitely add pizzazz to your pages, they also can make a page take
too long to load, delaying the reader from the information they're
looking for.
Using Different
Browsers
As the Web grows in popularity, more
browsers are becoming available. This means you can't assume that folks
reading your pages are using the same browser you are. Even those who do
use Netscape might not use it all the time (they might use a different
browser at home or at work).
Don't make your document overly dependent
on HTML features that can't be seen by all browsers. If you decide to use
Netscape-only HTML tags, consider how your page might look to someone
whose browser doesn't support those tags. Some browsers might not accept
your graphics, so provide alternative text. Also, Netscape (and many other
browsers) lets users choose how they want the pages they view to look.
Users can choose fonts and font sizes, override a page's colors and
backgrounds, and generally ignore a lot of the formatting options a Web
author has specified.
Do assume that a user's screen size, number
of available colors, and screen resolution will be different from yours,
even those readers using the same browser. This means that a page that
looks great on your screen might look completely different on someone
else's. This is another strong reason to concentrate on content first, and
use design options as enhancements only.
Setting Page
Length
Most current personal computer monitors
display either 640 x 480 pixels or 800 x 600 pixels on 15-inch to 17-inch
screens. Designing your pages so that the information is presented in
short, clearly segmented chunks will make it easier to keep pages concise.
A good rule of thumb for writing a page
meant to be read onscreen is to make it no longer than two to three 640 x
480 screens' worth of information, including local navigational links at
either the beginning or the end of the page layout. If you make the page
longer than the window, your reader has to remember too much information
that's already scrolled off the screen.
A disadvantage of a very long Web page is
that the reader must depend on the vertical scroll bar slider to navigate.
Small scrolling movements can completely change the screen contents,
leaving the reader no familiar landmarks.
Keep closely related information within the
confines of a single Web page, particularly when you expect the user to
print or save the text. If you want to provide a good online interface for
pages and easy printing or saving of the content, divide the page into
chunks of two to three printed pages of worth information, including
inline graphics or figures. Or provide a link to a separate file that
contains the full-length text combined into one page.
Providing Good
Content
While the graphic design of your pages
should be pleasing, it is ultimately the content that determines a page's
value to others. Follow these simple guidelines to giving good content:
- Use graphics and color and vary the font
size to enhance your page, but make sure your page also works when
viewed as straight text. And always include a text alternative to
graphic elements.
- Pare down your text. Usability tests
show that people will skip over text that they consider non-essential.
They don't like to scroll. Often readers will scan a page reading only
the text of the hypertext links before they choose their next
destination.
- Settle on as few heading styles and
subtitles as are necessary to organize your content, then use your
chosen styles consistently. Just because Composer provides six levels
of headings doesn't mean that you should use them all in a single
page! Use heading levels in order, with one level 1 heading at the
top, and if necessary, several level 2 headings. Be aware that
different browsers use different spacing and fonts. Use the heading
levels to indicate structure, as they were intended.
- Avoid overusing boldface, italics, and
multiple font styles in your text. One thing you can do to ease the
monotony and visual strain of reading lots of text on the computer
screen is to use the Block Quote paragraph format and Unnumbered List
format (available in the Properties dialog box). Both formats result
in indented text blocks that shorten lines of text, keep margins
clear, and generally make the page easier to scan. You can also insert
horizontal lines to visually separate sections of your document.
Doing Graphics Justice
Graphics add a lot to the visual appeal and
information content of a page. But poor use of graphics can frustrate your
readers or keep them from understanding the message you're trying to send.
Here are some points to keep in mind:
- Practically every published Web author
will agree: keep images small! You should aim to keep the total file
size of images used on a page to less than 100K. Remember that not
everyone seeing your page has a 56K modem. If you need to use a large
image, you might want to consider using a thumbnail of the image and
then linking it to the full-size copy. You can reduce file size by
using design programs (such as PhotoShop) to eliminate unnecessary
colors.
- Use backgrounds intelligently.
Backgrounds that are "loud" make it extremely hard to read
the text that's on top of them. Don't let your backgrounds interfere
with the message you're sending the reader. For a background to work
well, color contrast is not enough. The background either needs to be
very light (for dark text) or very dark (for light text). A background
that contains an image should have low contrast, so it's not too
distracting.
- The two types of image formats used by
most Web browsers are GIF (CompuServe Graphics Interchange Format,
.gif extension) and JPEG (Joint Photographic Experts Group, .jpg
extension). The JPEG format works best for photos and continuous tone
images. The GIF format works best for inline images, line art
drawings, most logos, and screen dumps. Both formats should use a
resolution of 72 dpi (dots per inch) and use RGB (red-green-blue)
color mapping.
- Since you can't assume your readers are
using a graphical browser to view your pages, be sure to enter an
alternative description in the Text field of the Image Properties
dialog box (choose Format|Image Properties). This way, readers
using text-based browsers will see the alternate text description, and
those using graphical browsers will also see something if the image
fails to load.
- Use the Image properties dialog box to
indicate the amount of space (in pixels) you want around an image.
This speeds up the downloading process because the server doesn't need
to request size dimensions to transmit to the client and can therefore
display text faster. You may have heard of an extended type of graphic
image called an image map. An image map is where different
parts of the image activate different links. Clicking on one area of
the image takes you to a specified page, clicking another area takes
you to a different page, and so on.
It's tempting to add lots of colors and
font styles to a page just because you can. But the result is more likely
to frustrate a reader and detract from the message you're trying to get
across. After all, it's the content you want your audience to focus on,
and that means presenting a page that's easy to read. Even though most
graphical browsers (including Navigator) use a proportionally spaced font
such as Times Roman as the default for text, many browsers are
user-configurable, meaning the user can choose any font for viewing your
page.
Consider typography as the tool you
use to paint patterns on the page. The first thing your reader sees is not
the title or other details of the page, but the overall pattern and
contrast of the page. The reader's eye scans the page first as a purely
graphic pattern, then begins to track and decode type and page elements.
Good typography depends on the visual
contrast between one font and another and the contrast between text blocks
and the surrounding empty space. There are a few basic typographic
principals that can help make your pages easier on the eye:
- Avoid overusing boldface, italics, and
multiple font styles in your text. Too much contrast is just as bad as
no contrast at all.
- Making text uniformly bigger doesn't
help at all, and only contributes to making the pager longer.
- Boldface fonts become monotonous very
quickly, because if everything is bold, nothing stands out, and it
looks as if you're shouting at your readers. Using all uppercase can
have the same jarring effect.
- Choose a few heading styles to organize
your content, and then use your chosen styles consistently. Regular,
repeated patterns help readers quickly establish the location and
organization of your information, and increase the overall legibility
of your pages.
- Use white space judiciously. Don't put
blank lines or horizontal rules everywhere or your pages will look
choppy. (Plus, you're trying to keep page length to a minimum.)
Thoughtful and consistent use of color in
backgrounds can really help pull your pages together into a cohesive
presentation. In general, light pastel backgrounds are best for reading
substantial amounts of text. If you are showing a lot of pictures, a
black background can make your photos look good and give your pages a
gallery-like effect. Using tiled backgrounds makes everything above them
"float," causing your readers to work much harder to read your
text. Using a white background can make text look good and your document
look clean, but if you have a lot of pages, it can be extremely wearing
on the eyes.
Finishing Touches
And last, but not least, the proverbial
icing on the cake. These elements are considered the hallmarks of the
work of a professional Web author:
Headers: A consistent titling
design at the top of your Web page allows your readers to immediately
know what the main point of the document is, and what (if any)
relationship the page might have to other pages in a related group.
Unlike a browsing a book, which is linear in design, a Web author can
never be sure what other pages the reader has seen before linking to the
current page. Graphics placed above the main heading should not be so
large that they force the title of the page on a standard office-size
monitor (640 x 480 pixels) to go off the screen.
Footers: Ideally, each page should
have a footer that contains your name, organization, navigational
elements (links or icons), copyright information, and revision/change
dates.
Email Address: Like any fine work
of art, a good Web page should have a signature or some other form of
contact information. You can provide a link to an email form your
readers can use to send comments and feedback to you. Select the Link
tab in the Properties dialog box. In the Link to field, type the HTML
tag mailto: followed by your email address.
At the very least, provide your name,
organization, and street address, in case your page is viewed on a
browser that doesn't support email forms.
Navigation: Include a target (a
return link) to your top level on each page so readers have a quick way
of returning to the beginning. It also helps to include links to an
index or table of contents, other sections, and previous and next pages.
You might want to add these targets to the bottom of the page, so the
reader always knows where to find them. If your links only flow downward
from the home page, the pages in your document will become dead ends.
Links: Avoid the "click
here" syndrome when defining a link; for example, "Get
information about whatever is available by clicking here." Readers
then have to remember where they're going to once they jump to another
page. It's better to link to words or phrases that are a meaningful part
of a sentence; for example, "Information about whatever is
now available."
If you use links to items on the same
page, remember to use relative links, as absolute links (full URLs) can
cause a browser to reload the page each time a link is selected.
Time Stamps: Date your revisions
and indicate those pages that have been changed or are new additions.
[ Back ]
[ Overview ] [ Getting Started ] [ Working w/pages ] [ Paragraph Formats ] [ Character Formats ] [ Images ] [ Hyperlinks ] [ Tables ] [ Publishing ] [ Page Properties ] [ Composer Prefs. ] [ HTML and Java ] [ Design Issues ]
|