UNL Web Framework 5 Standards Guide

1. Purpose

The UNL Web Framework is a community property that provides a foundation of code and functionality on which University of Nebraska–Lincoln websites and web applications are built. Its core attributes are identity, consistency and learnability. These guidelines protect and extend those attributes and ensure that websites remain upgradeable as the framework advances through major and minor revisions.

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

This Standards Guide has been created for web developers as a reference to implement websites using version 5 of the UNL Web Framework.

1.1 Consistency

Consistent use of the UNL Web Framework allows the user to learn how to use our website. Inconsistent use will frustrate site users, as their expectations, developed through experience using other university web resources, go unrewarded on sites and pages that implement elements in an inconsistent way. User expectations are important in site usability, and consistency within and among university websites creates those expectations.

1.2 Brand Assets

The UNL Web Framework, implementing the UNL brand and trade dress, is considered a core brand asset of the University of Nebraska–Lincoln. It is associated with the domain name, "unl.edu." UNL websites must use the UNL Web Framework and be hosted on the unl.edu domain, unless an exception is approved by the WDN Shared Governance Board.

1.3 Collaboration

We welcome and encourage contributions of new site elements. The Web Developer Network (WDN) is the hub of collaboration for the framework and 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 the UNL domain. You can contribute code directly to the framework and other projects at the project repository.

1.4 CSS Overrides

Overriding CSS styles will likely result in unanticipated issues since the changes in the overridden style can interact in unpredictable and undesirable ways with other code.

  • Do not modify styles prefixed with wdn-, dcf- or unl-; they are protected.
  • 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 UNL Web Framework upgrade cycles. If you have styles that you think would be beneficial to the WDN, code contributions are always welcome.

1.5 Written Content

Use the University Style Guide for written content for web and other media.

1.6 File Names

All files should have a name that is short and descriptive of its content, with words separated by hyphens, not spaces.

2. Definition of Website

For the purposes of this document, the WDN defines a website (or site) as a set of pages using a single site title, which is unique among all University of Nebraska–Lincoln sites. All sites are required to be registered on Web Audit.

2.1 Sitemap

A sitemap.xml file should be defined that lists all of the pages in your site. The sitemap can be used by search engines to improve the discovery of pages on your site. Some search engines might automatically find this, but it is best to manually submit it to the search engine.

3. Quality Checkpoints

These checkpoints give us a strong foundation on which to build great sites; they are required of all University of Nebraska–Lincoln websites.

Please ensure that you have a working knowledge of HTML, including validity and standards-conformance, before attempting to directly edit code. The “QA Test” link in the footer of any framework-based page goes to the latest Web Audit report for that page.

3.1 Accessibility Compliance

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

The university's Web Audit service automatically scans for accessibility. While automated tests provide a baseline, it is necessary to conduct manual reviews to ensure that pages are accessible.

3.2 Validity

All pages within a site must validate according to the W3C standard for HTML5.

The university's Web Audit service automatically scans for validity.

3.3 Current Framework Version

All public sites and pages must be developed and maintained within the current version of the framework provided. As of January 2, 2019, Version 5 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 the current framework: unl.edu framework synchronization information.

4. Head

4.1 Meta Description Tag

Inclusion of unique page descriptions in the meta description tag are encouraged to give website viewers an accurate page description when served results from a search engine. Although you can write a meta description of any length, Google typically truncates snippets to the recommended length of 160 characters.

4.2 Title Tag

The page title in the <title> tag should read: Page Title | Site Title | Nebraska. In general, the Site Title can be abbreviated or omitted unless necessary for context. The title element should not exceed 60 characters per SEO best practices.

5. Body

5.1 Favicon

All sites and pages must display the University of Nebraska–Lincoln favicon. No other favicons are permitted.

5.2 Global Header

This header is required on all pages and includes the institution title, the Nebraska N, the site title, optional site affiliation, single sign-on, and the WDN search tool. The WDN search tool must use the University of Nebraska–Lincoln search appliance for a consistent user experience.

A screen shot showing the layout of the global header.
The global header allows users to quickly orient themselves to university-wide resources.
5.2.1 Site Title

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

A screen shot of the site title, with example 'University Communication' shown.
The site title is linked to the site's index page, and is related to the navigation.
5.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 identify your site. Any named entities in these areas must be linked to the home page of that entity.

A screen shot shows the site affiliation (A partnership of University Communication and Information Technology Services) above the site title (Digital Experience Group).
The site affiliation can be used to describe a relationship with two or more entities, but only if the relationship requires explanation

5.3 Site Navigation

Site navigation combines the menu and breadcrumbs.

5.3.1 Menu

The navigational links in your menu represent the information architecture of your site and include the primary and secondary navigation links. These must be styled in Title Case.

5.3.2 Breadcrumbs

Breadcrumbs are a link trail through hierarchy of the site back to the university’s homepage. Breadcrumbs are recommended on all pages except the home page.

  • The initial breadcrumb element is the text “Nebraska”, linked to https://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: Nebraska > College > Department > current page. There must be no additional decorative elements in the breadcrumbs.

A screen shot of the navigation system.
The site navigation tool is an expanding ribbon of links in this website; the website defined by the site title shown above the navigation.
All links
  • You should be able to describe the links in the navigation by combining your site title with the word "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.
  • Text in the navigation should generally be a link to a web page on the site, with these exceptions. Files such as PDFs, PowerPoint presentations, or Word documents should not be linked in the navigation.
  • Do not use decorative elements, such as images or separators.
  • Reduce the complexity of your navigation by thinking through the information architecture. Consider using a card sort.
  • Link labels should be clear and concise. Shorter is generally better.
Primary links
  • The navigation should contain no more than 6 primary navigation elements.
  • Primary link titles should fit on one line.
Secondary links
  • Secondary navigation is exposed on mouseover (desktop) or via a tap on the navigation – or “hamburger” – icon.
  • A selection of links, usually the highest-priority links in these sections, should be represented as secondary links.
  • Secondary navigation is not required.

5.4 Content Area

The content area is the region between the header and footer of the page where the editor may add content and design. Content area resources and brand guidelines are available.

Avoid duplicate or redundant content (including multiple home page URLs). Any copyrighted content (e.g., copy, images, videos) must be lawfully obtained and properly attributed.

5.4.1 Headings

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

A screen shot of the page title, with example 'Contribute' shown.
The page title is "Contribute."

It’s a best practice to always display a page title. If you need to visually hide a page title for presentation purposes, apply the class .dcf-sr-only to the <h1>.

Ensure that the remaining headings (<h2><h6>) accurately reflect the order and hierarchy of the page content. Do not use headings based solely on font-size.

5.4.2 Images

For mobile and accessibility reasons, embedded text should be avoided in images. Image alt text varies depending upon the type of image and how it is used. See the Web Accessibility Initiative website to determine how to write proper image alt text in various situations. Images should be appropriately sized and optimized (compressed). The WDN provides recommended image styles and best practices.

5.4.3 Video and Audio

To avoid having your content blocked (e.g. restrictive countries or companies, K–12 schools), we recommend hosting video and audio from the unl.edu domain. That way, on every domain where our website is available, videos embedded in the pages are available as well. 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 MediaHub.

5.4.4 Responsive Design

All content must be optimized for each framework-provided breakpoints so that pages can be viewed on a variety of devices’ sizes and orientations.

A screen shot of the footer from the University Communication site.
The footer provides supporting information to site users, including 'global' information about the university as a whole.

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

  • Contact Information should 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 only contain links to relevant external websites, not for pages on your website. For instance, a related link for the Office of Research and Economic Development might be the National Science Foundation.
  • Privacy policy extension (if you have one) must be linked in the bottom of the first column under contact information. See documentation for privacy policy extensions.

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

5.6 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 bottom of the viewport edge on mobile devices on page load and when scrolling up. UNLchat will appear at the bottom viewport edge on all devices. Do not hide or override them.

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

6. Notable Changes

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.

6.1 Deprecated

Below are items that are marked for future removal.

  • CSS class names not conforming to a namespace. This refers to the framework creating style selectors that do not contain a prefix of dcf- or unl-. This includes all wdn- and wdn_ classes.

Timeline: These items are scheduled to be removed with the release of 5.1 in January 2020.

6.2 Removelog

  • Site Affiliation under Site Title. 4.1 removes the ability to place the affiliation under the site title.
  • 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. The CSS class still exists, but the <h3> element was removed, which improved the university's accessibility profile by providing better document structure.
  • 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 add it to 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.

7. Exceptions

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.

7.2 Regions that may be conditionally hidden

To use the framework’s hidden regions features, check the rule associated with each region below. To implement, add the appropriate class names to your body element. For example: <body class="hide-wdn_institution_title">

Each of these areas is part of the 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 university Identity Management services.
  • hide-breadcrumbs Breadcrumbs may be removed on terminal pages.
  • hide-wdn_navigation_wrapper The entire navigation wrapper may be removed on terminal pages.
  • 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.
  • hide-wdn_footer_contact may be removed on terminal pages.
  • 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 (Nebraska N, University of Nebraska–Lincoln wordmark and Big Ten logo) may be removed on affiliate sites.

7.3 Terminal Pages

Pages that are freestanding documents retrieved through direct links, but containing no university “child” links of their own, or transactional pages such as forms or web applications.

7.4 Non-template approved publications

8. Advertising and Sponsorship

Sites must comply with the university’s Web Advertising and Sponsorship Policy.

9. 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, Becky Aiken, Mike Bergland-Reise, Erin Chambers, Bob Crisler, Ryan Dee, Alan Eno, Michael Fairchild, Loren Frerichs, Anne Holz, Matt Honke, Todd Lanham, Clay Lewis, Richard Lock, Kyle Martens, Spencer McCoy, Keith McGuffey, Dave Merriman, Jeff O’Brien, Mike O’Connor, Saravanan Raju, Mike Sammons, Melissa Sinner, and Jennifer Thoegersen.