Archives

Categories

Column Width in Blogs

I have just been reading the LinuxWorld Community blog which seems to be mostly Don Marti’s personal blog (currently there seems to be no-one else blogging on that site).

One thing that disappointed me is that the theme designer made it look good at a width of 1000 pixels and no other size. At a smaller width the adverts on the right are cut off (more of a problem for the site owner than for the readers) and at a larger width you have a thin column of text in the middle of the screen. A quick test revealed that while my own blog looks good in wide windows it doesn’t work too well in 800 pixel width and gets very bad at lower widths – my blog would be essentially unusable at 640×480 resolution as the text column in the middle (the most important column) is the one that reduces in size. The LinuxWorld blog has a minimum size of 1000 pixels for the scaling so it allows horizontal scrolling in 640 pixel width and remains quite readable.

The top entry in a google search for web size stats is Browser News which claims that 12% of web browsers are on 800 pixel wide screens. The next link I found claims that as of January 2007 there are 26% of web users with screens that have higher than 1024×768 resolution and 14% with 800×600.

Apart from the first couple of months of blogging my blog has always looked good in screens greater than 1000 pixels wide, but not having it work at 800×600 is a problem. The first thing I did was alter the style.css file for the Blueline theme for WordPress to use 100% of the display width (not 86%). Wasting 14% of the screen width is not a good thing when using a width-intensive three-column theme. This change made my blog work well in 800 pixel width and be bearable in 640 pixel width.

The other change was to use min-width: 700px; in the style.css sections blogtitle, container, and navigation. This means that at 640 pixel width the text column will take more than 1/3 of the screen and should be quite readable (unless the reader has an unusually large font setting). The down-side to this is that if your window width is less than 700 pixels then you will have some horizontal scrolling, but I think that this is an acceptable trade-off.

I was forced to confront this issue when talking to a prospective client about the potential for blogs to be used in his business, he loaded up my blog on an ancient windows machine and it didn’t look very good at all, this coincidentally happened a few hours after I had been reading the LinuxWorld blog on a big screen.

6 comments to Column Width in Blogs

  • […] Link to Article google Column Width in Blogs » Posted at etbe on Saturday, July 21, 2007 I […]

  • I agree with you on narrow windows — if it weren’t for the right-hand column (which I think has ads in it for most people — I get rid of them with AdBlock Plus and/or Flashblock to help preserve my editorial independence) then the community section of the site would work in a narrower browser window.

    But do you really want the text to stretch way out if your window is wider? It seems to me that the easiest to read columns are about 30-40em.

    For example, here’s a good short article.

  • etbe

    Don, I agree that some people won’t desire to have such long rows of text. However it is easy to resize windows to make the text look the most pleasing and it’s not THAT difficult to configure a web browser to use a default size that’s significantly smaller than the screen width.

    I think that the possibility of minorly increasing the convenience for some users who want the columns to be small and don’t want to resize the window is not worth the significant inconvenience for users such as me who have wide screens and want to use them fully.

    Also if you use a fixed pixel width then it’s bad for people who use unusually large fonts. I gave my parents a 17 inch 1280×1024 display and configured it to use large fonts, a web site that will only stretch to 1000 pixels wide will show significantly less text for them than the web designers expected…

  • Jon

    Have you considered using em-measurements? The problem with pixel spacing, whilst it has a direct relation to window size stats etc., is that you are making assumptions about the size of the fonts that people will use. I find it much more comfortable and predictable to have the size of objects on a page relative to the font size.

  • Jon

    Oh, a quick note regarding “it is easy to resize windows to make the text look the most pleasing” – it’s actually quite a faff to do this for one site in my situation. I use the ion window manager and I have my main web browser frame in the top 2/3 of the screen (horizontally and vertically). If one site rendered badly in this size, it is inconvenient for me to adjust the frames and therefore resize all my terminals and chat windows too as a consequence.

  • (commenting on comments)

    The argument for fixed width to get narrower columns on large screens is a no-op: CSS has a wonderful “max-width” option that can be used for a similar effect on large screens without messing up small screen display. The theme I use on my blog ( http://zombiehq.jollybox.de/zhq/undead-blog ) is 900px wide where there is more space, and has full width on smaller screens. IIRC, it looks ghastly on IE6, though. I think that is proof enough that the sentiments of designers of fixed-width layouts are quite unreasonable.