On this page:
- Definition of Website
- Quality Checkpoints
- Presentational Sections
- Notable Changes
- Advertising and Sponsorship
- Drafting Editors
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.
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.
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.
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
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.
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.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
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.
5.2.1 Site Title
The site title links to the homepage of the named site.
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.
The global navigation combines the breadcrumbs, primary navigation, and secondary navigation.
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.
The navigational links in your menu represent the information architecture of your site and include the primary and secondary navigation 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 from the navigation.
- 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.
- 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 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
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.
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. If you need to visually hide a page title for presentation purposes, apply the class
.wdn-text-hidden to the
Ensure that the remaining headings (
<h6>) accurately reflect the order and hierarchy of the page content. Do not use headings based solely on font-size.
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.
5.5.1 Local Footer
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)
- 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.
5.5.2 Global Footer
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 top viewport edge and UNLchat will appear at the bottom viewport edge on all devices. Do not hide or override them.
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.
- 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.
- 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.
7.1 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.
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:
Each of these areas is part of the framework and is displayed by default.
hide-wdn_institution_titleInstitution title may be removed on affiliate sites.
hide-wdn_identity_managementIdentity Management may be removed on sites which utilize authentication mechanisms which are not connected to university Identity Management services.
hide-breadcrumbsBreadcrumbs may be removed on terminal pages.
hide-wdn_navigation_wrapperThe entire navigation wrapper may be removed on terminal pages.
hide-pagetitlemay be removed when the text matches the site title, or, in other words, is duplicated.
hide-wdn_footer_relatedmay be removed on terminal pages.
hide-wdn_footer_contactmay be removed on terminal pages.
hide-wdn_copyrightThe copyright section may be removed on pages intended to be used as modal dialog pages.
hide-wdn_attributionThe WDN attribution may be removed on affiliate sites.
hide-wdn_logosThe 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.