|
Inside
Page Design Considerations
Page Size
Be careful to avoid making your page too wide because visitors will not
be able to see the entire page without clicking on an annoying horizontal
scrollbar that appears at the bottom of the viewer's browser. A safe bet
is to keep elements on your pages within 750 pixels from the left side
to avoid a horizontal scrollbar on a standard 17-inch monitor. If you
have the technical ability, you can make pages automatically adjust to
a percentage of the viewer's browser. A related issue is page length.
Viewers appreciate relatively short pages that do not force them to scroll
down too much. If you have a lot of information to add to your site, add
new pages, and make sure that people can navigate to the additional pages
easily.
Color Choice
The colors you choose reflect your personal taste and help set an overall
tone for your site. Remember to choose a background color that contrasts
with the text and graphics on your pages to make it easy for people to
read your content. For text heavy sites, you cannot go wrong with black
text on a white background. High tech Flash sites often have black backgrounds,
which are great for showing off special effects. To be safe, the experts
recommend using web safe colors, however, I expect that most monitors
today can display thousands of colors without problems.
Page and Navigation
Templates
Next, you need to spend some time thinking about how to design the inside
pages. There are several methods of designing pages on a rectangular screen,
and many creative twists under each method. Here are some.
1) Frames: Avoid using
frames. Frames may be easier for the webmaster to work with, but they
are not very pleasing to the viewer. Usually, frames take up a lot of
valuable viewing space on the screen. Looking at a framed presentation
on a browser is like watching a movie in wide screen format on television.
Most people prefer viewing a whole screen. If you use frames, ensure that
you leave plenty of viewing space for main content, and offer a no-frames
option.
2) Left sidebar: This
may be the most common layout method. Many people try to avoid it because
they think it is too standard or boring. I believe, however, that the
left sidebar is one of the most effective, logical, and easy-to-find places
for you to place links. Even if 3,000,000 sites have one, you can still
design a unique looking page with one. Besides, 3,000,000 other sites
have every other layout scheme, so you really cannot avoid some duplication.
There are only so many ways to place elements on a rectangular screen.
3) Organized free-for-all
(template-free): You need to space elements perfectly on each page to
pull this off, but it can be very professional or creative looking.
4) Top Navigation
with left sidebar: This method lets you add links to major sections to
the top and links to the current section to the left (or vice versa).
I like sites with this feature because it is easy to find everything.
Content Development
For a detailed discussion about writing for the web and presenting your
written content on the web click to the Ultraweb Writing Course. When
adding graphics to your pages, remember that large graphic files take
a long time to load, so you need to "optimize" them. Programs
like Adobe's Image Ready and Corel's Photo Paint can be used to reduce
the file size of graphics while maintaining good viewing quality on the
web. Try to keep thumbnail pictures under 5KB, and most other pictures
under 12 KB.
Content Placement
After you design the inside page template and develop your text and graphic
content, you need to consider how you will place the content on your pages.
Avoid too many graphics and too much text on one page, and try to keep
a healthy amount of space between elements. Many good sites separate elements
with divider lines, boxes, oval insets, and other visually pleasing graphics.
Also, try to have elements flow logically from one to the next.
Go To:
1) Entry
Page Design Considerations
2) Designing Inside Pages
3) Content Development
4) Technical and Other Matters
5) Web Design 101+ Homepage
|
