UNLedu 4.1 Style Book

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.1 of the UNLedu Web Framework (the 'templates').

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 6.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 the W3C standard for HTML5.

Please refer to the "QA Test" link in the footer of any framework based page.

0.3 | Current Framework Version

All public sites and pages must be developed within the current version of the framework provided. The 4.1 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, optional site affiliation, single sign-on, and the WDN search tool. The WDN search tool must use the UNL search appliance to provide consistent user experience.

A screen shot 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 "hamburger 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). Files such as PDFs, Power Point presentations, etc. must not be links in the navigation.
  • 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.

A screen shot of 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.

A screen shot of 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

An optional "affiliation" area exists for providing hierarchical context to a site title. The site title area must only be used to distinctly identify your site. Any named entities in these areas must be linked to the home page of that entity.

Recommendations:
  • College of Omnibus
  • College of Omnibus · College of Artibus
  • A partnership of Office of Omnibus and Office of Artibus (only if the relationship requires explanation)
A screen shot showing the site affiliation above a site title in the header
Example layouts for site title context.

2.3 | Page Title

The page title describes the page content and must be an <h1>. There must be only one <h1> per page. This is necessary for accessibility and Search Engine Optimization (SEO).

It's a best practice to always display a page title, however, if you need to visually hide a page title for presentation purposes, apply the class .wdn-text-hidden to the <h1>.

A screen shot of 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. Images must have meaningful alt text that describes the content of the image. Images should be appropriately sized and optimized (compressed). The WDN provides recommended image styles and best practices.

3.3 | Video and Audio

To avoid having your content blocked (e.g. restrictive countries or companies, K–12 schools), video and audio is recommended to be hosted from the UNL domain. Videos should be appropriately sized and optimized (compressed). Accessibility laws require captioning and transcribing of video and audio. Media hosting and captioning services are available via UNLMediahub

4.1 | Local Footer

The same local footer is required on all pages of the site as defined by the site title. It includes the required section for contact information and optional sections for social media and related links. (exceptions)

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

Social media is an optional section that is located adjacent to—and shares a heading with—the contact information.

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

If your site has a privacy policy extension, it must be linked in the bottom of the first column (under contact information). See documentation for privacy policy extensions.

A screen shot of the local footer from the Web Developer Network site
The local footer for the Web Developer Network site

4.2 | Global Footer

The global footer is required and must be used as supplied with all template documents.

A screen shot of the global footer from the Web Developer Network site
The global footer for all sites using the UNLedu Web Framework

5.1 | Viewport Edge

The viewport edge contains anything that scrolls with the viewport (the screen/window of the browsing device). The "sticky" navigation will appear at the top viewport edge and UNLchat will appear at the bottom viewport edge on all devices. Neither must be hidden or overridden on any site. UNLchat is the website visitor communication service that supports this feature with both email and chat.

A screen shot of the UNLchat application that should appear near the bottom viewport on all UNL sites
UNLchat should appear near the bottom viewport edge of all UNL sites

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

  • Site Affiliation under Site Title. 4.1 removes the ability to place the affiliation under the site title.

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

  • 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.
  • 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.1 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

This document is maintained by the WDN Shared Governance Board.

Please thank the following volunteers who have contributed to versions of this document: Kevin Abel, Erin Chambers, Bob Crisler, Ryan Dee, Alan Eno, Michael Fairchild, Loren Frerichs, Anne Holz, Matt Honke, Todd Lanham, Clay Lewis, Richard Lock, Spencer McCoy, Keith McGuffey, Dave Merriman, Jeff O'Brien, Saravanan Raju, Mike Sammons, Melissa Sinner, and Jennifer Thoegersen.