Style Book 3.1

From Web Developer Network Wiki
Jump to: navigation, search

This UNL 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 your website based on Version 3.1 of the UNL site templates.

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, great. If you think others might be able to use them, contribute. The Web Developer Network 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

For a style guide detailing guidelines for written content for web and other media, please refer to the UNL Style Guide.


Quality Checkpoints

The UNL Web Developer Network offers members unlimited opportunities to have other developers view and comment on your website(s). WDN Site Critiques are offered on Friday mornings beginning at 10 a.m. in 17 Wick Alumni Center. While the critiques are a great way to get the ideas of other developers on how to improve your site(s), there are also some things that are required of all UNL sites. These checkpoints give us a strong foundation to build great sites on. The following checkpoints are required of all UNL sites.

NOTE: Most sites published through UNLcms will pass these zero-level checkpoints automatically. Modifying the HTML directly may cause your site to fail one or more of these checkpoints.

The zero-level checkpoints, required for all sites and pages within the domain, are as follows:

0.1 | Compliance All sites must pass the WAVE and FAE tests for accessibility compliance (generally, this means that sites will be compliant with the Web Content Accessibility Guidelines 2.0, Level AA), as well as Section 508. Please refer to the 'QA Test' link in the footer of any UNL Templates 3.1-based page.

Please note that if you are using the jQuery randomizer plugin for information that is anything other than promotional, said information must also be located on another page on your site.

If you choose to use IFRAME elements, WAVE and FAE must be run against the URL exposed in the IFRAME.

0.2 | Validity All sites must be composed of valid code and must carry a DOCTYPE declaration. Please refer to the 'QA Test' link in the footer of any UNL Templates 3.1-based page.

0.3 | Current Template and Dependents Version All public sites and pages must be developed within the current version of the templates provided. Sites published through UNLcms will have the template and dependents updated automatically. If your site is hosted on another server, it is your responsibility to maintain current template and dependents: template synchronization information. The current version of the templates is the only actively-supported version.

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 | UNL Global Header This header is required on all template-based UNL web pages. This includes the UNL graphic identifier, the site title, the search element, and site tools (depending on screen size).

Navigation Breadcrumbs

1.2 | Navigation Breadcrumbs The global navigation combines two separate elements generally 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 UNL pages. The initial breadcrumb must be "UNL" and linked to The final breadcrumb must be the current page and not an active link. In general, all elements should be abbreviated with the exception of the local 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.

Link labels represented in the navigation should be clear and concise; primary links, particularly, should fit on one line if possible.

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 by investigating and optimizing information architectures.

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.

Within the navigation element, letterspacing may not be altered. Line breaks may not be inserted between individual list elements. If in doubt, follow the example shown above.

Site Title sample

2.2 | Site Title The site title is the title of the site or sub-site; it corresponds to the navigation system of the site. It is located in the "titlegraphic" region. Site Title automatically links to the homepage of the website, unless the Site Affiliation has been added and linkages have been applied. If this is the case then the link tags must be added to the Site Title to make the link active.

2.21 | Site Affiliation

The site affiliation:
Site Title <span>Affiliation</span>
is an optional way to define affiliation with a college or unit, especially for shared programs in different colleges.

For example, a site title might be “Department of Computer Science and Engineering” and the affiliation might be “A part of the College of Arts & Sciences and the College of Engineering.” The Site Affiliation is currently styled to change text to all capital letters. If the affiliation is desired to be an active link then the link tags must be applied to the appropriate text. By applying the linkages this will disconnect the Site Title from being an automatic link back to the site's home page.

2.3 | Page Title

The page title:
<h1>Page Title</h1>
is the title of the page. It is located in the "pagetitle" region. It should be the only h1 element on the page.

For example, a site title might be "University Housing," and a page title might be "Residence Life and Halls."

Promotional image sample

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.

Content area sample

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.

Footer sample

4.1 | Footer

Column 1 includes a "rate this page" tool and a general site comment form.

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 EdMedia.

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 QA test link, and the UNL wordmark image. Optionally, the UNL diversity statement may be included.

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: Page Title | [ Site Title |] University of Nebraska–Lincoln. In general, the Site Title can be abbreviated or omitted unless necessary for context.

Removed (Deprecated) Template Features

Tagline The 2006 templates introduced a location to provide a marketing tagline under your site title. This section has been removed and the styles are no longer supported. If you are using a tagline, please remove it. If you are using the tagline markup to provide affiliation information, please consider using the new affiliation markup in the site title.

Apply Now Badge The 2006 templates included an image that could be anchored to the top of pages to direct users to the admissions pages. This image is no longer distributed or supported. If it is still in your HTML, it should be removed.

WDN Region Show/Hides

To utilize the hidden regions, you must add the appropriate class names to your body element. The class names are the hidden region preceded by hide-. For example:

<body class="hide-wdn_search">

Each of the following areas should have a region displayed.

wdn_institution_title Institution title MAY be removed on affiliate sites.

wdn_identity_management Identity Management MAY be removed on sites which utilize authentication mechanisms which are not connected to UNL Identity Management services.

wdn_search WDN Search MAY be removed within sites that feature localized search capabilities which may confuse the end-user or provide different results than the GLOBAL search results service built within the UNL templates.

wdn_tool_links WDN Tool Links MAY be removed on affiliate sites and terminal pages.

wdn_navigation_wrapper The entire navigation wrapper MAY be removed on terminal pages.

breadcrumbs The breadcrumbs MAY be removed on terminal pages.

wdn_navigation_wrapper The primary and secondary navigation bar MAY be removed on terminal pages.

page_title MAY be removed when the text matches the site title, or in other words is duplicated.

footer The footer region MAY be removed on pages which are intended to be displayed as MODAL interfaces.

footer_floater The footer floater, which includes the N circle icon, MAY be removed on affiliate sites.

wdn_footer_feedback The feedback form MAY be removed on pages which present a feedback from within the main content area.

wdn_footer_related MAY be removed on terminal pages.

wdn_footer_contact MAY be removed on terminal pages.

wdn_footer_share MAY be removed on terminal pages.

wdn_copyright The copyright section MAY be removed on pages intended to be used as MODAL dialog pages.

wdn_attribution The WDN attribution MAY be removed on affiliate sites.

wdn_logos The WDN logos, including the UNL wordmark, Big Ten logo and CIC logo, MAY be removed on affiliate sites.

Personal tools