People who put absolute pixel sizes in CSS layouts should be lashed
with knouts. I’ve tripped over this problem yet again while moving my
blog; I’m using b2, and the default
stylesheet shipped with it was obviously produced by some graphics
designer who has failed to grasp the fact that there are lots of
different display sizes and resolutions out there.
OK, for those of you who don’t see the problem here, it goes like this.
Graphic designer composes his layout on a 1024×768 display. To make the
spacing come out all pretty, he specifies a 10 or 11-pixel font which looks
good on that 72-dot-per-inch display. Now I view it on my 1920×1440 display
at over 120dpi resolution — and the font is 40% smaller and a hell of
a strain to read. There are many other, related errors as well, like
specifying absolute box or table widths when percentage of screen width
would be more appropriate.
The basic error here is overcontrolling the layout rather than
letting the user’s browser choose it in execution of the user’s
preferences. Graphics designers are chronically prone to thinking of
a browser as a device for delivering pixels, rather than information.
But it doesn’t have to be this way — and, in fact, HTML isn’t
supposed to be. You can make your CSS scale to the user’s chosen font
size by specifying box dimensions in units of em, en and ex (which are
evaluated relative to the parent box’s current font size) rather than
pixels. But most CSS designers are apparently either too freaking
incompetent to do this or just don’t give a rat’s ass about
display-independence or the user’s preferences to begin with.
This sorry state of affairs is one of the better arguments for the
proposition, widely shared among my peers, that graphics designers
are basically a bunch of dope-smoking ponytailed
dimwits who need to be smacked upside the head on a regular basis and
not let anywhere near a software or web design without strict adult
supervision by a cluebat-wielding programmer.
Another stupid graphic-designer stunt is changing the colors on
visited and unvisited hotlinks away from the browser defaults (it’s especially bad when they’re mapped to the same color). What make this annoying is that it
discards an important visual cue for web page users by making it less
obvious where the hotlinks are. People who do this should be clubbed
with a chair leg until they stop.
Sigh. Here’s the default b2
stylesheet and here is the stylesheet I
use. Notice how much simpler mine is? The more you default
rendering decisions to the browser like Ghod and Tim Berners-Lee
intended, the more error-prone crap your stylesheets can omit, the
faster your pages will render, and the better the user experience
will be.
UPDATE: A reader tells me that part of this is the browser vendors’
fault. It seems that on older browsers, only pixel sizes worked
reliably. He says this has long since been fixed but the damage to
CSS designers’ minds was already done. Another reader pointed me to a
good rant on this topic by Jamie Zawinski.