Web Site Resources
Lawrence University Web Page Style Guide
Mark Mende, Director of Web Services
November 21, 2006
This style guide is meant to help guide
design, navigation and coding decisions for pages.
The Web Team, and the Department of Web Services
in particular, wish to help all web designers and
managers on campus to design better websites and
make them easier to maintain, while at the same time
making them more pleasant to look at, easier to use
and representative of the values the University is
attempting to portray in the website and all recruitment
materials it produces.
choice of color is generally a subjective and aesthetic decision made by the
designer, usability needs to be considered. Generally, dark colors on light
backgrounds are the easiest to read. Black text on a white background is usually
best for areas of content that might be printed by the user.
used on web pages should be easy to read and commonplace.
While the default font might be boring, it is among
the fonts most likely to be installed on computers.
If you use an unusual or rare font and the viewer
doesn’t have that font installed, he or she
will not see the page as it was meant to be seen.
The Arial, Helvetica family of fonts is easily
readable. You can use Cascading Style Sheets (CSS)
to set fonts, allowing you to specify a descending
order of fonts to use in case a user doesn’t
have the specific font you want.
While it is possible to choose a font size that is
too small, it is also possible to select a size that
is too large and just as unreadable. Good judgment
is needed when making these decisions. Text that
is too large takes up a great deal of real estate
on a page, often pushing more important information
down and sometimes off the first screen unnecessarily.
are the attributes applied to text that change its appearance, such as boldface,
italics and underline. Try to avoid using underlined text that is not also
a link; this can confuse users who have become accustomed to underlined text
being used in that manner.
It is not
a necessity to have all links underlined, as long as there are other obvious
ways of determining whether an item is meant to be a link or not, such as using
different colors, or mouseovers. It is possible to have a link open a new browser
window with that information. Doing so can be very useful, but also can be
very confusing to some users who are used to having access to a “Back” button
to return to previous content. Some uses for new browser windows include a
link that is going to a different website, or one that opens a page that serves
as an augmentation to the other page, but then would be logically closed when
the user is done with it.
sentiment among experts is that people don’t go to the web to read, but
it is clear that the decision to read content on a page is directly related
to the expectations of what the user will find on the page. Homepages and main
pages of sections should usually be treated as a combination of the cover and
the table of contents of a book. The focus should be on navigation, as well
as presenting a sense of the priorities and nature of the institution, department,
program, etc. As a user delves deeper into the site, some pages will be heavier
on the text side, based on the content of the pages. For example, a prospective
student investigating our academic offerings would likely assume upon clicking
on a link for Majors, Minors and Programs that the next page will be mainly
a list of links. But when a user clicks on a link to a specific program or
department, there is an expectation that more in-depth content related to that
program or department will be presented.
the moral of the story is to keep text brief and
limited on the main page, and to use larger blocks
of text in areas where users would expect it.
is also possible to make the experience of reading
larger blocks more enjoyable. Try to separate out
content by topic onto individual pages when there
are more than one or two paragraphs of content involved.
Use anchor links at the top of a page when appropriate,
as in a FAQ, or a single body of content with multiple
sections of content. It is also helpful to write
in more of a newspaper style, following the inverted
pyramid format with the most important information
at the beginning of the content.
photographic or iconic, can help to dress up a website, as well as communicate
a sense of the mission of a department or program. Appropriate use of images
can be effective, but poor use of them can detract from a page.
and more people are accessing the Internet with high-speed
connections, file size should still be a consideration
for images. It is best to make high-resolution images
smaller, using some kind of image editing software,
prior to placing them on the page. Using HTML to
make high-resolution images appear smaller on the
screen does not reduce the size of the file. In general,
it is best to attempt to scale images to the size
you wish them to reproduce at before embedding them
on a page. And while it is possible to make larger
images smaller by scaling them down on the page,
it is not possible to make smaller ones larger without
causing significant problems with appearance. Using
images to break up large blocks of text can be effective
as well, but keep in mind that content likely to
be printed is best left image-free.
The choice of
the kinds of images to use is also important. For
example, while images of buildings can be appropriate
in certain areas, it is usually more effective, and
more attractive, to show people in images. Students
and faculty/staff interacting can be especially effective.
images should have accompanying alt tags that are
descriptive of what the image is or does, to help
with viewers using browsers that don’t allow
for graphics, or have graphics turned off.
the biggest challenges of using graphics or varied
colors for page backgrounds is readability. The choice
of a background color or pattern/image should be
related to the content that will sit on it. In addition,
the background can also serve as subtle navigation
feature. Keeping a consistent background from page
to page within a site helps to reinforce the brand
of the site, and lets the user know where he or she
is. Conversely, using different backgrounds on pages
within a site can cause confusion for users and is
not good web design.
While there are a number of standards on the Web
for placement of navigation, most sites have three-tiered
navigation that generally is organized as site-wide
navigation and/or help functions (search, contact,
etc.) at the top of a page, navigation relative
to the specific section of the site and/or site-wide
navigation on the left, and internal navigation
for the specific page or a sub-section of the section
on the right and/or the top of the content section
of the page.
main University pages have help functions at the
top of the page, as well as links to complementary
information, often located in a different section
of the website. For sites that have many pages, like
the alumni and admissions sites, navigation on the
left of the page appears on each page of that area
of the site, allowing users to navigate throughout
the section. Then, if sub-navigation is needed for
a page in the form of anchor links, they appear at
the top of the block of content. You might also see
a floating navigation box to the right for very specific
scan web pages for the information they are looking
for, and appropriate links to find that information.
Links should be easy to read and brief, but not so
large that they overwhelm content or make continued
navigation difficult. Some sites begin navigation
on a homepage in a prominent place with larger text,
and then carry the same navigation to the left or
top of internal pages, in a somewhat smaller size.
sites that have potentially numerous links, it is
important that they be organized topically under
headings that will help guide the user. Departments
will want to determine a hierarchy of these headings.
To help in that exercise, the department should first
determine who comprises the main audience or audiences
of the site and organize the info in a manner that
best serves those groups. Research, as simple as
discussions with members of those groups as to what
they use the site for, can help inform those decisions.
is best to use plain text, stylized with CSS if desired,
for navigational features. Using images or graphics
makes long-term maintenance of a site more challenging.
CSS can be used to create boxes around text or a
mouseover effect on text that can serve to reinforce
that the text is a link.
Remember that the prevalence
of search engines, including our own search appliance,
means that users often enter sites other than from
the main page. Therefore, having navigation to other
places within the site is required.