This document supplements basic University of Rochester style guidelines by
providing specific advice on information layout, image design, and other issues.
None of the following is mandatory, but highly recommended. Also remember that
differences of opinion about what looks good may occur, but following the suggestions
below and keeping your pages simple should help make them pleasing to the greatest
number of people.
Please note that this document was written for people who have already
had a bit of experience using the World Wide Web, and at least a little
knowledge of HTML.
- Organization
- Home Page: This is the first page of information for
a department or office. It should be as short as possible, without
detailed information. What belongs here is a well-organized list
of links to other pages or sources (no more than 8 links, if
you can help it), a small-medium picture or image, a colorful
title or banner or background, a note describing who maintains
it, who created it, when it was last updated, and maybe the URL.
You also should link back to the University Home Page (http://www.rochester.edu/).
- Sub-Pages: By this I mean any page of information
that branches off of the home page. These can be long
documents or merely another layer of links to information.
You may want to divide these further into main pages
and specific pages. (Example: UR Libraries has two
designs -- one for the main links from the home page,
and one for more detailed nitty-gritty). Try to organize
these pages so that it is easy to find specific information
and also so that interesting information pops up for
those who are just curious. These pages should always
link back to the departmental home page, but you don't
need to link to the U of R home page, and you don't
necessarily have to give the name and date of the updater.
- Images
- Titles of Pages may be colorful graphics to make the
page stand out - ESPECIALLY on the home page. Adobe Photoshop
is a popular graphics program and definitely worth learning if
you want to do this for any amount of time.
- Image Maps are an idea for a home page graphic,
but not necessarily ideal. They tend to be large and
slow-loading, and hard to update. Just remember to
have a plain-text link of the same sort somewhere on
your page.
- Photographs can be scanned
in various ways depending on their
purpose. To get the best resolution,
they should be resized and converted
to JPEG format in Photoshop (choose
indexed color). However, if you
want high resolution and detail,
you can increase the size right
in the scanning program. If you
want to include a large photograph
in a web page, it is generally
best to link to it instead of putting
it right on the page, to give the
viewer a choice and to save them
time.
- Dots,
Icons, Buttons, and
Bars can
be downloaded from
many sites (check Yahoo
under Computers
and Internet - Graphics
- Clip-Art).
CHECK COPYRIGHT RESTRICTIONS
before copying them.
Having too many icons
can make a busy web
page, but using one
or two standard buttons
or dots can make your
pages look more uniform.
- Backgrounds can
also be downloaded
from sites devoted
to that purpose,
and are rarely
copyrighted.
The disadvantage
of using them
isthat anything
but the calmest
pattern makes
reading more
difficult.
- Color
Schemes:
Backgrounds,
dots,
buttons,
titles,
and
other
graphics
should
share
a
common
color
scheme.
(Blue
and
yellow
is
always
a
safe
one).
If
you
get
a
graphic
like
a
dot
from
somewhere
else,
you
should
choose
matching
colors
in
some
of
your
own
created
images.
- Browser
Issues:
There
are
many
different
types
of
browsers
out
there
in
the
world.
Just
remember
to
keep
everything
simple
and
most
of
them
should
be
able
to
display
your
page
properly.
- Size
- Length: The only significant amount of scrolling people
should have to do is on the final page of information; they should
never have to scroll far to find what they are looking for, and
links should not be hidden in large sections of text. Any home
page should fit within a page or two at the most (browsers and
monitors differ greatly in size, but you get the idea). If you
have many sections of information which would individually be
too small to warrant separate pages, put them all in one file,
perhaps separated by lines, and link to the individual parts
from a list on the top of the page.
- Width: Monitors, windows, and browsers do
vary, but a good standard for maximum image width is
460 pixels, +/- 5. This is the width of the Netscape
window when it opens on a Mac and the minimum size
of a PC window. Just because your image fills the screen
that you see it on doesn't mean, however, that it fills
everyone's so remember to add line breaks after such
pictures, and center when appropriate. You should design
your text layout so that it doesn't matter how big
the window is.
|
