A rant — Why are CSS designers so utterly freaking clueless?

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.

28 thoughts on “A rant — Why are CSS designers so utterly freaking clueless?

  1. I’d like to let you know that some of us “dope-smoking ponytailed dimwits” have a clue.

    Oh yea, and my kung-foo is better than yours…

  2. Well, I dunno… but in Konq 3.0, your main column is rendering over *underneath* your right sidebar… which makes it pretty painful to try and follow anything. 800×600, though I do have my toolbarfolder on the *right*.

  3. My kung-foo statement could be misinterpreted due to a lack of clarification on my part (bless you sleep deprivation) as disrespecting your point of view and skills set. I was simply refering to your use of transitional xhtml and non-validating css in this particular instance. No disrespect intended. Just poking you in the ribs regarding the post topic.

  4. gogman, it does indeed look from that blog like you have a clue. Would there were more out there like you.

    Jay, that seems to happen on any display below a certain horizontal width. I’ve
    got an idea about how to fix it.

  5. On the subject of your blog layout: there’s no link from an entry back to the blog home page. I use an RSS aggregator, and there’s no way to get from the story the aggregator links to to the main page.

  6. Guilty as charged. I’m a real novice at HTML and even worse with CSS. Hopefully one day I’ll get better but seeing as I was woeful at computer programming, don’t hold your breath.

    I blame my dependence on WYSIWYG HTML editors. They damn well encourage the pixel-based approach.

  7. Oh yeah, and I work as a copywriter. Ph33r!

    Meh, I won’t even try to defend myself. People like me are responsible for the high suicide rate amongst the technical professions.

  8. Pingback: FreedomSight

  9. I think a large portion of the blame also has to be laid at the feet of the browser makers who made the initial CSS implementations buggy as hell. In Netscape 4, for instance, the only reliable font-size attribute was a pixel value. Browsers these days have largely fixed their CSS implementations, but the damage has been done to Web designers’ minds. (And I include myself in that categorization.) It may take another few years to heal.

  10. Sigh. I guess I better cut off my ponytail then. (I’ve been hacking since the Ford administration… I’ve gotten pretty good at it lately.)

    CSS is for art-deco flashbacks anyway. The only reason I use anything more than ‘html 3.2′ is to have Javascript for client-side form validation.

  11. hello :-)

    ESR, you’re pathetic. I had a diferent idea of your lameness, now that I’ve read 1% of your blog’s crap I can say you’re reach a new depth of stupidity in my thoughts about you.

    people like you shouldnt be born, but since you’re here and death is no solution, you should search re-education. I think you should read michael moore’s books or check out one of his movies: bowling for columbine.

    (btw.. .|.)

  12. Irony among ironies, while I find your post very interesting and insightful because it points out that many designers do not design for variable resolution displays. I find your rant about designers rather ignorant and hence hilarious. Programs and programers are in turn useless if not continually beat over the head with the spoon that is good user centric approach. To illustrate my approach I’d like to quote a great movie one might reference.

    Brian Johnson: I’m a fu**ing idiot ’cause I can’t make a lamp?

    John Bender: No, you’re a genius ’cause you can’t make a lamp.

    Brian Johnson: What do you know about trigonometry?

    John Bender: I could care less about trigonometry.

    Brian Johnson: Bender, did you know without trigonometry there would be no engineering?

    John Bender: Without lamps there’d be no light.

    Commercial speech rules!

    That was well stated, I’m sure glad I didn’t have to express it in my own words. Not many average joe shmo home users set there monitors to 120dpi, just super-users and geeks, and a designers job is to make designs for the general market, not you crazies with you 120dpi monitors. Our job is to take your programs and build stuff that is not for you. : )

    Your rant obscures the truth of the statement, which is “Why are designers designing fixed width?” and I think the answer is because there all damn retards who either came out of the fixed resolution world of print design and are not use to thinking about scaleability. Or, perhaps you damn programers need to make web browsers that cleanly scale the whole page evenly not just text. Since stupid designers always set type in images too. May I suggest Opera! it scales the entire page not just the text.

    Furthermore you must have problems with a tremendous amount of software with a monitor at that resolution. May I suggest getting a bigger, sharper monitor and setting it to a lower resolution. Maybe you need new glasses. : )

    Thanks, It’s been fun. I love opinionated people. They make the world more interesting. The rest of us are just sheep who’d rather fit in with society than be controversial and taking a stand. Wether right or wrong opinions are the base root that cause us to think so our culture doesn’t reach the homogenized state of milk, but remains the beautiful consistency of mud.

    “Just like other mammals, ninjas programers can be mean OR totally awesome.”

  13. Absolute font sizes are horrendous for the non-trivial number of Linux users such as myself. I have to use Opera, even though its stability is less than perfect, since the zoom feature is the only way I can read several of the blogs I visit daily.

    There’s a general problem with making fonts too small. For consumption of large quantities of text, 12pt is really the bare minimum. Far too many people make their sites impossible for me to read without squinting, even under Windows.

  14. I wish Galeon had a “Fuck-All Minimum Font Size” setting. It has a minimum font size setting, but it seems to allow some things to override it.
    -russ

  15. Eric,

    Although I think your rant is (for the most part) totally off the mark, you do make one valid point: most web designers like myself just “don’t give a rat’s ass” about those of you with non-standard video settings.

    If you choose to run some strange video setting (anything other than 800×600 or 1024×768), you’ll have to pay the price in terms of things being unreadable.

    Thankfully, the days of letting user browser settings dictate page style are gone – long gone. We’re living in a graphical age, not a text-based one.

    Lastly, we’re living in a free society. If you don’t like my web site, move on. Find one you like — don’t beat me over the head with a chair leg.

    Scott

  16. Wow. I actually had to look around to decide if Scott’s last comment was parody or not. I mean, you’re perfectly welcome to put up gifs for a webpage if you like, but I would have thought the point of a webpage was content.

    It’s interesting that this attitude is nearly universal among programmers. Wonder what that means – obsession with structure regardless of overlying form?

  17. … and programmers can´t read too. they set all the stuff with Times or Georgia, sometimes with pretty ugly contrast between colors, where reading a long article can be a pain in your ass. or… all sites looking the same, white background with black text set in serif… somebody could surf ten sites of those thinking they’re all the same. oh yeah i’m a fanatic and extremist. just like you. and congrats with your 1920×1440 display at over 120dpi resolution. you’re one ina millon man.

  18. What a dimwit. if you had a rant with a sense of humour it’d be worth reading. But as it is, you just talk a lot of sh!t and are clearly have design inadequacies. Left to people like you, all web sites would look like plain text files.

  19. Directed to this idiot and his quote:

    “people like you shouldnt be born, but since you’re here and death is no solution, you should search re-education. I think you should read michael moore’s books or check out one of his movies: bowling for columbine.”

    Michael Moore is a liberal idiot. He needs to crawl back into the sewer where he came from.

    A.C.K.

  20. Erbo gave 1 of the 2 major reasons for fixed-size CSS – Netscape 4 couldn’t handle anythig else.

    I think the other major reason is that the W3C’s CSS team got it wrong, because they concentrated too much on presentation of individual elements and put too little thought into overall layout.

    When HTML tables were the only layout tool it was easy to get things to align, although coding nested tables was a pain. With CSS the only way to be sure of clean alignment is to use pixels. I’ve experimented with % sizes and always found small but visibly jarring misalignments – my guess is that round-off errors in the browsers’ calculations of % sizes are responsible for this.

    I think the specifiers of CSS also erred in making % font sizes based on the size of the immediate parent element, so you always risked getting x% of x% of x% …. vanishingly small. It would be much simpler to use % font sizes if they were %s of a base font size (that of BODY if specified, otherwise the browser’s default which could be set by the user).

    And of course we all know how difficult vertical centring is in CSS.

    Finally, they did not issue a test suite at the same time, so browser producers implemented the standards slightly differently. As a result, pixel sizes were the only way to control layout.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>