Web Dev Blog

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.

This entry was posted on March 16, 2011 at 4:50 PM and has received 17567 views. Print this entry.

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.

This entry was posted on February 18, 2010 at 4:28 PM and has received 19713 views. Print this entry.

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.

This entry was posted on September 28, 2009 at 3:06 PM and has received 19707 views. Print this entry.

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

This entry was posted on August 20, 2009 at 4:20 PM and has received 19925 views. Print this entry.

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.

This entry was posted on September 12, 2008 at 5:25 PM and has received 32843 views. Print this entry.

There is much hype written about the semantic web, which is supposed to add context to content online, aiding computers and humans in better understanding information presented online.  One area where it's fairly easy to add content and context is by using microformats. This is a way to mark up information online so other applications can recognize events, contact details or reviews.  The mark-up is in the form of a common set of class codes that do nothing to change visual display, but can be read by computer programs recognizing this format.

We recently created a faculty events system for tracking on campus workshops and conferences.   For all events, we create a vCalendar file (used with a .vcs file extension) for import to programs like Microsoft Outlook and Entourage.  The problem is that Firefox and Internet Explorer handle .vcs files differently, forcing some users to first download the calendar file, then import it to another application. Also, .vcs files are not easy to import to services like Google Calendar.

Thankfully, we mark up all events with the hCalendar microformat, which contains all event details, even some not visible on the screen.  The easiest way to take advantage of this markup is to use the Operator Toolbar, which is a Firefox extension. This recognizes the hCalendar format, and lets visitors save items directly to Outlook, Google Calendar, Yahoo Calendar and other places.  The picture here shows the Operator toolbar in action.

Jesse Rodgers, a web developer at the University of Waterloo has written about How can Microformats help Higher Education, pointing out that and their university has an events system that has all events marked up with microformats.  It looks like they have decided to forego creating downloadable calendar files (e.g. vCal or iCal) altogether. Read Rodgers' research paper on microformats in higher education for a literature review on the topic, as well as a model for implementing microformats.

This entry was posted on September 10, 2008 at 12:52 PM and has received 33014 views. Print this entry.