Using the Template

The template is composed with standards-compliant, validated HTML5, 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.  The template is device-responsive, offering faster load time and ease of viewing on tablets and mobiles.

Who Should Use the Template?

All University departments, colleges and units are required to use the web template and to build in the Drupal content management system (Drupal 7). Because the template is designed for frequent updates and improvements, and for data security reasons, all sites must be located and managed on the SF State Central Servers.  Contact the Drupal support to create a hosted Drupal site if your unit does not already have one. Departments that require step-by-step-instructions or detailed assistance in building should submit a Footprints service ticket.

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 usability solutions offered will have little effect. For a brief overview of information architecture see website 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 HTML5

The templates use DOCTYPE  html and are currently to be served as text/html. HTML5 requires conformant html. 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. 

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 HTML page. This separation means that a change to the CSS file automatically registers with every HTML page that calls the CSS file, thereby vastly streamlining maintenance. 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 HTML 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

Websites that utilize the SF State Web Template.