UNLedu 4.1 Style Book

On this page:

  1. Purpose
  2. Definition of Website
  3. Quality Checkpoints
  4. Header
  5. Presentational Sections
  6. Notable Changes
  7. Exceptions
  8. Advertising and Sponsorship
  9. Drafting Editors

1. Purpose

The UNLedu 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.

Our university's Web Developer Network Style Book has been created for web developers as a reference to implement websites using version 4.1 of the UNLedu Web Framework.

1.1 Consistency

Consistent use of the UNLedu Web Framework allows the user to learn how to use unl.edu. 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 Collaboration

We welcome and encourage contributions of new site elements. The 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 unl.edu. You can contribute code directly to the framework and other projects at the project repository.

1.3 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-"; 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 UNLedu Web Framework upgrade cycles. If you have styles that you think would be beneficial to the WDN, code contributions are always welcome.

1.4 Written Content

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

1.5 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 to build great sites on and 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.

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.

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

3.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 the current framework: UNL.edu framework synchronization information.

4. Header

4.1 Meta Description Tag

Inclusion of unique page descriptions in the Meta description tag are encouraged (and optional) to give website viewers an accurate page description when served results from a search engine. The meta description should not exceed 160 characters per SEO best practices.

4.2 Title Tag

The page title in the <title> tag should read: Page Title | Site Title | University of Nebraska–Lincoln. 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. Presentational Sections

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 (Internet and Interactive Media)
The site affiliation can be used to describe a relationship with two or more entities, but only if the relationship requires explanation

5.3 Navigation

The global navigation combines the breadcrumbs, primary navigation, and secondary navigation.

5.3.1 Breadcrumbs

Breadcrumbs are a link trail through hierarchy of the site back to the university's homepage. Breadcrumbs are required on all pages, with these exceptions.

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

5.3.2 Menu

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

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. Do not link to files such as PDFs or PowerPoint presentations.
  • Do not use decorative elements, such as images or separators.
  • Unless your website is only a few pages, you usually don’t want to link every page in the site from the navigation system.
  • Link labels should be clear and concise. Shorter is generally better.
  • Reduce the complexity of your navigation by thinking through the information architecture. Consider using a card sort.
Primary links
  • Your primary links describe groupings of related pages.
  • 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 .wdn-text-hidden 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. 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.

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

The same local footer 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)

A screen shot of the local footer from the Web Developer Network site
The local footer for the Web Developer Network site
  • 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.

A screen shot of the global footer
The global footer for all sites using the UNLedu Web Framework

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 top viewport edge and 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 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.

6.2 Deprecated

  • 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, e.g. zentable.

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