Redesign prototype: v0.2.0

Improvements

Welcome to v0.2.0! You'll see some of the design / information architecture changes quickly, but at this point in the project there's more work going on under-the-hood. For this iteration, let's talk briefly about some of the tools we're using to make the new homepage. After I nerd-out a bit, we'll chat design.

Technology

Colophon

• HTML5 / CSS3 / JS
• Bootstrap 3.0
• Font Awesome
• Google WebFonts
• Yeoman / Grunt / Bower

We're committed to web standards, so it shouldn't come as a surprise we're using HTML5 / CSS3 / JavaScript (jQuery) to build this new site. And, as we're pursing a responsive design, we're leveraging the lovely and newly released Bootstrap 3.0 framework to provide us simple tools to build a site optimized for all kinds of devices.

Likely you are familiar with web fonts (we're using Google Fonts), and using font-based icons (Font Awesome), but I suspect few of you are familiar with: Yeoman, Grunt and Bower. These guys are a flight of tools to assist in scaffolding a project, running common tasks/chores and declaring code dependencies.

For our purposes, Grunt is far and away the star of the show. Using Grunt, we've written code to concatenate and minify our CSS and JS files, optimize our images using OptiPNG, pngquant, jpegtran and gifsicle, and fingerprint our assets so browers will cache everything super efficiently -- this helps load our page quick.

Speed Optimization

Someday, I'll write a few blog posts specifically focusing on performance. For now, I'd just like to point out we've shaved 202KB and 19 HTTP requests in this new design iteration. The importance of this work is fairly obvious: when you send a smaller site across the wire, using fewer requests, it loads faster.

Site	Page Size	# of HTTP requests
Current Production	979KB	96
Beta v0.1.0	861KB	42
Beta v0.2.0	659KB	23

Design

Following "mobile first" principles, the design of the mobile and tablet views of the site are pretty well baked already. We'll continue to improve those views during user-testing, but we're happy with how the site loads and feels on mobile devices. However, the overly "boxy" nature of mobile design carried itself a little too far into the desktop view, making the desktop homepage feel gray and nondescript.

We've begun work on the desktop view to put our face and personality back front and center. We want to create a friendly and welcoming desktop experience that helps convey the importance of our collections and staff to campus.

You'll notice we've reserved space for a featured highlight and given it top-left prominance in the design. The "My Account" box now drops beneath the highlight, making it quickly accessible, but lowering its importance in the design to better reflect that feature's historical usage trends.

We've elevated the "Top Databases" list, which will help users who frequently visit the library website to gain access to these resources. Our Google Analytics data shows a very common path through the site from the homepage to the alphabetical databases/indexes lists, which this feature should help improve the user experience for users of these resources.

Lastly, we've added Jon Jeffryes atop the "Today" box, to wrap the hours, events and workshops with our "face", better suggesting staff make these important things happen. The links to contact a librarian are front-and-center now, which will allow patrons to more easily obtain our help. Under this box, we're reserving room for advertising tools and services.

Upcoming: Version 0.3.0

For the next design iteration, we'll be looking to:

1. Optimize accessibility
2. Heavily incorporate patron feedback
3. Finalize our acceptance testing framework