fixed-width style sheets suck
I’m getting more and more annoyed by web sites that have style-sheets with tiny little fonts and widths specified in pixels rather than percentages (or ‘em’ units).
Almost every web site i visit these days seems to have a style sheet written by some idiot who thinks “if it looks good on my screen using my eyes then it’s perfect for everyone”.
WRONG
Specifying widths in pixels is NOT for text. It’s for images, you morons.
For one thing, small fonts suck if you have a large, high-resolution monitor. or if you have bad eyesight. or if you’re getting older (I was helping my mother find a house to buy a few days ago and the real-estate web site we were searching was basically unreadable for her – she could see the house pictures but I had to read out the text, and even I found that difficult because of the tiny font).
For another thing, if you have a wide-screen monitor and a browser window to suit it, then a fixed-width column of 560 pixels or so looks really bloody stupid in the middle of a huge expanse of empty white space, even with another column or two at the sides for meta-stuff.
There are tools, like the Stylish and NoSquint plugins for Firefox/Iceweasel that help you make a site more readable, regardless of what the so-called “designer” perpetrated. But, cool as those tools are, they just should not be necessary. And I, as a user of the web site, shouldn’t have to spend 5, 10, 20, or more minutes reading and understanding their style sheet so i can hack up a tweak for it JUST TO MAKE IT READABLE.
They’re the designers, that’s their job, not mine. That’s what they’re (presumably) getting paid for – and yes, the commercial/professional web sites tend to be far worse offenders than the amateur sites.
Web designers should have enough bloody sense to make their sites look good in ANY font size, at ANY window width. It’s not hard. In fact, it’s easier and much less work than hard-coding pixel sizes.
I’m not a web designer, nor am I anything remotely like an expert in CSS or style sheets. I’m a systems geek. But if I can figure this stuff out, when it’s not even my job to do so and i have no intrinsic interest in the subject, then why the hell can’t they? Don’t they take pride in their work? Don’t they care that visitors to their web sites will think they’re clueless morons for perpetrating yet another squint-eyed monstrosity on the web? Don’t their employers give a damn?
To summarise:
- text widths in style sheets should be specified in relative units such as percentage or ‘em’ units.
- font sizes should be specified in ‘em’ units, if you must specify them at all.
- all other non-image/embedded-media sizes should also be specified in ‘em’ units.
Doing those three simple things will ensure that your web site looks good to all visitors, no matter what size screen/window they have, and no matter what font-size they have to use to be able to read it.
end-of-rant.
PS: My own hacked-up theme/style-sheet for this blog is far from perfect….but I did take the time to make sure all the widths and font-sizes were relative. If there are any CSS bugs feel free to point them out and i’ll fix them ASAP…like I said, I’m far from an expert in CSS.
May 7th, 2008 at 6:12 pm
To be fair, the situation is about a hundred times better than it was ten years ago. And if there’s one thing the Web 2.0 bubble has done, it’s made a lot of sites switch to using reasonably-sized fonts by default.
As your your own CSS, you’ve got a rather odd-looking 1px turquoise border down the left hand side of the page. Firefox 2, Solaris.
– Chris
May 7th, 2008 at 6:43 pm
some things are better than 10 years ago, some things are worse. idiot web designers are still making the same kinds of mistakes as they did back then, they’ve just got more and different ways of making them. overall, details may differ, but web-annoyance levels things are about the same.
as for the 1px turquoise – any idea where it’s coming from? i can’t find it in my style.css and can’t see it in my browser (firefox 2, linux). every 1px border in style.css has some shade of grey or black.
there may be some cruft left from the original theme i hacked up to make this simple black theme (Zen In Grey theme for wordpress)
May 7th, 2008 at 7:16 pm
Use Firefox 3, Opera, or IE7 they all have a feature to zoom the whole page.
May 7th, 2008 at 7:35 pm
haven’t tried FF3 much yet. if it does the same kind of thing as FF2 + NoSquint, then it’s nowhere near enough. the style sheets of the problem sites have hard-coded widths specified in *pixels* so just having bigger fonts doesn’t work.
Opera? no thanks. i have little to no interest in proprietary software.
IE7? you’ve got to be kidding. even if i wanted to, it doesn’t run on any of my computers. no microsoft here. at all.
in any case, the problem is *NOT* in my browser or my screen or on my system. it’s in moronic style sheets created by clueless web designers.
May 7th, 2008 at 7:38 pm
Hmmm….specifying font sizes in terms of “em”s always seems odd to me. I prefer percentages.
But, yes, you are spot on.
May 7th, 2008 at 10:29 pm
@taz: If you use percentages, your page will scale differently with window size changes as with font size changes. That makes it very hard (as a designer) to ensure your site looks consistent with all combinations of font size / window size, etc. Using ems means resizing the window doesn’t cause the design to change (so elements don’t jump about); doesn’t cause text to reflow meaning ultra-wide paragraphs (hard on the eyes); and keeps things looking right with very large or very small font sizes.
May 7th, 2008 at 10:37 pm
Firefox 3 has a very cool feature in that when you resize (ctrl mouse wheel or ctrl + ctrl -) it resizes everything &emdash; text, images, column sizes, the lot. Makes life a lot easier when dealing with broken web sites.
PS: Hey look, I’m using your comments! ;)
May 7th, 2008 at 11:13 pm
Simon: cool to know that FF3 has good zooming. i’ll think about installing it on my main machine soon…have only played with it briefly on a secondary machine.
told ya blog comments were useful :)
Jon: nice tip. i’ll have to do some reading on the topic, and do some experimentation.
May 9th, 2008 at 12:29 pm
http://etbe.coker.com.au/2007/07/22/column-width-in-blogs/
My above post about how I solved the column width problems for my blog may interest you. The comments have some useful tips too.
The main thing to consider is what to use for the minimum width of columns in a web site. If someone has a window that is 640 pixels wide it may be impossible for have proportional columns for all the text (you can end up with one word per line). Sometimes a horizontal scroll-bar is the best solution.
May 10th, 2008 at 4:34 pm
A few people have suggested that using ‘em’ units rather than percentages for widths is a good idea.
While there may be some cases (e.g. a sidebar) where they could be right, in the general case (e.g. the bulk of the text), they couldn’t be more wrong. em units are good for specifying relative variations in font size, but not for specifying the width of a page or column.
Some claim that from a designer’s POV, the ability to specify that a column is X ems wide and will thus contain approximately Y many words per column line is good or even essential.
That may satisfy some pet design theory or other, but it neglects to take into account one crucial fact: the correct column width, the correct number of words per line is whatever the user wants it to be at any given moment in time with whatever browser/viewer they are reading it with at that particular moment, regardless of what the designer thinks looks best.
Doing that requires specifying the width of columns as a percentage of total space….e.g. for a 3 column layout of sidebar, content, sidebar, that might be 15%, 70%, and 15% respectively.
If a web designer wants or expects me to come back to their site, they can drop any stupid ideas they may have that they CAN or SHOULD be able to control how I will view their page. The more inflexible and rigid their enforcement of their design preferences, the *less* likely I am to come back. No matter the worth of the content (although the more interesting the content, the more likely I am to make the effort to use Stylish to subvert the design and make the content actually readable for me).
May 10th, 2008 at 8:56 pm
Greetings!
well at least your fonts are nice and chunky by default on this 22″ monitor!
thanks for the pointer to nosquint – checking it out now.. as Thai web sites seem to suffer this from this even more might be a winner for Nan as well.
bye,
ZOG