Style Book 4.0

From Web Developer Network Wiki
Jump to: navigation, search

This UNL Web Developer Network Style Book has been created for UNL web developers as a reference to assist in implementation of websites based on Version 4.0 of the UNLedu Web Framework (the 'templates').

Consistent use of the various elements of the UNL 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.

Contribution of new site elements that may be useful to others are welcome and encouraged. The Web Developer Network is the hub of all collaboration and contributions to this effort. As a group, the WDN will acknowledge, challenge and refine good ideas, collaborate to turn good to great, and develop methods to use them consistently for all of the sites within You can contribute code directly to the UNLedu Web Framework and other projects at the project repository.

The UNL Web Developer Network offers members opportunities to have other developers view and provide constructive feedback on your website(s). WDN Site Critiques are offered on Friday mornings beginning at 10 a.m. in 17 Wick Alumni Center.

For a style guide detailing guidelines for written content for web and other media, please refer to the UNL Style Guide. For other resources on developing content for the web, visit the Communicators Forum website.


Quality Checkpoints

Several items are required of all UNL websites. 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. Please ensure that you have a working knowledge of HTML, including validity and standards-conformance, before attempting to directly edit code, either within the UNLcms code view (or code view in other CMSes) or by development outside of a CMS.

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. WAVE and FAE are included in the page referenced by the 'QA Test' link in the footer of any UNLedu 4.0-based page.

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 UNLedu 4.0-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, single sign-on, site tools, and a search field.

Navigation Breadcrumbs

1.2 | Navigation Breadcrumbs The global navigation toolset combines navigational elements generally known as breadcrumbs, primary and secondary navigation. Secondary navigation is exposed on mouseover (desktop) or click (mobile).

Breadcrumbs are a link trail through hierarchy of the site back to the main UNL homepage. Breadcrumbs are required to be used on all UNL pages. The initial breadcrumb element is the "home" icon, 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. For more information on adding intermediate breadcrumbs on your UNLcms site, visit the breadcrumbs guide page at UNLcms.

The navigational links listed herein represent the information architecture of your site and include the primary and secondary navigation links. 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 'Web Developer Network,' all of the navigation displayed as the primary site navigation should be under that hierarchy; it should be describable as "Web Developer Network navigation."

Your navigation system should contain primary and secondary links (sublinks) whereby your primary links describe groupings 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.

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 twelve 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 and 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. This area is intended only for use as an extension of the site title for shared programs or entities. Any promotional phrases or taglines should be placed in the content area of the 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 must 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 Web Advertising and Sponsorship Policy.

3.1 | Content Area There are many Content Area Resources available for developers on the WDN website.

3.2 | Photos Borders and captions are applied by using a CSS style as part of the visual design of the UNLedu 4.0. 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. Please ensure, when working with photography, that you have a working knowledge of size requirements and photographic compression to keep load times manageable.

Footer sample

4.1 | Footer

BANDS This footer is required on all UNL web pages. It includes a 'band' of related links, as well as sections for Contact Us, and the copyright and nondiscrimination statements.

Related links are located outside of the site hierarchy, but may be relevant or an additional resource to your site visitors. For instance, in the case of the Office of Research and Economic Development, a related link might be the National Science Foundation.

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.

Contact Us contains the contact information for the site, including name, campus location, phone number, and an email contact if possible.

Copyright, Ownership and Nondiscrimination Statement must include the current year, unit name (when applicable), an optional 'maintained by' attribution if the maintainer differs from the ownership unit, the QA test link, and the UNL wordmark image. The UNL diversity statement must be included. The short version of the diversity statement is acceptable for this purpose. The official 'short' statement is as follows: "The University of Nebraska-Lincoln is an equal opportunity educator and employer."

5.1 | Viewport Edge

Feedback / Chat is represented by a small tab that will appear at the bottom viewport edge on all device UIs. UNLchat is the constituent-communciations service that supports this feature. When a live operator is available, this tab is highlighted blue and automatically opens a chat window to that operator upon activation by the user. If no operator is available, the tab appears gray and allows the user to submit a comment to the registered site owner(s). For more information on enabling UNLchat on your site, visit the UNLchat website.

9.1 | Stylesheet Overrides No unapproved overrides of the UNL CSS are permitted. Style names defined within the body of CSS styles distributed by UNLedu 4.0 are protected. Embellishments to these styles implemented by overriding these class names cannot be anticipated or supported through upgrade cycles and are therefore not permitted. If you have custom styles that you think would be beneficial to the entire web community, code contributions are always welcome.

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 (previously deprecated) UNLedu Web Framework Features

Removed in this version

2006 Grid The maincontent grid introduced in 2006 was deprecated (marked for removal) in 2009 when UNLedu 3.0 was launched. Support is removed in this version.

Zenboxes These elements were introduced in 2006 to support call-out boxes and supplementary links. Innovation by site developers within the maincontent area has rendered them obsolete. In addition, their removal improves UNL's accessibility profile by providing better document structure, by eliminating the required <h3> element embedded in the zenbox styles.

Deprecated in this version

CSS class names not conforming to a namespace A few class names not conforming to a namespace remain in UNLedu 4.0. Future point releases of the UNLedu Web Framework will fully adopt namespace-based class naming conventions. As a result, new class names (and class definitions) will be developed to replace current nonconforming classes, eg. zentable.

Removed in earlier versions

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 from this location and consider it for inclusion in your page content. 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 UNLedu Web Framework's hidden regions features, first examine the rules associated with each region given below to determine applicability to your use case. To implement, 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 is part of the UNLedu 4.0 Web Framework and is displayed by default.

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

breadcrumbs The breadcrumbs MAY be removed on terminal pages.

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

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

wdn_footer_related MAY be removed on terminal pages.

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

1 Terminal Pages as a definition, encompasses both pages that are freestanding documents retrieved through upstream links, but containing no UNL 'child' links of their own, or transactional pages such as freestanding forms or web applications.

Personal tools