Web Dev Blog

Continuing Importance of En Dash

Wed, 16 Mar 2011 16:50:00 -0400

In testing new content for our site on mobile platforms, we discovered an unexpected but understandable context stressing the continuing importance of En Dash. Some pages on our site include a date range listing a span of years, such as 1887 to 2010. When viewing these on an iPad or iPhone, the text style looked wrong, which was confusing. Upon closer examination, it was clear what was going on: mobile Safari recognized these patterns as numbers with a specific semantic context. Interestingly, iPhone saw them as a phone number, and iPad saw them as contact data. Perplexed at first, I looked at the code and realized that the date range should properly be listed with an En Dash, not a hyphen. The Wikipedia entry on Dash explains the difference between the two. For web designers, the best piece explaining things is: The Trouble With EM ’n EN (and Other Shady Characters), from the site A List Apart.

Here are screen shots from the test pages showing mobile Safari's treatment of dates with a hyphen and the correct view of them listed with an En Dash. Just one more reason to remember to care about the semantic context of your code, down to every single character.

Microformats on Law School Home Pages in 2010

Tue, 01 Feb 2011 11:57:00 -0400

For a second year in a row, there's a report ranking all law school home pages accredited by the ABA. Read the results online for 2009 and 2010. One element surveyed for all schools is the use of Microformats, which is a design pattern used to semantically mark up data online. Common uses are to use hCard to represent contact and address information, as well as hCalendar to represent events and calendars. Future browser versions might integrate microformats support, and if you use a browser add-on like Tails or Operator your browser can quickly find an address on Google maps or let you efficiently add items to your calendar. It's great to see more schools use microformats, and this is progress towards the oft-mentioned semantic web.

In 2009, four law schools used at least one microformat on the home page. In 2010, the number grew to thirteen.

Following is a list with links to the schools using microformats, together with a note on the format being used. Google supports microformats, they've seen the use of rich snippets growing (which includes RDFa and microformats), and as far back as 2008, Yahoo! started indexing this semantic content online. Also, some suggest that microformats help with website SEO. It will be interesting to see if more schools use this design pattern for events and addresses. Who knows? Sites may some day use something like hReview to mark up professor or course reviews.

Law School Home Pages Using Microformats in 2010

American University: hCalendar
Emory University: hCard partially implemented
Catholic University of America: hCard
Cornell University: hCalendar
Michigan State University College of Law: hCard
New York Law School: hCard
University of California at Davis: hCard - with no street address
University of Denver: hCard
University of Maine: hCard - for admissions and main law school address
University of South Dakota: hCard - for law school and main university
University of Southern California: hCard
University of Virginia: hCard
Wayne State University: hCard - for law school and main university

Law School Home Pages Using Microformats in 2009:

Simple CSS-Based Zebra Striping

Thu, 04 Nov 2010 15:03:00 -0400

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:

 tr:nth-child(odd) {
   background-color: #f2f2f2; 
}  
tr:nth-child(even) {
   background-color: #ffffff;
}

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:

Zebra Striping: Does it Really Help? by Jessica Enders [May 6, 2008]
Zebra Striping: More Data for the Case by Jessica Enders [September 9, 2008]

Photo by Jim Harmer

BlogCFC - Now with Mobile-Friendly Goodness

Mon, 01 Nov 2010 13:17:00 -0400

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).

Touch Screen Systems in Context

Tue, 19 Oct 2010 11:56:00 -0400

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:

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:

Library Touch Screen Preview - With Photos

Tue, 19 Oct 2010 09:51:00 -0400

Georgetown Law Library introduced two touch screen kiosk-style devices for use in our two library locations. We're launching the systems with no planned fanfare or press releases. Initially, we'll rely on user feedback and local observation to plan content. These systems have collection maps as well as digital exhibits of our library and collections. On this blog, we'll document some technical aspects of the system to share project progress.

For content, we've built a custom platform using HTML5, CSS3 and embedded fonts. It is a simple setup running on uniform displays [32" Philips Public Signage display] with a very specific browser [Opera in Kiosk Mode]. This means we don't have to worry about browser compatability, and we can design the interface using specific pixel dimensions.

Here's what the first version looks like in Opera 10.63:

This uses HTML5 to define page content with the more semantic HTML5 markup for the page elements <header> <footer> and <nav>. It passes the W3C's HTML5 validation check as well. With simple CSS style rules, Opera renders the page structure well, but it looks pretty bad in Internet Explorer 8, as shown.

Our initial focus with the touch screens is to create content to be used while physically on campus. Over time, we'll publish this content on our website, planning to archive all exhibits we create. Look to our WebDevBlog for technical updates on the system and underlying technologies.

Library Navigation Menus now iPhone and iPad Friendly

Tue, 10 Aug 2010 15:40:00 -0400

Since 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.

Top 10 Law School Home Pages of 2009

Thu, 18 Feb 2010 16:28:00 -0400

I recently completed a ranking analysis of 195 law school home pages, entitled the "Top 10 Law School Home Pages of 2009" The entire report is on SSRN and will be posted elsewhere later. This report looks at fourteen separate design elements, which were evaluated in November/December 2009. Elements were given weighted values to equal 100 points for a perfect score. Nobody got 100 points, but the survey reveals some interesting details about the state of law school home pages.

Here are some interesting numbers, showing how many schools out of 195 some of the elements surveyed:

Use at least one microformat element: 4
Define at least one Dublin Core element: 4
Use embedded media (audio or video) playable directly from the page: 11
Have a favicon defined: 144
Display one or more social network badges/links: 47
Include a picture of a smiling face: 170

The printed results will be in the Green Bag Almanac and Reader 2010, which is sent to most Green Bag subscribers. The version on SSRN is identical to the version to appear in print. This project may be repeated again next year. If so, it will be interesting to see how much things change this year. Suggestions for improvements are welcome, and criticism and complaints are okay too.

Read on for a list of the point values as well as a full abstract for the report.

Element Name and Points Assigned:

Address 10
Search Box 10
Cascading Stylesheet (CSS)* 10
News Headlines 6
News Headlines with Images 7
Embedded Media 5
Favicon 7
Smiles 5
Social Network Link 6
Content Carousel 6
RSS Meta Information 8
Microformats 6
Dublin Core 4
Hierarchal Organization* 10

* partial points possible for these elements

Perfect Score 100

Abstract:
The website home page represents the virtual front door for any law school. It’s the place many prospective students start in the application process. Enrolled students, law school faculty and other employees often start with the home page to find classes, curricula and compensation plans. Home page content changes constantly. Deciding which home pages are good is often very subjective. Creating a ranking system for “good taste” is perhaps impossible.
The ranking report "Top 10 Law School Home Pages of 2009" includes a tabulation of fourteen objective design criteria to analyze and rank 195 law school home pages. The intent was to count only objective criteria to attempt to find the best sites. All law school home pages were ranked based on a weighted analysis of these criteria. Pictures of the ten best sites are included in the report, followed by a full tabulation of all schools evaluated for the report. The goal was to include elements that make websites easier to use for sighted as well as visually-impaired users. Most elements require no special design skills, sophisticated technology or significant expenses.

Generating a printable list of a pages' links as endnotes - modified from a script by David Walsh

Tue, 24 Nov 2009 11:45:00 -0400

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’);

Emphasizing Important Content

Mon, 09 Nov 2009 14:57:00 -0400

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.

Simple Trick for Avoiding Cached CSS Files

Mon, 28 Sep 2009 15:06:00 -0400

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.

Audience-Oriented Menu Options

Thu, 20 Aug 2009 16:43:00 -0400

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:

Selective Enhancement: Border Radius

Thu, 20 Aug 2009 16:20:00 -0400

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.

-webkit-border-radius: 6px; -moz-border-radius: 6px;

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).

Adobe InContext Editing - Last Stop Before a Full CMS?

Thu, 21 May 2009 14:47:00 -0400

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]

New Web Screenshot Showcase - 32,000 Images and Growing

Thu, 26 Feb 2009 18:03:00 -0400

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.