Thoughts From Eric Archive

In the course of about two and a half hours yesterday afternoon, I hacked together a fixed version of KPMG.com.  It works consistently in Gecko-based browsers and Internet Explorer for both Macintosh and Windows (at least in IE5.5/Win, which is what I have).  This despite the fact that my version does no browser sniffing at all: the same scripts are handed to whatever browser comes to visit.  I would have posted all this yesterday, except KPMG’s Web site (from which I pull all the images) went offline yesterday afternoon, just as I uploaded my fixed version.  Weird.

My fix is not, I should point out, a full makeover into total standards-compliant code and markup.  I left the poorly structured HTML more or less alone, save for the minimal changes I had to make to get the page cross-browser savvy, like converting name attributes to id attributes.  Similarly, I touched only those pieces of the Javascript that needed to be changed.  And I didn’t try to make the DHTML effects more efficient, or speed them up for Gecko, whose dynamic performance still lags behind Explorer.  Thus in Gecko-based browsers the effects will seem sluggish.  Nevertheless, they do work and the page does lay out correctly in the Explorer and Gecko families, which is a heck of a lot more than we can say for the actual site.  I don’t know about other browsers because, in all honesty, I was only willing to sink so much time into a non-paying project.

As I say, this took me about 150 minutes to accomplish, and it would have been less if I hadn’t had to research DOM-compliant event handling (thank to kirun for hooking me up with the answer!).  Remember, I’m a CSS guru, not a DOM and Javascript expert, so it took me longer to figure everything out.  A full makeover to a no-font, minimal-table, optimized, and fully DOM-based script version would have taken a couple of days, most likely.  Add another day to make the way the page is put together rational, since right now the way the script routines fit together is a little frightening.  And there are other problems with the site, like serving CSS files with the MIME type application/x-pointplus, but those seem like incidentals.  Correction: kpmg.com’s CSS files are in fact served up as text/css; it’s kpmg.ca‘s CSS files that are the wrong MIME type.  My apologies to the server adminsitrator(s) at kpmg.com for my incorrect assertion.

In total, a complete makeover lasting three days would still be—even at top-drawer consultancy rates—around US$6000.  Compared to what the site probably cost to develop badly, that’s an amazing bargain.  If even one customer using, oh, let’s say AOL for OS X, was able to browse the site and decided to sign a contract with KPMG, the work would more than pay for itself.

Oh, and I almost forgot: KPMG.com has been broken for well over a year now, as detailed in Bugzilla entry 83846.  We know from that entry that KPMG got e-mail about the problem on 10 July 2001.

With any luck, they’ll take the work I’ve done and use it, seeing how as I’ve written them and offered it at no charge.  Feel free to add your own voice to the process; you could even use the contact form on the fixed version, and if you’re using a Gecko browser, you’ll have to since the actual KPMG site is, you know, broken in your browser.  If they’re afraid of what it might do in Explorer, they could still use their server-side sniffing to give any Gecko agent the fixed version (DevEdge has a good article on Gecko detection).  Of course, I think they should just offer up a standards-based site as the default, but hey, I’m only one guy.  No doubt a large corporation that couldn’t fix its own site problems knows far better than I do.  Hmmm… was that too bitter?

• It’s Like KPMG.com, Except It Works was published on Sunday, September 22nd, 2002.
• It was assigned to the Standards category.
• There have been no replies.

Life is so damned ironic sometimes I have to pause in wonder.  While taking a break from doing technical review on a book exhorting standards-based site design, I spotted on Zeldman (and he spotted it at Supafamous) a note that KPMG‘s Web site (as well as its Canadian counterpart) completely shatters in Mozilla, Netscape 6+, and basically any other non-IE browser.  (Unless it’s Opera, in which case the Canada site doesn’t even let you in at all.)

Why does this happen?  Bad browser sniffing.  Somewhere on KPMG’s server(s), a script looks at the user agent string of the browser asking for a page.  For Gecko-based browsers like Mozilla et.al., this script decides that it’s dealing with Netscape 4.x, and so hands over a script that’s tuned for said browsers.  An tiny little excerpt:

if (tar == 'A') {
  document.layers['search_form'].document.forms['searchFormA'].submit();
} else {
  document.layers['search_nav'].document.forms['searchFormB'].submit();	
}

There’s plenty of other broken stuff, like dynamically writing out layer elements and setting the visibility of said layers to hide, instead of the correct value, hidden.

This is a perfect example of why browser sniffing is nearly always a terrible idea: failure is never more than an unrecognized (or misidentified) browser away.  I’ve taken a look at the page in Explorer, and I’m pretty sure the page can be rendered the way they want it in Gecko-based browsers.  The question is this: should I invest the personal time and energy to offer them, for free, what Razorfish probably charged them a very large sum of money to not deliver?

In the end, thanks to my annoyingly ingrained sense of community good, I probably will.  I’ll let you know how it turns out.  In the meantime, I have to get back to that technical review.

• KPMG.com Fall Down, Go Boom was published on Saturday, September 21st, 2002.
• It was assigned to the Standards category.
• There have been no replies.

It turns out that my praise for Scott‘s recent redesign was unintentionally self-serving: he’s said that some of ideas were inspired by this page.  In the interests of credit being given where it’s due, I should point out that the idea of making h2 elements inline was not taken from this site.  The dates here do use that trick, but they’ve only done so since Sunday.  Scott came up with that himself.  I set up the inline-heading trick for this site last week and pushed it this past weekend, coincidentally the same day Scott changed his design.

Speaking of redesigns, CNN has changed their site design.  It’s… interesting.  Kind of K10K.  Needlessly overwhelming, in my opinion, but then I thought the last redesign was a mistake and then got used to it very quickly.  I’ll probably get used to this one too.

There are even more interesting redesigns looming on the horizon, however.  I wish I could talk about them here, but I can’t yet.  Soon, very soon…

• Redesigns and Rebounding Praise was published on Thursday, September 19th, 2002.
• It was assigned to the Redesign category.
• There have been no replies.

A very nice redesign has appeared over at scottandrew.com.  Scott didn’t mention anything about it when we had lunch last Wednesday, so I’ll have to berate him for that later.  I’m always envious of people who come up with beautiful, coherent Web designs in the XHTML+CSS space, and Scott’s definitely joined that list.  My one potential quibble is the order of his source, with the page content coming after the entire sidebar instead of before, but since this site does the same thing I don’t suppose I should complain too much.

Today I got what might be my very first anti-porn spam, from “Fathers Against Porn,” and I got it twice.  I thought for a moment about going to download some porn in protest, but decided maybe I’d be better off just deleting both messages with a muttered curse at spamming morality cops and calling it even.

Today I also spotted one of the most severe cases of topic drift I’ve ever seen.  The subject line in question: “Redirection of the root folder and children (was Re: 9/11 Moment of Silence?)”  Wow.

• Scott, Spam, and Severe Drift was published on Monday, September 16th, 2002.
• It was assigned to the Redesign category.
• There have been no replies.

Exactly one year ago, I posted an entry with exactly two words: “My God.”

I was then, as I am today, over 2100 miles from home, sitting in a building on the Netscape campus.  The distance has its time effects as well, of course.  When Kat and I were awakened that morning, the towers were already down.  We were very lucky, really, back on that horrible day—we were together even though far from home, and everyone we knew who could have perished in New York did not.

In the intervening 365 days, we have learned that someone very close to us is terminally ill, that others are still suffering from what they saw a year ago, met new friends and heard from old ones, traveled more than we probably should have, worried about the government, been denied the chance to know someone who would have been everything to us, made agonizing choices, been through job changes and home repair, tried to understand and respect each other, and held each other as we tried to shut out the world for a few minutes of grief or joy at a time.

Life continues to move onward, and as much as we would sometimes like to stop, we keep moving with it.

• Measuring a Year was published on Wednesday, September 11th, 2002.
• It was assigned to the Personal category.
• There have been no replies.

I’m sure I’ll be one of about six hundred thousand people making this particular observation, but here we go anyway: electronic games are now illegal in Greece.  Have been ever since the end of July, in fact.  If I show up in Greece with my cell phone, which has a few games built in and which I can’t remove, I could face a year of jail time and up to a 75,000 euro fine.  I suppose the fact that people can be just as deeply stupid the world over as here in America should be in some way comforting, but instead I find myself deeply frightened.

• Greek Gaming Gaffe was published on Tuesday, September 3rd, 2002.
• It was assigned to the General category.
• There have been no replies.

Remember the flap, back in April, when the Section 508 site‘s markup didn’t validate?  Guess what: it still doesn’t, but that’s not what I’m here to talk about.  I just found, thanks to a co-worker, a story almost as good.  It involves Microsoft’s Accessibility page.  Think it’s accessible, let alone legible in anything other than Explorer?  Hah!

Given my employer, I thought about taking a pass, but you know what?  To heck with it.  I’d be taking Microsoft to task over this if I worked for myself, so I’m going to do it now.  So here’s the deal: go to the page using a Gecko-based browser like Mozilla.  Or use Opera, which has its own display problems, but which aren’t the ones I’m about to describe. Okay, take a look at the links on the right side of the page.  Nice.  Even someone with my eyesight can’t read that text without major squinting.  I suppose there’s a witty remark to be made about forcing the user to squint at a link to a page on “Visual Impairments,” but in a rare display of moderate taste, I’m not going to make it.  Now look at the left rail.  A few of the links, and all of the search area, are completely gone (you may have to compare the page in Explorer to see what I mean).  They’ve been pushed out of the top of the left rail.

Are these display errors due to bugs in Gecko?  No.  They’re due to sloppy authoring practices made possible by bugs in Explorer.  To wit:

• The teensy link text is due to the site’s use of font-size: x-small for the table that encloses the links.  IE thinks x-small is one “step” below the user’s default font, when in fact it’s two “steps.”  To give some rough approximations, IE thinks it’s 80% normal whereas it should be 60% normal.  (Those percentages are close to reality, but remember that CSS doesn’t define how big or small the keywords should be.)  Changing the value to small gets you a decent display in Gecko, but of course the text gets bigger in IE, which thinks that small is the same size as the user’s text.  As opposed to, say, medium, which is clearly defined to be the same size as unstyled text.  Todd Fahrner has written about this topic far better than I ever could; see “Toward a standard font size interval system” and “Size Matters” for details and good advice.
• The cut-off links and search area are due to stupid table tricks.  The entire left rail is a single table cell with a bunch of stuff inside it—no great surprise there.  But how does Microsoft try to get the content of the rail up against the top of the cell?  By sticking in a table with a height of 100% below the rest of the cell’s contents.  IE assumes that if an element is too tall, then it should be resized.  Gecko, on the other hand, properly calculates the height of this table to be equal to the height of the entire left rail.  So you have a table as tall as the whole rail, and then more content above it, and all of it is vertically centered in the rail… which means the visible content gets pushed out of the cell.  The fix?  What most any Web designer would have done in the first place: add valign="top" to the rail’s cell.

In addition, the page’s markup comes nowhere close to validating (of course!) and is composed of so many convoluted, nested tables, spacer GIFs, and font tags that I shudder to contemplate what a screen reader, or a text-mode browser, might end up displaying.

It’s not like these particular authoring errors were difficult to spot, or even to fix.  Tracking down the source of the problems and fixing them took me about 20 minutes, tops.  I think I’ve spent more time writing and editing this rant than I did on the diagnosis and testing of the fixes described above.  Of course, there are doubtless other problems on the page, but if so they weren’t immediately obvious—and as much as I’d love to spend my days fixing obvious authoring mistakes for other people, I only have 50 or 60 more years to live.  I hate to start a project when I know I can’t finish it.

What is it about accessibility sites that brings out the absolute worst in the Web and its authors?

• Inaccessible Accessiblity Information was published on Wednesday, August 21st, 2002.
• It was assigned to the Standards category.
• There have been no replies.

I hope everyone enjoyed the “Eric Meyer made up Jeffrey Zeldman” thing.  I’m still sort of amazed by it all, and Kat and I have gotten more than a few chuckles out of it.  I freely admit that I don’t have the creativity to come up with Jeff—he’s far too unique and interesting a guy to be my invention.

So Netscape 4.8 was released.  The howls of protest began immediately; I noticed disparaging comments from Zeldman (who was pretty funny about it, of course), Shirley, and Meryl, among others who I can’t recall at the moment, not to mention a mercifully short thread on css-discuss.  Apparently this release is the worst thing to happen to the Web in memory, or something like that.

To which I say: could we all please calm the %#@$#! down?  As I’ve tried to explain several times, updates to Netscape 4.x are driven by security patches.  Period.  End of story.  The rendering engine does not change, so it’s not like there are new bugs to worry about there.  These updates are required by support contracts between Netscape and enterprise users.  I suppose Netscape could just abandon the product line and leave enterprise customers open to future security exploits, rather like some other companies that spring to mind.  Yeah, that sounds like a swell idea.

To get back to my original point: the louder people howl about new a NN4.x release, the higher its visibility, and so the more people will actually download it.  See where I’m going with this one?  If people would just ignore the NN4.x releases, there would be fewer NN4.x installs in the world.  Users would instead find another, more current browser.  Everybody wins.  How hard is that?

Sometimes I’m astonished by the human drive to stir up controversy where none need exist, not to mention the ever greater drive to complain at length about trivial things.  Sort of like I’m doing right now, in fact…

• Let It Go, People was published on Tuesday, August 20th, 2002.
• It was assigned to the Browsers category.
• There have been no replies.