Can anyone tell me why a web designer would add styling rules that don't affect the look of a page when viewed at what is perceived to be the most common window and font size, but that break the page when it is viewed in differently sized windows or with larger font sizes?
More than a third of my browser window is taken up with ... nothing!
One of the great features of HTML (and the browsers that render it) is its adaptability. View it with a browser, whether it be Lynx, Links, Firefox, Konqueror, Epiphany, Safari, Opera, or even Internet Explorer, and the lines adjust themselves to your browser's window. (My comments apply to visual media, and, from here on, specifically to graphical Web browsers.) Change the size of the window, and the lines reformat themselves to fit the new size. Expand the window or contract it, and, within reason, the page will adjust itself to fit. Zoom in on the text, or specify a different default size for text in your browser — all is automatically and appropriately adjusted.
For me, this is great. My monitor is set at a higher resolution than most (1280 x 960 pixels), so I need a larger font size. I sit further back from the monitor than most people do, so I want the text even larger. I need new glasses, so a little larger still, please. That's my default setting. At the end of a long day, when my eyes are tired or itching from allergies, I crank the size up even more.
Unlike other file formats, such as PDF, HTML documents will fill the screen (with ample margins, if the design is good), but not exceed its width. If I zoom in a PDF document, to make the text large enough to read, the lines are often too wide for my screen. That's why I love HTML; it works no matter what my preferences are!
So why, in Sir TB-L's name, do I see so many pages on the World-Wide Web looking like this:
Click on image for full-size view
How do I hate thee? Let me count the ways!
First, let me say that I'm really not picking on the BBC site; there are many, many worse pages on the Web. This one just happened to be in front of me when I was formulating this article in my mind, and it turned out to be a good example, not only of the problems, but also of how easy it is to fix them.
The first problem with the page is the big empty space down the right-hand side. More than a third of my browser window is taken up with ... nothing! If left to its own devices, HTML will fill the width of the page. Here, everything has been forced into an 800-pixel-wide column. Not only does it look amateurish in my browser, it will be too wide for those with very low resolution screens or small browser windows. Only the graduated bar across the top escaped the so-called designer's notice and behaves as it should.
The links across the top should be in a single line. Here, at least, they wrap gracefully. On many pages, they would be half obscured because their height would be immutable at the minuscule default size.
Finally, the text in the left-hand column overflows its bounds and overwrites some of the body of the article. This is one of the most common problems with badly written stylesheets, and on many pages (on other sites, not the Beeb's), entire blocks of text are superimposed over each other.
That actually wasn't so bad was it? What bugs me the most is that all of it is so unnecessary. It takes more work to screw up the page than it does to make it work properly.
What did the page contain that messed it up? To find out, I turned off the stylesheet, to let my browser to render the HTML by itself.
Click on image for full-size view
The same page with stylesheets turned off!
Leave Off the Agony in Stylesheets
Well, look at that! Without the stylesheet, the problems have all gone away. The layout is done with tables, which, though deprecated for that purpose, are still the simplest way to create a fluid three-column layout.
By applying a few styles to this page, you could have a good looking page in no time. That's a bit of an exaggeration, considering that the stylesheets for the page are longer than the HTML file. I don't know how much of it is necessary. I downloaded the HTML file and the style sheets and set to work.
I spent about 15 minutes going through the 700+ lines in the stylesheets, and came up with this:
Why, why, why, oh styler?
This version needs some tweaking, but it is almost certainly much closer to what the designer intended. It will work with any window size (though if the window is very small there could be problems).
What's the difference between this version and the original? The only changes I made were to remove fixed-width specifications. Where they were on their own lines, I commented them out. For example:
/* width:131px;*/
/* width:424px; */
/* width:136px; */
/* width:760px; */
/* width:625px; */
/* width:760px; */
When the rule was on the same line as other style specifications, I deleted it:
.f{margin-left:131px;width:629px;margin-bottom:10px;font-size:13px;}
became
.f{margin-left:131px;margin-bottom:10px;font-size:13px;}
There are other changes I would make if it were my page, but that's all it took to fix the problems.