CSS Group Report

Cascading Style Sheets (CSS) separate the presentation of a web site from its content. Their use helps to easily maintain a "common look and feel" of the web site, and to increase the accessibility of its web pages. A further benefit is that their use helps to pave the way for Content Management.

The CSS sub-group was established by the Web Operational Management Group to research and recommend on implementing CSS on the Library's web site. The current scope of the project does not include the Library Staff Web site. The following are our considerations and resulting recommendations.

Considerations

Guiding Principles

To maximize the benefit of using CSS --

CSS will be used for both layout and text formatting.
XHTML tags will reflect structural elements of the pages, not display. (e.g., <h1>, <em>)
Relative sizing will be used in CSS. (e.g., width="50%")

Test Site

In order to test CSS, templates, symbolic links, server side includes (SSI), etc., in a safe environment, a test site was set up at /libweb/htdocs2/ and accessible at: http://www.libtest.uwaterloo.ca/. This proved to be very helpful. The discipline pages provided a good testing base, because their complexity covered most of the situations we would have to consider in choosing a plan to implement CSS for the Library Web.

Dreamweaver Template, CSS and SSI

The group aims to create an environment that supports easy, efficient maintenance and global changes. We evaluated the combined use of Dreamweaver Templates, Server-side include statements, and CSS. After looking at several combinations, the group recommends the following structure, as illustrated by the medieval discipline area:

Dreamweaver template - One template would be applied to all discipline pages and would control the basic structure of each page.
CSS files - Two files are used across all disciplines; one controls the appearance of the screen display, and one the print version.
SSI's are used to update those portions of a page that are unique to each individual discipline, e.g., contact name, name of discipline, side navigation.
The template includes the library-wide SSI's for top navigation, library address in the footer, anti-spam for email, and an editable region for content.

This structure provides:

a common look and feel
good accessibility
browser compliance
easy maintenance for web maintainers (restricts to editable region)
simplified training requirements for web maintainers
efficient method for global changes by WebOps
reduced bandwidth
more efficient transfer to a variety of platforms ( i.e., palm pilot/cell phones) or to CMS

Symbolic links and Hard Links

For security reasons, we prefer that web maintainers define their Dreamweaver sites to connect to the specific directory they are maintaining. This creates problems with sharing CSS and Dreamweaver Template files as outlined above. To circumvent this problem we experimented with the use of Symbolic links and Hard links and found that they can be successfully used throughout the site. We recommend the use of "Hard Links" because they provided the most seamless system for the web maintainer.

Navigation Bar That Uses CSS

The medieval pages also show an easy-to-maintain CSS-based navigation bar using CSS for both positioning and text. Javascript is used to fix browser compatibility problems.

This navigation bar requires two SSI's -- one for the head, and one for the body. The Library web pages will need to be updated on a directory-by-directory basis, using Dreamweaver. Some pages may need further adjustments for the CSS-based navbar to work, e.g., UMD pages.

Naming Conventions

Since the Library Web is produced by staff members throughout the Library, conflicts between javascripts and anchors sometimes occur. To prevent this kind of conflict from occurring and to allow site-wide sharing of CSS files, we recommend the use of naming conventions.

Testing

Dreamweaver templates, CSSs and SSIs were set up on the Library test site as discussed above. The group members tested the procedures on 1) creation of discipline sites and 2) maintenance of discipline web pages.

It was considered that the templates and CSSs, in a folder accessible only by expert staff, were secure but could be applied easily by maintainers of individual web sites.

Recommendations

A combination of Dreamweaver Templates, CSS, and SSI's be employed across the Library Web and be shared whenever possible.
That shared templates be located in the Templates directory at the top of htdocs; shared CSSs files be located in the css directory at the top of htdocs. Whenever access to these files are required at a lower level for Dreamweaver site definition purposes, hard links should be used to provide access to the required files.
CSS will allow for:
- style sheet control at the top level of the Library's web site that can be applied throughout all levels of the web site
- style sheet control at a sub-section level that can be applied throughout all specific pages within a sub-section. [Web maintainers will be cautioned to make sure that CSSs in sub-sections do not conflict with the ones at the top levels.]
- flexibility for the use of inline styles at the page level
For the casual web maintainer, Dreamweaver sites should be defined to connect directly to the directory that is being maintained.
Site-wide CSS files and shared templates be owned and maintained by the "webmaint" group, not the web maintainer.
To avoid conflicts in the naming of divisions and variables in JavaScript programs and to facilitate site-wide sharing of CSS files, designated naming conventions should be followed.
A CSS-based navigation bar should also be used.

Implementation Plan

An implementation plan has been developed to show the steps required to convert the Library Web to a CSS-based site.

Members:

Marian Davies, Esther Millar (Facilitator), Bill Oldfield, David Smith, Marina Wan, Charles Woods.

If you have any queries or concerns about this page, please contact .

July 13, 2005