When implementing changes to a website design, often fundamental changes are made only to a site's CSS file. Perhaps you're tweaking font spacing, adjusting margins for sections of a page or making significant layout changes. One problem that comes up when testing designs is that browsers like Firefox and Internet Explorer tend to cache a CSS file, making it hard to know whether intended changes actually work. For users, getting a current copy of the (X)HTML file may still mean you get the 'old' CSS file.

By passing a variable as part of the CSS file, this can help avoid the problem. Here's an example:

This tip was featured recently on the site: The Do's and Don'ts of Modern Web Design, which provides short posts describing best practices and things to avoid in creating websites. As the site's subtitle states, these are "Snacksized Web Design Tips and Tricks." The site makes each available with a retweet function to share them with your world of followers.

Online, the technique of the CSS Caching Hack dates back to (at least) 2006. It's a nice trick to keep in mind, and we'll be using it for some site adjustments we're planning for the law library.

In the world of web design, there's a concept known as "Progressive Enhancement" The basic definition on Wikipedia is as follows:

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.

Today we updated the homepage at the Georgetown Law Library to include rounded corners for browsers that understand them. This doesn't add functionality, and it is no more advanced than it was. Given this, it seems more like "selective enhancement". We've selectively enhanced things for people using Safari or Firefox, while leaving Internet Explorer users with angled corners.

Compare the difference:
On a browser that interprets rounded corners:

On a browser that ignores this property:


For our own documentation, the corners are done with the CSS Property -moz-border-radius.

There are dozens of alternative methods of creating rounded corners, some requiring images, some with JavaScript, and some in pure CSS. For us, we decided that it's enough to selectively enhance the experience of visitors. Maybe it's a way for us to show that Firefox users tend to think outside the box (pun intended).

Beginning this year, several faculty members at Georgetown Law have started using the course management system TWEN (The West Educational Network).  Students can also find course materials on a courseware system developed in -house several years ago.  In addition, there are some reserve materials available in the library, and syllabus materials are distributed through a centralized service.  Because having so many options can be confusing to our students, we try to link to all services at the same time.  On websites we manage, this is easy enough, so we can provide course information links on a main student page, an orientation page designed for new students, and other places. Westlaw recently added a feature to TWEN to let law schools customize a banner on the system.  In addition to providing a logo and link back to the law school, there's enough room to include a few links.

To allow us to include several links, we looked at setting up a dropdown menu with categories of links.  While letting us provide course information sources in one place, this also lets us link to services like Hein Online and our E-Journal Finder, which provide important course materials not found on Westlaw, the quasi-default source for legal information on TWEN.  Here's what it looks like:
 

• Law Library
• Library Resources »
  • GULLiver: Law Library Catalog
  • Reserve Materials
  • Past Exams
  • Research Guides
  • Research Tutorials
• Popular Databases »
  • E-Journal Finder
  • Hein Online
  • JSTOR
  • BNA Newsletters
  • LexisNexis
  • Westlaw
• Law Center »
  • Registrar's Office
  • Law Center Email
  • Student Services
  • Georgetown Courseware
  • Course Materials

This menu uses a version of the something called the Sons of Ursidae Menu (thanks Sara K!) which requires no JavaScript and can be rendered with only a few lines of CSS code. The dropdown menus don't work in Internet Explorer 6, but the four links under the Georgetown logo point to pages that contain all items.  We're going to look at changing our main site navigation menu (which uses Open Cube's Infinite Menus), as it requires more complex CSS and complicated JavaScript.

One interesting thing about our custom menu is that Westlaw's blue and grey color scheme match nicely with the school's main colors.