html

The Association for Computing Machinery is one of the oldest and most popular organizations in computing, with the self-professed mission of “advancing computing as a science and a profession”. Here is some historical background. Being the flagship society in computing, I think it is only justified that ACM should boast a good website, holding to the highest standards in web design and accessibility.

Until some time back, the ACM web site was fairly old school and lacking in most feature of any good standards-compliant website. I wanted to pull up a snapshot of an older version of the home back from archive.org, however, ACM seems to have blocked their crawlers. Unfortunate. Anyways, it seems like they finally got their act together (for the main web site at least), and moved to a full fledged content management system (Plone) instead of home brewed custom scripts and hand written HTML. As a result, the web site seems much more professional and accessible. Note that despite their claim, the site does //not// validate but I won't hold it against them, since the number and type of errors is not significant.

What does bother me a lot, however, is the state of the ACM Digital Library (actually the entire portal). The layout and code of the site hasn't changed in well over 7 years now. The HTML seems to be generated by some archaic home-brewed system and it is horribly broken in many many ways. Normally this wouldn't bother me too much, but recently I had the misfortune of trying to screen scrape some of their web pages, which is when I realized exactly how ugly and dysfunctional the code was.

• First of all, the pages claim to be XHTML Transitional in the DOCTYPE tag, but the DOCTYPE is not even in the right place!! Recall that the DOCTYPE must be the first thing to appear on a page to actually mean anything. But all pages in the digital library start with a weird <style> tag.
• Even if we ignore the positioning of the DOCTYPE tag and assume the document is otherwise valid XHTML Transitional, we will be wrong by a long shot. I ran one of the web pages through the W3 Validator, and guess what, it reported more than 1200 errors!! To make sure the majority of errors were not due to the wrong DOCTYPE, I manually specified the correct DOCTYPE, and even then, the validator reported more than 1300 errors. That is just simply unacceptable.
• There are NO accessibility features at all. Not even the ones that are otherwise available on the rest of the ACM website.
• There is very little separation between content and presentation. In other words, CSS is hardly used, and used badly wherever it is. For instance, if a paper title has a colon in it, the generated HTML contains two separate strong tags, one for the part before the colon and one for the part after the colon!!
• There is absolutely no semantic information (by means of rich class names and attributes) embedded in the page for things like title, authors, keywords etc.
• Uses tables for layout (if you didn't know, using tables for layout is EVIL)
• The generated HTML is just downright ugly. Some tags are capitalized while others are not. Some attributes are capitalized while others are not. There are arbitrary spaces and new lines (or lack thereof) all over the page.

The lack of semantic hints in the markup is I think particularly bad for a website such as the ACM Digital Library because it is a source of some extremely rich information which can be put to some wonderful use only if it was easier to access. Consider the CiteULike bookmarklet that allows one-click addition of pages to your library. Right now the plugin to parse ACM DL's pages has to do some really ugly regular expression foo to get at the meta data for an article, whereas with semantic markup those details would be trivially extractable. Similarly, sites such as Google Scholar would benefit tremendously from such rich markup.

Please, ACM, get your act together.

I was just looking through the ALA website, when I noticed a few quirks:

• its a fixed-width design, so if you try to view the site in a narrow window (anything less than 600px should be enough to demonstrace, I think) you'll see a scrollbar show up at the bottom and then you have to scroll horizontally to get at all the content. I don't quite understand why ALA didn't opt for a more fluid design, when they have a plethora of articles on creating flexible, elastic designs
• they don't have a separate stylesheet for print media. That would have been perfectly fine, if the site printed ok. I just tried a simple “Print to file” from Firefox, and for some weird reason it seems that columns of text in subsequent pages increasingly keep shifting towards the right until after about the 3rd or 4rd page, no text is visible on the page. Maybe this is a problem specific to printing to file from Firefox, but I'd still say its a problem.

But otherwise, really great design. Excellent choice of fonts, and colors. I like that they don't overuse images in their design (basically just for the logo).