Friday 21 November 2003

Which border fits best?

The other reason for my recent lull in activity is that, having started to give my house a belated spring cleaning, I then decided to give my weblog a minor makeover. I still like the overall design so I didn’t want to fuss with it too much. But a few months ago I switched to a 19-inch CRT monitor and the additional pixels meant a lot more empty white space on the right. Given that the increasing popularity of LCD displays—a standard 17-inch model has a resolution of 1280 x 1024 pixels—means more pixels for more people, I decided to replace the left-aligned page design with a centered design.

I modified my Movable Type templates and stylesheets and came up with a design that enclosed both the links and the content regions with a red border. I’ll call this the “Border on Sidebar Plus Content” design (shown below, on the left).

New site design with border on sidebar plus contentNew site design with border on sidebar only
Click on either graphic to see the actual web page

However, it worried me that this design was a little too rigidly geometrical. I’m not sure that the right-hand border is appropriate for text with a right-ragged margin. (Justifying the text might solve this problem but it creates another: I think justified web text looks terrible because HTML/CSS lacks support for the hypenation and justification controls that page layout programs use to eliminate the rivers of white space in justified but unhyphenated text.)

Something else that troubles me about the “Border on Sidebar Plus Content” design is that the empty gray sidebar extends to the bottom of the red box and, on a long page, this looks odd. (Only write short weblog entries, you might say, but if I had to do that I’d probably give up blogging.)

So I came up with an alternative that I’ll call the “Border on Sidebar Only” design (shown above, on the right), which addresses the problems I perceived in the “Border on Sidebar Plus Content” design.

Now, since I’m too close to it all, I’ve decided to follow Mark Pilgrim’s example by asking for feedback on the two designs (I’m not interested in suggestions for alternate designs since I have neither the time nor the inclination to do any more work on the templates and stylesheets).

If you’re willing to check out the two designs—make sure you scroll to the bottom of each page—perhaps you’ll leave a comment stating why you prefer one design over the other.

Permalink | Technorati

Comments

Border on Sidebar Only, for the same reasons you've already mentioned. Either get yourself a mile-long blogroll, or keep the border around the sidebar only. Plus then it's only baby steps away from what you've already got, allowing for more radical changes later.

Posted by RKB on 21 November 2003 (Comment Permalink)

sidebar only. the other is too boxy.

Posted by scott reynen on 21 November 2003 (Comment Permalink)

I prefer "Border on Sidebar Plus Content"

Don't like that box hanging up there on the left in the other one.

Maybe with just whitespace, instead of a blue box.

Posted by Loren on 21 November 2003 (Comment Permalink)

FWiW, HTML/CSS does have a way of dealing with Hyphenation, it's the "shy" html entitiy (prefix with &, suffix with ;) and I think It's the only thing remaining that IE supports properly and Mozilla still cannot do (http://bugzilla.mozilla.org/show_bug.cgi?id=9101 for a very silly argument on the whole thing).

I'd agree with scott, the border on content makes it look busy and also boxy.

Posted by Aquarion on 21 November 2003 (Comment Permalink)

I don't think there's a "wrong" version here. For my two cents I'll say that when someone borders centered content I like to see some sort of contrast to the remaining white space that surrounds it. (Uh, I believe my own site reflects this...)

It's probably the leftover table-itis in me, that loves in spirit but doesn't always appreciate in practice the politically correct css positioning we're all supposed to propigate.

I think in terms of the asian influence on your design that balanced asymmetry is the way to go. And white space.

Which I believe was the original design?

See how very helpful I have been! ; >

Posted by Lisa on 22 November 2003 (Comment Permalink)

I know this won't be too helpful, but I don't like either, and prefer what you've got now. either that, or centered with the sidebar on the right. ;)

I wish I knew exactly why I had that reaction...I think it's a readability thing, but I can't quite put my finger on it.

Posted by Elaine on 22 November 2003 (Comment Permalink)

I prefer “Border on Sidebar Plus Content" for several reasons: (1) It alerts you to the fact that there is a sidebar even when it isn't on the screen. (2) It is consistent, so you aren't distracted by the sudden appearance of dissapearance of the sidebar as you scroll. (3) It is unubtrusive.

Posted by Kerim Friedman on 22 November 2003 (Comment Permalink)

Let me clarify - it isn't the border that I like, but the fact that the sidebar is visible wherever there is text in the main content. This could be achieved without the use of borders, which I am generally against, although yours are not too distracting.

Posted by Kerim Friedman on 22 November 2003 (Comment Permalink)

Jonathan, I too like the present design. I don't mind the extra white on the right. And, often I have my window set not to fill the entire screen (btw, I'm viewing with OS X on a 19 inch monitor).

That being said, I DEFINITELY don't like the left sidebar-border-only choice. It really makes the right-sided content float in a too large area of white. And it gives too much attention to the sidebar. In your present design, the sidebar is neatly anchored to the left in an understated manner. The sidebar-border-only choice makes it stick out too much. Too much weight given to secondary information (your posts being primary).

Of the two choices, I would pick the border around all. However, why don't you try making the background a slight gray and float the left and right on top of it (background of the left and right to remain white). Then you can play with the border choices (left only, both, or perhaps neither). What you are doing is isolating the entire content (left and right) but not floating it in a huge sea of white.

Posted by Jeff on 22 November 2003 (Comment Permalink)

I rarely if ever use look at or acknowledge the sidebar on any blog. I'm there for refreshed visual and written content. And I love white space. So the one on the right is right, for me.

Posted by bmo on 27 November 2003 (Comment Permalink)

This discussion is now closed. My thanks to everyone who contributed.

© Copyright 2007 Jonathon Delacour