Simple CSS-Based Zebra Striping

Zebra Striping from http://www.flickr.com/photos/jimharmer/5046318600/
Zebra Striping is a practice to assign alternating background colors to tables of information. It makes it easier to track information and it looks pretty. Long ago, people would achieve this through CSS class names or JavaScript, such as shown in this A List Apart article from 2004. Now it's possible to use zebra stripes on HTML tables with simple rules. We've added it to our site and it seems to work well. Here's a simplified view of the CSS code:

view plain print about
1tr:nth-child(odd) {
2 background-color: #f2f2f2;
3}
4tr:nth-child(even) {
5 background-color: #ffffff;
6}
Note that for nth-child, you don't have to use odd/even pairs. This article from an Opera blog shows rules for doing this using various multiples of rows. The nth-child rules have been along for a while, but are now supported in most browsers, so we think it's time to stripe our tables. Unsurprisingly, IE8 and below don't support this rule, but the recent tests showing IE9's good ranking in HTML5 tests are promising for users of Microsoft's browser. Here's some further reading on the perceived benefits of zebra striping: Photo by Jim Harmer

BlogCFC - Now with Mobile-Friendly Goodness

The law library runs four blogs on our site, including the Due Process Blog, Feedback Blog, Student Worker Blog and the Web Dev Blog where you're reading this post. They all run using a ColdFusion-based blogging platform called BlogCFC. Since much of our site is written in ColdFusion, this platform works well for us, and we've been using it since early 2007.  Recently, BlogCFC has been updated a few times, including new features for us to administer things.  Just last week, they added a mobile plugin for the system called jQTouch. What does this mean for non-technical folks?  Well, all four sites now look good on iPhones and other mobile platforms. Take a look at the current list of entries in our Due Process blog as well as one recent entry with a nice picture.  We'll look at adjusting styles and colors, but for now, it's great to know that all of our blogs include some mobile-friendly goodness.  Just because we can (or rather: just because the BlogCFC team cares enough to try).

Mobile-friendly view of Due Process blog, rendered with jQTouch

View of a blog post entry that includes a picture
 

Touch Screen Systems in Context

Following are two pictures of the library touch screen system we've "installed" in our two library locations.  The display systems have wall-mount capabilities, so we can build them into furniture, mount them on walls and be creative about how to use the devices.  For now, the installation consists of putting each monitor on a desk in a heavily-trafficed area of each library location.  This gives us a chance to see how people interact with the systems and plan for future content and installations.  If you come to Georgetown Law Library, please stop by to check them out.  The first one shown is at the circulation desk in the Edward Bennett Williams Law Library: 
EBW Library Touch Screen System

The other system is in the main floor of our John Wolff International and Comparative Law Library, where we used to have a reference desk:
Wolff Library Touch Screen system

Library Navigation Menus now iPhone and iPad Friendly


iPhone Screen ShotSince we launched the current law library website in January 2008, we've used a single sitewide navigation menu across the entire site.  It is anchored in a consistent place and mostly works well.  Unfortunately, it wasn't usable with Safari on the iPhone or iPad.  Also, it required proprietary JavaScript, which added page weight and complexity to our site, especally in testing.  Now we've moved to a new system for running the menus that works pretty well on iPhone and iPad browsers in Safari.  This menu uses the jQuery JavaScript library together with a menu plugin called Superfish.  Down the road, when we redesign our entire site, a jQuery plugin like jQTouch looks very promising for mobile site optimization.  For now though, we stuck with the same menu style on the same website.  The colors are even mostly the same, so we'll see who notices the difference.



iPadScreenShot - scaled

Emphasizing Important Content

At Georgetown Law Library, we assume our internal users (e.g. current students and faculty) are the most frequent visitors to the library's homepage.  Today we launched a new section of the page we hope will be useful for this internal audience.  We're now featuring selected databases and research guides on the homepage, which we introduced by rearranging some content on the page.

In using this, we can highlight updates to research guides and selectively promote our licensed databases and other resources.  We hope this helps us highlight useful content, and we see it as an alternative to using our Due Process blog to promote new items. Due Process still works well for certain types of content and database news, but it doesn't seem approprite to use it for more routine reminders, such as telling people that U.S. Law Week is a good place to get Supreme Court news.

Here's a view of the featured section at launch:

Featured Items content block

In testing this feature, we first tried to include the feature in the center column, but the design challenge proved to be too complex.  It works well at some screen resolutions, but at lower resolutions (even just below 1024 pixel width), the content looks almost unreadable:
Example of a bad design for featured content section

Some of the more subtle changes are a shift from play control buttons under the Feedback Blog entries, as well as introduction of the "box-shadow" element to make the site look better in browsers that understand this feature.  Admittedly, we took elements of this directly from the book "Handcrafted CSS" including the suggestion of using the CSS3 properties box-shadow and border-radius, even though they're not widely supported in current browsers. We added rounded corners to the boxes earlier this year.

Let us know what you think.  Inevitably we'll tweak this based on feedback and usage data.