New Library Website Header

A few months ago I wrote a post about streamlining multi-page content into a single page. This design decision encourages the user to scroll through longer single pages rather than click through multiple pages. As our pages have become longer as a result, more content started to move farther away from the header, which contains our branding, global navigation menu, and the “Ask A Librarian” link. Our header contains this important information both for us and for the user, so we set out to design a new header to fit our longer pages.

With this impetus to design a new header, we aimed for a few overall improvements:

  • Fixed position
  • Responsive
  • Semantic
  • Slimmer
  • Simpler
  • Faster

Our existing header has been around since 2011pretty good really! And definitely time for an upgrade. Here’s a screenshot and the HTML markup for our existing header:

 

webpage screenshot

 

In keeping an iterative process in mind, our new header takes subtle steps forward while helping us realize a better website overall, one that’s lighter, faster, and more responsive.

 

MSU Library Website Header, 2011-2014

MSU Library Website Header, 2011-2014

MSU Library Website Header, 2014

MSU Library Website Header, Late 2014

 

The new header achieves some key things:

  • sticks to the top of the screen as the user scrolls through longer page content
  • responds to browser width and device size
  • has fewer HTTP calls, resulting in faster overall page load time and performance
  • includes a new icon font instead of an icon image, also benefiting performance (though icon fonts may not be as beneficial as SVG icons)
  • features semantic HTML5 tags
  • is 15% slimmer than the previous header
  • uses 32% fewer lines of HTML

 

Here’s a screenshot of the new header, an animated gif showing its responsiveness, and the HTML and CSS code behind it:

 

MSU Library Header, 2014

 

msu-library-header-new

 

We’re currently testing the header on a few notably longer pages before rolling it out site-wide. One question we will keep in mind as we continue to monitor and evaluate the header is the so-called hamburger icon, which some have said is not the best option for indicating a menu.

With the idea of perpetual beta in mind, this new header represents an ever-so-slight progression that enhances the experience of our users.

Leave a Reply

Your email address will not be published. Required fields are marked *