SF State Web Template Guidelines { University Communications }

Image: Photos of SF State students and scenes from around campus

Using the Template

The template is composed with standards-compliant, validated XHTML, CSS, and Javascript, allowing the separation of content from presentation and behavior. This approach helps meet accessibility checkpoints, decreases server overhead and page load time, aids search engine access, expands portability to non–browser-based devices, reduces maintenance overhead, and ensures future extensibility of the system.

Who Should Use the Template?

The SF State Web Template Program assumes template users have some experience with setting up a Web site and using an XHTML editing application (such as BBEdit or HomeSite) or a WYSIWYG editing application (such as DreamWeaver). Departments that require step-by-step-instructions or detailed assistance in building should e-mail webteam@sfsu.edu.

Begin with Information Architecture

The template is designed to support site development that begins with a solid information architecture in place. If the existing site does not use navigation in a consistent and proper manner, the elegant usabilty solutions offered will have little effect. For a brief overview of information architecture see Web Site Architecture 101.

Use Semantic Markup

Lack or improper use of semantic tags such as h1, h2, blockquote, p negatively affects accessibility, search engine results, and the re-purposing of content. For an overview of the semantic use of tags see Guide to Semantic Mark-up.

About XHTML

The templates use DOCTYPE XHTML 1.0 Strict and are currently to be served as text/html. XHTML requires markup to be "well-formed" (all elements must have closing tags and be properly nested). Marking up pages in this manner helps ready pages for future technology, encourages semantic markup, increases portability to non-browser-based devices, and supports accessibility. For an overview of the simple yet powerful differences between HTML and XHTML markup see the NYPL Online Style Guide.

About CSS

The templates use external Cascading Style Sheets (CSS) to control the visual structure and layout of the pages. The CSS resides in a separate file that is called by the XHTML page. This separation means that a change to the CSS file automatically registers with every XHTML page that calls the CSS file, thereby vastly streamlining maintanence. It also eases server overhead by preventing page bloat caused by inline styling. To viscerally understand the benefits of CSS visit CSS Zen Garden, wherein CSS authors manipulate one CSS file -- without altering the HTML file -- to great effect.

About Javascript

The templates use external Javascript to control the behavior of page elements in response to user actions. In this case Document Object Model (DOM) Javascript is used, allowing for all event handlers to be removed from the XHTML file. The javascript is used judiciously such that users without Javascript-enabled browsers will still have access to content without a loss of usability.

Live Examples

Web sites that utilize the SF State Web Template.

SF State News

SF State Magazine

SF State Home