This UNL '09 Web Developer Network Style Book has been created for you as a UNL web developer as a reference to assist you in your implementation of the UNL site templates.
Please consider this document to be in a 'permanent beta' state. As the web is a constantly evolving medium, our templates and underlying code must retain the flexibility to adapt to changing conventions and changing technologies. So, too, will this document remain in flux.
Through all of the changes ahead, we need to keep one goal in mind: consistent use of the various elements of the UNL site templates is what allows the user to learn how to use the site. Inconsistent use of the elements will cause frustration for site users, as their expectations are unrewarded. User expectations are of primary importance in site usability, and consistency within and among UNL websites is what creates those expectations.
If you would like to create new site elements, please do so through the Web Developer Network, which is where we pool all of our brilliant ideas with the goal of creating one brilliant website. Through the WDN, we'll acknowledge great ideas, make those great ideas even better, and agree on how to use them consistently for all of the sites within unl.edu.
For a style guide detailing guidelines for written content for web and other media, please refer to the UNL Style Guide.
Contents |
[edit] QA Process
A Quality Assurance process has been established to provide a monthly report of the progress of site transitions to the chancellor. The items listed below were identified by the Web Developer Network Quality Assurance Group as particular items that will be focused on in the site review process. These items, henceforth referred to as "checkpoints," are numbered for quick reference.
The zero-level checkpoints, required for all sites and pages within the unl.edu domain, are as follows:
0.1 | Compliance All sites must be compliant with Section 508. (Check your site at cynthiasays.com.)
0.2 | Validity All sites must be composed of valid code and must carry a DOCTYPE declaration. (Check your site at validator.unl.edu)
0.3 | Current Template and Dependents Version All public sites and pages must be developed within the current version of the templates provided. If your site is hosted on the main UNL server (Frontier): template update information; If your site is hosted on another server: UNL.edu template synchronization information.
0.4 | Favicon All sites and pages must display the UNL favicon; no other favicons are permitted.
[edit] Notes on Template Sections
1.1 | UNL Global Header This header is required on all template-based UNL web pages. This includes the UNL graphic identifier, the search element, and site tools.
1.2 | Navigation Breadcrumbs The global navigation combines two separate elements that were formerly known as breadcrumbs and navigation. Breadcrumbs are a link trail through hierarchy of the site back to the main UNL website. Breadcrumbs are to be used on all fixed width template pages. The initial breadcrumb must be "UNL" and linked to http://www.unl.edu/. The final breadcrumb must be the current page and not an active link. In general, abbreviate all elements with the exception of the local page title. In most cases, elements in the breadcrumbs should be identical to elements in the encoded page title.
The navigational links listed herein are the primary navigation links on your site displayed by default on mouseover. Taken together, the site title should logically combine with the word 'navigation' to describe what links are found in the default navigation.
For instance, if the site name is 'University Communications,' all of the navigation displayed as the primary site navigation should be under that hierarchy; it should be describable as "University Communications Navigation."
Your navigation system should contain primary and secondary links (sublinks) whereby your primary links describe sections of related pages. A selection of links, usually the highest-priority links in these sections, should be represented as sublinks within the navigation system. All text in the navigation area must be linked.
The navigation system displays in six columns, with the primary navigation link at the top and sublinks listed below. Developers are strongly urged to reduce the complexity of navigation systems. A separate "Best Practices" document is forthcoming.
If your site is composed of ten or fewer pages, it may not be necessary to include sublinks under all of the primary navigation elements.
Specifically: letterspacing may not be altered. Line breaks may not be inserted between individual list elements. If in doubt, follow the example shown above.
2.2 | Site Title
The site title:<h1>Site Title</h1>is the title of the site or sub-site; it corresponds to the navigation system of the site. It is located in the "titlegraphic" div.
2.3 | Page Title
The page title:<h2>Page Title</h2>is the title of the page. It is located in the "pagetitle" div.
For example, a site title might be "University Housing," and a page title might be "Residence Life And Halls."
The site title and page title must be in text.
Any promotional messages (for instance, the use of the "tagline" in former templates) should be placed in the maincontent area.
3.1 | Content Area There are many Content Area Resources available for developers on the WDN website.
3.2 | Photos To keep your content in harmony with the overall design of the page, a style has been created that allow you to simply crop a photo to a specific size and apply a CSS style to gain the border that are part of the visual design of the UNL '09 templates. More, and more specific, information can be found on the WDN site in the image styling resource. The use of these styles is optional, but if used, the styles must be used as supplied.
4.1 | Footer
Column 1 includes a "rate this page" tool.
Column 2 houses related links. These are links located outside of the site hierarchy, but may be relevant or an additional resource to your site visitors. For instance, in the case of University Communications, a related link might be UComm's corollary on East Campus, IANR's CIT.
Related links are not to be used as a navigational structure (ie. an interconnected network of pages).
Any link that can be accommodated within the primary, secondary, OR on a directory page linked from one of those navigational elements, should not be placed in the related links.
Column 3 contains the contact information for the site, including name, campus location, phone number, and an email contact if possible.
Column 4 contains a set of tools for sharing the page.
Copyright area The copyright area spans the full width of the page and must include the current year, unit name (when applicable), the 508, W3C, and CSS links, and the UNL wordmark image. Optionally, the UNL diversity statement may be included.
2.9 | Promotional images are optional and can be used within the maincontent area.
Sites must comply with the UNL CWIS Web Advertising and Sponsorship Policy.
9.1 | Stylesheet Overrides
No unapproved overrides of the UNL CSS are permitted.
[edit] Best Practices
Meta description tag Inclusion of unique page descriptions in the Meta description tag are encouraged to give web site viewers an accurate page description when served results from a search engine.
Title (encoded) The page title as encoded in the <title> tag should read as follows: UNL | Site | Page. In general, abbreviate all elements with the exception of the local page title.
[edit] Deprecated Elements
2.4 | Subsite Global Links (optional) These links appeared to the right of the title by developer option in the UNL.edu 2006 template. They were included in the template by request for developers of large sites with many subsites who wished to have some universal links available on every subsite. Since all parent levels of the site hierarchy are available at any level of the UNL.edu 2009 templates, these links have been deprecated.
