What I want from movable type is a better "new entry" template. The current template has a text area that's about 500 pixels wide which is about exactly half as wide as I'd like (and because of how poorly it was implemented, I can't even use my simple enlarge textareas bookmarklet).
I run across this same problem with content at an uncountable number of blogs and other sites; the authors assume a font size and screen resolution and then lock in the text area or content column to some hard pixel value that yields the 10 to 15 words per line they think will be most readable.
Well, I've got about 1400 pixels of horizontal real estate and run with my fonts jacked up two or three levels. The MT text area, which gives about 15 words per line at Firefox's default font size, gives me about 7 words per line at my preferred font size.
I'm reading most of my "regular reading" weblogs in Forumzilla now, with the exception of my big "Mozilla blogs" bookmark group. (I'm trying to avoid a vertical scrollbar in the server pane in Thunderbird/Forumzilla.) Out of the twenty or so Mozilla blogs that I read, there are three exemplary blogs which help to describe my predicament.
The first blog, by James Cox, demonstrates "the problem". If you visit his blog, Home is where the heart is. Apparently, and zoom your fonts up about 3 times, you'll see that the number of words per line drops significantly. For me it goes from about 15 down to something under 10. James' "content" div is locked in at 600 pixels so if my fonts get larger, fewer fit on each line. His page layout looks quite nice and is fairly easy to read -- if you're viewing it at his resolution using the same font and font-size that he is.
The second blog, by Henrik Gemal, tries to be better by using ems to define the widths of the various sections of his blog. Unfotunately, this ends up working against me because he defines padding and margins in ems and so if you zoom your fonts up several times, the margins and padding grow dramatically. To see what I'm talking about, go to Gemal's Psyched Blog and zoom your fonts. Watch the main content column actually shrink in width as your font size grows. When I view at the default font size, I get nearly 20 words per line but if I zoom my fonts three times, that drops to about 5 words per line.
The third blog in my little Mozilla blog tour, by Chris Blizzard, gets it right. He uses a table but the effect is exactly what I expect when I zoom my fonts. At the default font size, I get about 14 words per line and zoomed I still get between 12 and 14 words per line. Check out Chris' blog and see for yourself.
I'm certainly not without guilt on website usability issues and I don't mean to pick on James or Henrik -- who both have very attractive blog designs -- but I do think that as screens get larger (and particularly, wider) that this is going to be more and more of an issue.
And, yes, I'm aware of the myriad of usability studies that say 10-12 words per line is most readable and I'm not even suggesting that websites give me the 20 words per line I'd like (and that I can often afford with my resolution.) I am suggesting, however, that they keep in mind that my font size may not be the same as theirs and try to give folks like me, who have the resolution to afford a larger font size, a similarly pleasant experience with at least as many words per line.
Posted by asa at April 15, 2004 11:53 PMI think one of the major differences between the two "bad" sites and the one "good" one is that the first two have a side navigation.
This makes it more difficult to expand the main content without pushing the navigation off the screen or overlapping it with the main content.
Also, I can make my fonts larger on the first two sites and the page still fits in my window. When I do this on the last site I end up with a sideways scrollbar which is particular annoying.
I see the point that you are making, but I'm not sure any of these sites are good examples of how to handle the issue well.
Posted by: Chris Pederick on April 16, 2004 12:07 AMlwjgl.org seems to handle this fine, and has a menu to the right...
Posted by: Brian Matzon on April 16, 2004 04:16 AMYes - that's a good example. It uses ems for the column widths and this is why it is able to resize nicely without screwing up the layout.
It's similar to Gemal's design without the margin and padding issues...
Posted by: Chris Pederick on April 16, 2004 11:25 AMWell, there are lots of other examples like that (even within the mozilla blog list at http://weblogs.mozillazine.org/) but that doesn't even attempt to constrict the main content column to any specific width (I love sites like that, that's how this blog works).
I appreciate that but I also understand that people want to restrict their main content column to something closer to 10-15 words and not have it just fill all of the available space. It's this case, where they want to restrict the column width but are going about it the wrong way, that bothers me, and that I was trying to highlight with this post.
There's just no good reason not to make room for at least a few font-sizes up and down. In 9 out of 10 pages, it wouldn't cause any problems with overlap or pushing the navigation column off the page.
Posted by: Asa Dotzler on April 16, 2004 11:29 AMThe only reason Blizzard's page "works" is that he has a <pre> element in one of his posts right now. The contents of that element don't wrap, so they force the table to expand with the font size. When none of his posts contains pre-formatted text, the table won't expand anymore.
Check out CSS Zen Garden: Elastic Lawn for a cool standard-based design that really scales with font size.
Even better are sites like 1976design, which use the max-width property to scale with the font size without going outside the browser window. I did the same when I set up the CSS for the CodeCon wiki. Unfortunately this doesn't work in IE.
Posted by: Matt Brubeck on April 16, 2004 11:34 AMBy the way, adding ".blog2 { max-width: 50em; }" to the CSS for this weblog is a nice scalability improvement (change the number if you want more or fewer max words per line). Try it!
Also, getting rid of the comments pop-up, which among other things has a hard-coded pixel size and doesn't scale with fonts...
Posted by: Matt Brubeck on April 16, 2004 11:41 AMThere are also other options.
Posted by: Fox on April 18, 2004 11:25 AMYea, I have the same problem, though not so much with weblogs as with news sites, etc. that have such small default font size and column width that I end up with about 2 words per line. Don't they realize that some of us run 1600x1200?
Posted by: backpack on April 21, 2004 06:06 PM