For many years we wrote out links’ URLs in the visible text on our pages so they would not be lost to users who printed out our pages. This made our site a lot less readable than it could have been. To remedy the situation, we tried a CSS technique that would display links’ URLs only when a page was printed out. Unfortunately, like a lot of useful CSS tricks, this didn’t work in Internet Explorer.

On the David Walsh Blog we found a solution that uses CSS and the MooTools Javascript framework to dynamically generate endnotes showing the URLs of every link on a page. It does this by collecting all of a page’s anchor tags into an array and breaking out the values of their href properties into an ordered list. Unfortunately, this solution generated several empty endnotes, since it also included the empty href values of several named anchors we use for same-page navigation on many of our pages.

My solution to the named-anchor problem was to use MooTools’ array.filter method to remove from the anchor array any anchor whose href value was null. The final, modified code looks like this:

/* when the dom is ready */
window.addEvent(’domready’,function() {
/* get the links */
var links = $$(’#print-content-area a’);
/* remove from the array named anchors lacking an “href” property */
function notNull(a) {
return(a.get(’href’) != undefined);
}
var filteredLinks = links.filter(notNull);
/* if there are any */
if(filteredLinks.length) {
/* create toc list */
var container = new Element(’ol’,{
‘class’: ‘print-only toc-list’
}).inject(document.body,’bottom’);
/* add a heading for the TOC */
var header = new Element(’h2′,{
text: ‘Links In This Document’
}).inject(container,’top’);
/* get links inside the content area */
filteredLinks.each(function(a,i) {
/* insert the span reference right after the link */
/*if(a.get(’href’) != undefined){*/
new Element(’span’,{
text: ‘[' + (i + 1) + ']‘,
‘class’: ‘print-only’
}).inject(a,’after’);

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:

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:

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.

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.

The Georgetown Law Library site uses a horizontal navigation bar for access to most sections of our site.  We introduced it with a redesigned site in January 2008, and people seem to like how it works.  In the course of conversations and a usability study this past Spring, we noticed that people sometimes pause, trying to decide which of five broad menu selections to choose.  We recently made a small change intended to make it easier for students and faculty to find what they need.  The audience-based items on our sitewide navigation are now in a different color, grouping them together visually.  Compare the difference:
Old:

New:

Following are two law schools that indicate different types of menu items for different audiences

Harvard Law School


Cornell Law School 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).

 

Unless you're running a one-person blog or website, there is always a need for distributed content management.  The worst-case scenario with web management is that everybody emails changes to one person to post them online.  It's inefficient and it is no fun to be that content funnel. A better model is to give content editors tools they need to make changes themselves.

Adobe just updated the InContext Editing service, which is a system of distributed content management that could fill the gap for anybody not yet ready for a full web-based CMS. This is technically a product from Adobe, but it may be better described as a service, as it looks to be positioned as an entirely web-based subscription model for editing web content.

InContext editing is a web-based system that lets web developers give users the ability to edit content directly within the browser. Unlike Adobe Contribute, InContext Editing does not require a desktop software installation. It isn't as feature-rich as Contribute, but the Live Demo of InContext Editing shows that simple text editing is possible without much trouble. InContext Editing requires Adobe Dreamweaver CS4 to take advantage of all features, so this option ties you to the latest incarnations of Adobe's good (and not inexpensive) software tools.

[More]

The distributed screen capturing website BrowserShots.org recently released an online showcase of more than 32,000 image captures of website pages.  It looks like the content comes from sites their visitors have requested to have pictures taken of. 


You can browse sites, rate them, and search for text within the sites.  It's not clear if the text searches indexed terms or a version of the site source code.  For random design inspiration, this is a great site.  Another search option is to look for sites of a particular color.  For instance, here's a view of sites matching the hex color 003366.

It's especially nice because it includes many non-English sites, so you can just isolate design and feel without reading text. 

As an aside, if you need to get lots of screenshots for websites, it is very much worth it to pay for priority processing.  We needed to collect lots of images in a short period, and with priority processing, images were returned in one or two minutes.

On the law library's website, we have what's called the Feedback Blog.  This is a place where we post questions from students and any of our visitors, together with answers to those questions.  It's an informal dialogue of sorts, styled in a Jeopardy type fashion, where every post has to be in the form of a question.

On our library homepage, we present the one question and the first 100 characters of the answer to give a fragment of our response.  One problem with this approach is that we only have enough room for a single question.  As soon as a new question is posted, the most recent one disappears.  Instead of just listing more questions, we chose a sliding panel widget so people can page through recent questions and answers without leaving the page or forcing the page size any bigger.

Implementing this was pretty easy with Adobe's Spry Sliding Panel Widget. We went right to the Sliding Panels Sample page and reverse-engineered the code for a horizontal panel. A few checks in the documentation and some testing, and it's ready to go. Of course, it might have been better to read Adobe's entire explanation on Building a Spry Sliding Panels widget, but the code is pretty easy to figure out.

Now there's just one problem: IE6 works with the code, but it displays the widget box strangely. The problem is that IE6 doesn't render the CSS rule max-height properly. In fact, it flat-out ignores it.

Take a look at how it shows up in IE6:

We could have fixed this problem with a proprietary Internet Explorer trick such as this or this. The only problem is that it just seemed wrong to add bloat and hacks to the homepage, just so IE6 would look pretty. A quick check of Google Analytics shows that just over half our our users browse with Internet Explorer. Of those, less than a third use IE6. Given these numbers, we figured it was fine the way it is.

Web design site Smashing Magazine lists this technique, which they call Carousels (slideshows) as one of the Web Design Trends for 2009. It's nice to be trendy now and again. Oh, and it's even nicer to add functionality with little code and no loss of screen real estate.

People who develop websites have probably already heard of Firebug and the Web Developer Toolbar. They are two very popular addon tools for Firefox that let you analyze web content as delivered to the browser.  The beauty of tools like this is that you don't have to leave a page you're viewing in order to debug it or test code.  There's no need to transfer files to/from a server and reload the page.  If you like these two tools, then consider several others profiled in an article from Smashing Magazine called: 15 Helpful In-Browser Web Development Tools.
Tools they profile include the following:

• YSlow: a tool from Yahoo! that integrates with Firebug to test website speed and suggest ways to improve it
• Internet Explorer Web Developer Toolbar: A Microsoft program similar to the same addon for Firefox
• FireShot: A tool for capturing and analyzing parts of images delivered to the browser, falling somewhere between Screengrab! and Snagit in terms of features
  
• Fangs: A free screenreader tool to test oral rendering and navigation of websites (similar to the commercial product "Jaws")

There's some overlap in features between the programs profiled.  For instance, the toolbar from chrispederick.com includes color analysis options similar to those in Colorzilla (for color palette analysis). Nonetheless, it's nice to see a list of these tools that include addons for Internet Explorer, Opera and WebKit (aka Safari / Chrome).  Firefox isn't the only browser that supports in-browser editing, afterall!
Hat tip: Boagworld podcast (which mentioned the Smashing Magazine article).

One of the powers of the ColdFusion 8 tag CFPRESENTATION is that you can create presentations from dynamic database queries. A type of query introduced in Cold Fusion 8 is the CFFEED tag. This takes a feed (rss or atom) and turns it into a query that you can loop over as needed. Pairing the two together, following is a simple proof of concept that shows a series of slides using an RSS feed as the source.

The source for this example is a feed of Recently Redesigned Websites from the site eduStyle: Inspiration for Campus Web Designers. This was chosen as the source, as the feed output is very uniform, presenting two screenshot images and minimal but predictable text in the source of the feed.

First off, following is the pertinent code showing only the necessary CFFEED and CFPRESENTATION elements:

With this, it generates 15 swf slides, each representing a single entry from the feed source. If I want to do this in a week or a month, all I have to do is re-run the ColdFusion file and it will get results live from that point in time.

The best way to view this is to view the demonstration in a new browser window.

Alternately, you can also view an inline version of this presentation here.