Style Book 2.0

From Web Developer Network Wiki
Jump to: navigation, search

This UNL '06 Web Developers' Style Book has been created for you as a UNL web developer as a reference to assist you in your adoption 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.


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 | UNL Identity All public sites and pages must carry a UNL graphic identifier at a size of 88 pixels wide or greater, and that graphic identifier must be linked to www.unl.edu.

0.4 | Favicon All sites and pages must display the UNL favicon; no other favicons are permitted.

Notes on Template Sections

Global Header

1.1 | Global Header This header is required on all template-based UNL web pages. It refers to the top level of the UNL website.

1.2 | Global Links in the global navigation are general in scope and are required on all UNL pages other than those based on the UNL secure template; if you have navigational headings in your local site that conflict with these primary links (eg. Faculty & Staff), add a modifier to your local heading (eg. CoJMC Faculty & Staff).

The "badge" element is reserved for use as a graphical link to application for admission on all academic sites and for a "secure" notification on any pages based on the UNL secure template. "Badge" graphics other than those officially supplied by the UNL templates are not permissible. The UNL-standard "Apply Now" graphic may not be used to link to any page other than the Application page at admissions.unl.edu.

2.1 | Breadcrumbs are a link trail through hierarchy of the site back to the main UNL website. Breadcrumbs should be used on all fixed width template pages. The initial breadcrumb should be "UNL" and linked to http://www.unl.edu/. The final breadcrumb should be the current page; this breadcrumb should not be 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 (see "Best Practices," below).

Title and subhead sample

2.2 | Title The title is the site title; it corresponds to the navigation system of the site and is limited to 35 characters.

2.3 | Subhead The subhead is a short, friendly promotional statement that helps describe the purpose or goals of the entity that the site represents or a designation of a subsite within a larger site. It may not be used as the title of a single page. Page titles should be placed in the maincontent editable area. The subhead is limited to 44 characters.

For example, a site title might be "University Housing," and a subhead might be "The Smart Move."

Use of a pagetitle graphic is no longer permitted. A separate graphical element is no longer required to render your site title in the official university sans-serif font URW Grotesk (in this case, URW Grotesk E Light Condensed). This typographical sleight-of-hand is accomplished using sIFR, or Scalable Inman Flash Replacement; browsers who do not have Flash installed will see these lines in regular text. If you want to know more about sIFR, Adobe has a good intro at http://www.adobe.com/devnet/dreamweaver/articles/sifr_demo.html.

Caution: because Flash needs to render each sIFR element in turn as it encounters them in the HTML code, pages with many sIFR-rendered elements will load slowly, with a gawky awkwardness on display as each element is first displayed as HTML, then rendered by sIFR. Please do not add additional sIFR elements.


Subsite Global Links sample

2.4 | Subsite Global Links (optional) These links appear to the right of the title. They are included in the template by request for developers of large sites with many subsites who wish to have some universal links available on every subsite. Please do not use these links for internal navigation within a subsite, or for navigation that is redundant to the local navigation, defined here as those links under the header "Navigation". As with all the other navigation lists of links, these should be placed within an unordered list element <ul>.


Navigation sample

2.5 | Site Navigation The navigational links listed herein are the primary navigation links on your site. Taken together, the page title should logically combine with the word 'navigation' in the navigation header to describe what links are found under this navigational element. All text in the navigation area must be linked.

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.

The navigation system displays the first five sublinks (list items) in each unordered list within the navigation section of your code. If there are seven or more sublinks (list items) in the navigation section, a 'more ... ' link will appear; clicking on it will reveal all list items in the unordered list in excess of five (a minimum 'reveal' of two sublinks). If there are six or fewer sublinks in a navigation section, the 'more ... link will not appear, but the sixth sublink will be accounted for as an 'extra' link. Developers are strongly urged to reduce the complexity of navigation systems so that there are no more than five sublinks in each navigation section.

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.

NOTE: a control panel for web applications, distinct from a navigation system for web pages, is under development as part of the standard UNL template set. Early versions of the web applications control panel are in use on the UNL Events system and within the WDN Registry. If you'd like to participate in the development of the UNL web applications control panel, including specific user interfaces for distinct classes of web applications, please enter the discussion on the WDN bulletin board.


Related Links sample

2.6 | Related links (links that are outside of this site hierarchy but which may be relevant or an additional resource to your site visitors) are listed separately, under a 'Related Links' heading. 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, subsite global links, OR on a directory page linked from one of those navigational elements, should not be placed in the related links.

Promotional image sample

2.9 | Promotional images are optional, but if included, they must be displayed as follows: promo images must be displayed below the navigation (in no circumstance should there by anything between your site title/subhead and the site navigation.) Due to file size considerations, promotional images should not use animated GIF. If animation is desired, Flash animation is recommended, but there should be some failover should the user's browser not have Flash enabled. A volunteer may be needed to determine a best practice for Flash failover in this instance that would be recommended to the Web Developer Network.

Promo graphics, whether in the promo area or elsewhere on the page, must comply with the UNL CWIS Web Advertising and Sponsorship Policy.


Content area sample

3.1 | Content Area The content area should always begin either with the title of the specific page or an image, under which the title of the specific page is given. There are several content area designs under development which will be included in the site CSS.

3.2 | Photos To keep your content in harmony with the overall design of the page, styles have been created that allow you to simply crop a photo to a specific size and apply a CSS style to gain the border and cast shadow that are part of the visual design of the UNL '06 templates. More, and more specific, information can be found in this documentation wiki under the header 'Using_image_shadow_boxes/containers.' The use of these styles is optional, but if used, the styles must be used as supplied.


Footer sample

4.1 | Footer There are two options for the footer. The copyright date, unit name (when applicable), address and phone number, unit comment contact (as either a mailto or an HTML form), and the CSS, W3C and RSS links, and the UNL wordmark image must be included. An expanded footer design (reference) is available for those who would like to add expanded information to the bottom of each page in their site. Generally, this information should be simply nuts-and-bolts information that is required to appear on the page but might be secondary or tertiary information.

9.1 | Stylesheet Overrides No unapproved overrides of the UNL CSS are permitted.

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.

Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox