UNLedu Web Framework Style Book, v. 4.0

The UNLedu Web Framework is a community property. Its core attributes are identity, consistency and learnability. In order to protect and extend those core attributes the Web Developer Network has developed this set of guidelines governing its use.

The UNLedu Web Framework provides a foundation of code and functionality on which UNL websites and web applications are built. Adherence to these guidelines will ensure that sites remain upgradeable as the framework advances through major and minor revisions.

Each of these items is intended to be understandable, consistent, and enforceable.

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'). This is a draft version; a committee of the WDN will further refine this document and governance processes supporting it and other guidelines and policies, during a series of meetings in the fall of 2014. An invitation to the first of these meetings will be sent to all registered WDN members pending the formation of a standing committee.

Consistent use of the various elements of the UNLedu Web Framework is what allows the user to learn how to use unl.edu. Inconsistent use of the elements will cause frustration for site users, as their expectations, developed through experience using other UNL web resources, go unrewarded on sites and pages that implement elements in an inconsistent way. User expectations are of primary importance in site usability, and consistency within and among UNL websites is what creates those expectations for users of our site.

Overriding CSS styles will likely result in unanticipated presentational issues as the changes in the overridden style interact in unpredictable — and usually undesirable — ways with other presentational code. For this reason, CSS overrides of WDN code are prohibited by WDN. Please see Section 9.1, below.

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 implement them consistently for all of the sites within UNL.edu. You can contribute code directly to the UNLedu Web Framework and other projects at the project repository.

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.

Definition of Site

For the purposes of this document, the WDN defines a site as a set of pages using a single site title, which is unique among all UNL sites. All sites are required to be registered on UNLwebaudit.

Quality Checkpoints

Several items are required of all UNL websites. These checkpoints give us a strong foundation to build great sites on. The following checkpoints are required of all UNL sites.

Most sites published through UNLcms in WYSIWYG edit mode should 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.

0.1 | Accessibility Compliance

All sites must comply with the Web Content Accessibility Guidelines 2.0, Level AA and Section 508 of the Rehabilitation Act.

Some automated tools to test web accessibility include WAVE, FAE and HTML_Codesniffer. The UNLwebaudit service automatically scans for accessibility. While automated tests provide a baseline, it is necessary to conduct manual reviews to ensure that pages are accessible.

0.2 | Validity

All pages within a site must validate according to their DOCTYPE declaration using the W3C specifications.

Please refer to the "QA Test" link in the footer of any framework based page. Framework pages follow the W3C standard for HTML5.

0.3 | Current Framework Version

All public sites and pages must be developed within the current version of the framework provided. The 4.0 version of the framework is the only actively-supported version.

Sites published through UNLcms will have the framework updated automatically. If your site is hosted on another server, it is your responsibility to maintain current framework: UNL.edu framework synchronization information.

0.4 | Favicon

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

0.5 | Responsive Design

All content must be optimized for each framework provided breakpoints, such that pages can be viewed on a variety of devices of variable sizes and orientations.

Presentational Sections

The following checkpoints ensure the integrity of the user-experience and branding throughout all UNL sites.

1.1 | UNL Global Header

This header is required on all UNL web pages. This includes the UNL graphic identifier, the site title, single sign-on, and the WDN search tool. The WDN search tool will use the UNL search appliance and the framework starting at version 4.0.25 will enforce this.

A screenshot showing the layout of the global header
The global header on UNL's website allows users to quickly orient themselves to university-wide resources.

1.2 | Navigation Breadcrumbs

The global navigation combines the following navigational elements: breadcrumbs, primary navigation, and secondary navigation. Secondary navigation is exposed on mouseover (desktop) or via a tap on the navigation icon (commonly referred to as the "hamberger icon").

Breadcrumbs are a link trail through hierarchy of the site back to the main UNL homepage. Breadcrumbs are required on all UNL pages (exceptions). The initial breadcrumb element is the text "UNL", linked to http://www.unl.edu/. The home page of the site must be included in the breadcrumbs. The final breadcrumb must be the current page and not an active link, except for the home page of a site. In general, all elements should be abbreviated with the exception of the local page title. Example: UNL > College > Department > current page. There must be no additional decorative elements in the breadcrumbs.

1.3 | Navigation Menu

The navigational links listed herein represent the information architecture of your site and include the primary and secondary navigation links.

  • All text in the navigation must be a link to a web page on the site (exceptions)
  • The navigation should contain no more than 6 primary navigation elements
  • Not all primary navigation elements must have secondary links
  • There must be no decorative elements in the navigation, such as images or separators

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 within the navigation section must be under that hierarchy; it should, taken together and without exception, be describable as "Web Developer Network navigation." If links outside of the site's hierarchy are required, provide those links in a main content section or in the Related Links section of the footer.

Your navigation system should contain primary and secondary links 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 secondary links within the navigation system. It is not advisable to link every page in the site from the navigation system, especially on very large sites.

Link labels represented in the navigation should be clear and concise: shorter is generally better; primary links, particularly, should fit on one line. Developers are strongly urged to reduce the complexity of navigation systems by investigating and optimizing information architectures. Consider using a card sort.

The UNL navigation system
The UNL site navigation tool is an expanding ribbon of links in this website; the website defined by the site title shown above the navigation.

2.1 | Site Title

The site title links to the homepage of the named site.

The UNL website site title, with example 'Web Developer Network' shown
The site title is linked to the site index page, and is related to the navigation.

2.2 | Site Affiliation

Placeholders exist for providing additional context to an ambiguous site title. An area preceding the site title is available for identifying the parent entities. An area following the site title is available for providing information about shared programs, entities or organizational affiliates. Any named entity in these areas should be linked to the home page of that entity.

Any promotional phrases or taglines should be placed in the content area of the page. The site title area should only be used to distinctly identify your site rather than provide a catchy marketing phrase.

A screenshot showing a line of textual context above a site title
A screenshot showing a line of textual context below a site title
Example layouts for site title context.

2.3 | Page Title

The page title describes the page content and must be an <h1>.

For presentation reasons, you may wish to insert the page title into the content area. You are welcome to do this with the understanding that the page title should still remain the first piece of content the visitor reads.

The UNL website page title, with example Grid Framework Documentation' shown
The site title is "Web Developer Network," and the page title is "Grid Framework Documentation."

3.1 | Content Area

The content area is the region between the header and footer of the page where the editor is free to add content and design. There are many Content Area Resources available for developers on the WDN website that meet validity and accessibility standards.

3.2 | Advertising and Sponsorship

Sites must comply with the UNL Web Advertising and Sponsorship Policy.

3.3 | Images

For mobile and accessibility reasons, embedded text should be avoided in images. The WDN provides recommended image styles and best practices.

3.3 | Video and Audio

For geographic availability, video and audio is recommended to be hosted on the UNL website. UNL provides media hosting via UNLMediahub and other resources. Accessibility laws require captioning and transcribing of video and audio.

4.1 | Footer

The same footer is required on all pages of the site as defined by the site title. It includes an optional section of related links, as well as required sections for contact information, the copyright and nondiscrimination statements, and other institutional links. (exceptions)

Related links is an optional section of the footer. If used, it must only contain links to relevant, external websites. For instance, a related link for the Office of Research and Economic Development might be the National Science Foundation. Related links are not to be used as a site navigational structure.

Contact Information should include the unit name, campus location, phone number, and an email contact if possible.

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

The UNL website page footer from UNL Today, the internal UNL homepage
The footer includes related links to items outside of this website's information architecture, copyright and contact info, feedback resources such as UNLchat and our confidential/anonymous incident reporting system, as well as graphical links to the Big Ten and CIC.

5.1 | Viewport Edge

The viewport edge contains anything that scrolls with the viewport (the screen/window of the browsing device).

Feedback System (UNLchat) will appear at the bottom viewport edge on all devices. UNLchat is the website visitor communication service that supports this feature with both email and chat. For more information on UNLchat, visit the UNLchat website. This feedback system must not be hidden or overridden on any site.

6.1 | Stylesheet Overrides

  • Styles that are defined within the UNLedu Web Framework and prefixed with "wdn" are protected and may not be modified.
  • Provided styles for HTML Elements may be modified as long as they are scoped to the main content area.

The WDN assumes no responsibility for locally defined styles. Maintaining local styles is the exclusive responsibility of the site owner at all times, including through UNLedu Web Framework upgrade cycles.

If you have styles that you think would be beneficial to the WDN, 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. The page title 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.

Noteable Changes to UNLedu Web Framework Features

The evolution of the framework sometimes necessitates changes that are not backwards compatible with previous versions. The following represent notable changes that were made to the framework that may affect content created in previous iterations.

Removed in this version

  • 2006 Grid. The 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 main content 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. This refers to the framework creating style selectors that do not contain a prefix of wdn_ or wdn-. 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.

Exceptions

The following sections outline exceptions to the checkpoints previously listed.

Navigation links that leave the site

A link to a "child" site that then displays the current site as a "parent" site in the breadcrumb trail may be linked from the site's navigation section.

Regions that may be conditionally hidden

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. For example:

<body class="hide-wdn_institution_title">

Each of the following areas is part of the UNLedu 4.0 Web Framework and is displayed by default.

  • hide-wdn_institution_title Institution title MAY be removed on affiliate sites.
  • hide-wdn_identity_management Identity Management MAY be removed on sites which utilize authentication mechanisms which are not connected to UNL Identity Management services.
  • hide-breadcrumbs Breadcrumbs MAY be removed on terminal pages.[1]
  • hide-wdn_navigation_wrapper The entire navigation wrapper MAY be removed on terminal pages.[1]
  • hide-pagetitle MAY be removed when the text matches the site title, or, in other words, is duplicated.
  • hide-wdn_footer_related MAY be removed on terminal pages.[1]
  • hide-wdn_footer_contact MAY be removed on terminal pages.[1]
  • hide-wdn_copyright The copyright section MAY be removed on pages intended to be used as MODAL dialog pages.
  • hide-wdn_attribution The WDN attribution MAY be removed on affiliate sites.
  • hide-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 direct links, but containing no UNL "child" links of their own, or transactional pages such as freestanding forms or web applications.

Drafting Editors

Please thank the following volunteers, listed in alphabetical order, that met multiple times in the fall of 2014 to draft the changes to this document and provide clarity on topics that were unclear in previous versions: Kevin Abel, Bob Crisler, Ryan Dee, Alan Eno, Michael Fairchild, Loren Frerichs, Matt Honke, Todd Lanham, Clay Lewis, Richard Lock, Spencer McCoy, Keith McGuffey, Jeff O'Brien, Saravanan Raju, Mike Sammons, Jennifer Thoegersen.