|
|
 |
Vital Signs
Case Study Style Guide: Style Overview and Explanations This
General Page Formatting section provides a narrative description of the Vital Signs Case
Study Style format. It briefly goes over the major elements of the style, and explains why
we developed the style the way we did. The next section of this style guide, Technical Page Formatting, describes in detail the hyper text
markup language (HTML) code to use in formatting your case study.
Good Web Style
The Yale C/AIM WWW Style
Manual is an excellent resource available online. It forms the foundation for much of
the web-page style we describe in this document. It also discusses many design issues that
are beyond this guide’s scope. We highly recommend it for anyone interested in more
guidance.
Design Integrity
Vital Signs takes one particular recommendation in the Yale C/AIM guide to heart, and it
forms the backbone of this style guide. It is, "consistently apply a few basic
document design principles to every page." We agree with Yale C/AIM that this
practice helps quickly and effectively inform users about what to expect and where to find
it, as well as gives web pages and sites visual clarity and unity.
For Vital Signs Case Studies, we translated this directive into a set of formatting
conventions and specific information that appears on every page. Each page contains
consistent page formatting, and distinct header, body, and footer sections. The following
sections describe these elements in general. The specific HTML code to implement this
style comes after.
Page Length and Number of Images
A web page should contain no more than three 8 1/2 x 11 pages worth of text, and no more
than about five or six images. Break your case study up into logical sections of this size
or smaller. Following these size limitations will keep your pages small enough to load
quickly over slow modem line connections.
Page Formatting
Each page should be have a unique title so that they can be identified in WWW browser
history lists. All page backgrounds should be the same color, a neutral gray, to make
pages easier for viewers to read. This color reduces page brightness, making it easier on
a viewer’s eyes, but still provides enough contrast between background and text to be
legible. Do not use graphics in the background of your document. Inevitably these make
text harder to read and make a web page more visually confusing. Text should be black,
unfollowed links should be blue, and followed links should be purple. Do not use frames in
your design, and keep tables simple to make the HTML code readable to the largest number
of WWW browsers.
Header Formatting
Begin each page with a header section containing the following items. Start with a strong
header graphic. We use the Vital Signs graphic for our pages, but we request that you
develop your own graphic for use at your site. We want to reserve the Vital Signs graphic
for pages hosted by our site. This strong image serves to visually identify to which site
this page belongs, and provides consistency from page to page. The next element in the
header should be site and section identification text separated by a colon. Specifically,
use "The Vital Signs Project: Short Case Study Name." This identification text
should be the same on all pages in your case study. The element in the header section
should be the page title. This text should change from page to page, and uniquely identify
the contents of that page. The header section should be separated from the body with a
5-point rule.
Body Formatting
Except on the first page of your case study, the body section should begin with a brief
paragraph describing the contents of the page. Follow this page introduction with a
standard rule, and separate sections of the body with the same type of standard rule.
Headings in the body section should all be formatted as only bold. Subheadings should all
be in the same format, only italics. Keeping the formatting to a minimum and consistent
will give a clean look to the page.
Graphics in the body should either of two standard sizes, half-page width and full page
width. All photographic images should be formatted within a white border. All chart or
figure graphics should be formatted with a transparent background so the gray page shows
through. All graphics should have the colored borders indicating they are a link turned
off. Each graphic should be accompanied by a caption describing the graphic and showing
the size and format of any linked graphic. This information will help integrate the
graphics into the text of the page and help viewers decided based on the file size whether
or not they want to load the larger linked graphic file.
Footer Formatting
The footer section should begin by being separated from the body section with a 5-point
rule. Following the rule, the first elements in the footer section should be previous,
next, and home buttons to provide local navigation within your set of pages. The next
buttons should be linked so they will lead a visitor once through your entire set of pages
in a logical order. The previous buttons should follow the reverse path. The home button
should take a user back to the first page in your case study. The first page of a case
study should have no previous button, and the home on that page button should link to the
next higher level in your site. The last page should have no next button.
Following the local navigation buttons place a small version of the graphic you used in
the header. We use the Vital Signs small logo graphic. We request that each school develop
their own graphic for use here. Place the text "Vital Signs Curriculum Materials
Project" to the right of the small graphic. This graphic and text reinforces the
identity of the site and page. Next, include the name of the author or contact person as
well as an email link, if one exists. Attribute the copyright of the page to the
author/contact just listed, or to the institution where the case study originated. Next,
include the date of the most recent revision to the page, and if possible, the date the
page was created. Finally, list the complete Uniform Resource Locator (URL) address of the
page. With this information, a reader can always find the page again from a printed copy.
|
