The Armchair Politician

I hereby present my Browsenberg Uncertainty Principle:

As one increases the layout precision of a section on a webpage, all other sections of the page have their layouts perturbed by a proportional amount.

And its corollary:

The more precisely one specifies positioning and layout for a page in one browser, the less accurately every other browser will render it.

Personally, I think these need no further explanation. The sad fact remains, though, that people don’t seem to understand this — especially those who happen to want webpages created for them.

The process is familiar to anyone with a modicum of web development under their belt.

Insane Customer: I’d like this webpage designed! Here, I’ve forwarded you a bunch of pictures of what I want it to look like. Our designers took screenshots of their Photoshop mockup and faxed it to us, then we ran it through the photocopier a few times, scribbled over it in sharpie, scanned it in, and pasted it into a Word document which we then zipped and attached to this email. Let us know when you can complete it.
Three days pass…
Enlightened Developer: We’ve completed the project. Here’s screenshots of every page being rendered in eight different browsers (including IE 5, 6, and 7). Please give us feedback [Lines of HTML/JavaScript hacks, and CSS: 14]
Insane Customer: We need you to have all text rendered in [company’s own font, which nobody else in the world has because it was developed in-house by their just-as-insane design team; it also happens to be missing glyphs for the letters “t” and “e”]. Also, the left sidebar needs to be seven pixels shorter. And I need you to make sure that the bottom of every section lines up with the exact pixel where the text ends in the section next to it. Thanks.
Two weeks pass…
Enlightened Developer: Here’s the page with your modifications. Unfortunately, it no longer works in Opera, Lynx, or Konqueror. But few people use those browsers, so it should be okay. [Lines of HTML/JavaScript hacks, and CSS: 173]
Insane Customer: That looks better, but now the alignment of the header is off by three pixels, and some of the letters show up as weird boxes with numbers in them! This is unacceptable!!! We were expecting to deploy this site six days ago, and you’ve done nothing but cause excess delays. We need this ASAP!!!
A month passes, with back-and-forth between Customer and Developer…
Enlightened Developer: Okay, this should do it. We’ve got the layout down now, but had to drop support for IE5 and Safari, since they don’t support [random CSS tomfoolery without which some absurd requirement couldn’t be satisfied]. Also, the viewer will automatically have his display resolution set to 640×480, or else one of the text blocks will roll off the edge of the screen. We’re ready to deploy this as soon as you give us the okay. [Lines of HTML/Javascript hacks, and CSS: 1,027]
Insane Customer: Perfect. However, we’ve recently developed our own internal server-side blink tag, and our new Website Design Policy states that any place our logo is, we need to use it. It will require this 16,641 line JavaScript file to directly send some PHP and SQL to our Application Server, and these small (500 or so) CSS changes in order to incorporate the actual blinking. Can you have this incorporated by tomorrow?
Three days later…
Enlightened Developer: Okay, we tasked the entire company to this and had every developer work without interruption for sixty-three hours straight. We were able to complete these last requirements. Unfortunately, your code only works in IE 7, so we’ve dropped support for Firefox and IE 6. All your customers will be forced to download a 117MB browser upgrade. Plus, we’ll have to look into the security issues of your server-side blink; namely, if a customer accidentally clicks on your logo while it’s blinked out, it will empty the contents of your entire SQL database, and format your webserver. On second thought, ignore that. I think we have a solution for this entire situation. We’ll deploy today. [Lines of HTML/Javascript hacks, and CSS: 69,552]

I’ve often considered simply making webpages as static images. Links can be done by a giant image map covering the entire thing, and input fields can just be superimposed on top. Or we could train marketing and sales types to realize that their customers don’t want them explicitly controlling every aspect of their sensory input or even to comprehend the fact that HTML wasn’t designed to do such silly things, no matter how much JavaScript and CSS you layer on top.

Nah, the first option is probably far easier.