About UNL Web Framework 5

It has been almost five years since UNLedu Web Framework 4 was released in the summer of 2014. By any measure (global reach, pageviews, impact), websites based on Framework 4 have been a success. Framework 4's mature responsive-design underpinnings allowed us to flexibly adapt to a new universe of web-consumption devices. Working together, we picked up some impressive accolades in the higher ed web development community, including the top honor, ‘Best Overall Website,’ given by eduStyle, then the higher ed industry’s preeminent web design publication.

chart showing mobile share growth from very little in 2011 to around 50 percent in 2018

Our website is visited by millions of people from around the globe in a calendar year; along the way they request over 100 million pages a year. In many ways the website, collectively, and all of the college, departmental and unit sites that make it up ... in many ways it IS the university to anyone who has never set foot on campus. So it needs to be really good; and not just "it was really good once," but it IS really good, particularly when judged against the best sites of its time. Accordingly, it must evolve.

Now, it's time once again to make changes to the foundations of the website, to rebuild and refresh the university online. UNL Web Framework 5 is being released to developers today in preparation for site transitions to take place over the next two months.

Today, we are updating the foundations of the website, not only to refresh the look and feel but to also rebuild the base structure to make it faster and development more agile. At this moment developers can begin implementing Framework 5 to transition their sites ahead of the official launch on Jan. 2 at 3 p.m.

Changes you'll see include a refreshed look, with a more open and friendly appearance. The narrow 'Tungsten' font, which has been criticized for its "hard/techno" appearance, has been largely retired in this version of the site, with the easygoing Gotham replacing it in almost all instances.

We've kept many of version 4's visual cues in place, such as navigation in a red ribbon, but we're merging more and more from the mobile experience into the desktop experience. First, let's go over differences; things that may require an adjustment or re-think on the part of users. On your part.

Accordingly, it must evolve.

The biggest, but perhaps most subtle, of these differences is a shift to navigation systems based on topics (for instance, "admissions"), rather than on user identity ("prospective student"). We've long noted this shift occurring in the broader higher ed community and decided this time that we could wait no longer. A culmination of third-party research, and our own review of over 100 large higher ed websites led us to a new set of primary navigational labels at the top level of the UNL website: About | Academics | Admissions | Life at Nebraska | Research | Outreach and Impact. We anticipate that these will roll out slowly over the next year until our customary way of thinking about content, and labels in navigation, is to label the content rather than to attempt to label the expected user.

After almost a decade of existence, our use of breadcrumbs as a functional part of the navigation system is being retired. What's that, you say? Well, you're not alone ... most people never discovered that you could use breadcrumbs in the navigation system to move up to higher levels in the navigational hierarchy. We always thought it was what the word "neato" was invented for. Use of that feature was infrequent, though, and came at the expense of some glitchiness in navigational display. We thought long and hard about retaining it, but ultimately decided, with a lot of input and conversation, to use breadcrumbs in a more standard way. As we're trying to merge desktop and mobile experiences as much as possible to promote learnability, it just made more sense to not have different behaviors for these standardized navigational elements as one went from small display to large display.

New to the header area on desktop is a group of three links to the immediate left of the search: visit, apply, give. These allow supporters and people interested in the university quick access to resources that support their intent.

Speaking of search, search results in Framework 5 are now shown using the entire display area rather than a constrained 'flag;' this may allow us to better communicate the two 'scope modes' of search results in the UNL website. If you're not aware, the search system returns results scoped first to the current website you're on (if you're on the Physics site, the results you see are scoped to that site), and provides an "All of UNL" tab to display the results for the same search for the entire university website. While we're still working on the search layout, we anticipate that we'll be able to display both search results modes in at least some widths.

On thing you may not see, but you may otherwise sense, is a focus on performance in this release. We're using more bare-metal web technologies in Framework 5 to make the experience of using our website more immediate. Research has shown that users are losing patience with slow load times on websites. (info here on page abandonment) Mobile use of our website — in terms of pageviews — is today almost equal to use through desktop and laptop computers. We're focusing on performance, and we hope you'll — at least on some level — notice the difference.

CSS Grid is a new way of looking at the problem of rendering a usable website to the thousands of screen sizes in existence.

Speaking of things you may not notice right away, but may over time ... Framework 5 will be one of the first major websites in higher ed to be built on the next-generation foundation of CSS Grid. Rather than get super-techy here, we'll explain it this way. You've probably heard of responsive design if you've heard of any web technology. Basically, responsive design allows us to build one web page that can flexibly display in an optimized way across the thousands of display sizes in existence. Responsive design is made possible by a creative marriage of JavaScript and CSS, but it should be noted that neither of those technologies were built with that capability in mind.

CSS Grid is a new way of looking at the problem of rendering a usable website to the thousands of screen sizes in existence, and since early this spring it's been built into every browser save Internet Explorer. It lets the browser itself, rather than external JavaScript libraries, take the entire load of rendering, and it's much faster and more capable. Our goal is to get the first indication that something's going on, after the user clicks or taps, down to one second. Google PageSpeed refers to this as "first contentful paint," and we're going to measure ourselves by that metric. (And don't despair; we'll have some "shims" in the code for IE. Some things never change. Except if you're using IE, you should change your browser; if you want to stay in the Microsoft family, Edge is a perfectly fine, modern browser.)

CSS Grid, though, if it were only about performance, would be a fail. But it's a lot more than that. The CSS Grid module and other CSS3 properties will allow developers new tools and new possibilities for designing and animating content within the standard web toolkit. It's a little like going from the 16-color Crayola set to the 64-color one (with built-in sharpener!), and as we're one of the first in higher ed to implement it sitewide, we'll have first-mover advantage, at least for a while, much as we did with our sitewide upgrade to responsive design in 2012. We'll see the results roll out over the life of Framework 5 as web developers at Nebraska revisit and redesign our "digital campus."

Expect to see a refreshed UNL.edu website as you return from holiday break. We hope you like it.

Framework 5 is almost here!

Official launch is January 2 at 3PM. That's 1/2 @ 3pm.


If you have any concerns, or questions, or comments, please join us at a monthly WDN meeting, at a WDN Shared Governance Board meeting, or in the WDN Chatroom.