Comments

1. I'm using IE 5.0 on a Mac, though I have a large monitor set to 1152x870. I didn't notice the problem until I tried resizing the window to a smaller size. As Jeff reported, the columns were suddenly no longer side by side but stacked one atop the other.

   Further, opening the window much wider did restore the side by side, but they did not fill the width as I imagine it would on Mozilla, NS7, etc.

   I'd say something disparaging about the use of CSS for layout and how a 5.0 browser shouldn't be considered a dinosaur, but, well, I've already done that in these pages.

   Comment by Cheshire at 19:45, 10 Jul, 2003 #

2. Cheshire: IE 5 is not a dinosaur, I just don't have a Mac to try the layout in, it fits just fine in 800*600 on Windows.

   Furthermore, this weblog can be read in a resolution of less than 800*600, with the columns on top of each other (on a PDA for instance) thanks to the wonders of CSS. Had I used a table-layout instead, they'd have to scroll horizontally. That's not a bug, that's a feature. I just didn't want it to kick in at 800*600.

   The new stylesheet better adapts to the screen resolution. I'll make it primary later this evening, unless I notice any problem with it.

   Comment by Tomas at 20:14, 10 Jul, 2003 #

3. I appreciate the idea that you consider the flexibility a feature, rather than as a hindrance, Tomas. It's just that as a designer, the site doesn't work nearly as well to me top-and-bottom as it does side-by-side.

   I pity web designers who have to try for such flexibility -- it's hard enough to make a site look good one way, let alone several, just to accommodate people with different browser capabilities.

   My own approach is to usually design for a 600-pixel width. Sometimes 700-pixel, but rarely. As you point out, it's much easier to scroll down than across. If a site is designed specifically to scroll horizontally, that's fine, if there's a good reason. (My design mantra -- there must be a good reason for everything. Haphazard design? Homey don't play that.) And a user should never, ever, have to scroll both horizontally and vertically. That's just cruel.

   I'm sure CSS has its virtues, beyond greater typesetting control (which, as I've pointed out before, is unexpectedly inconsistent). But until everyone's on a browser that supports even basic CSS positioning, there's no way I'm going down that road, not while tables are still 100% reliable. CSS? Uh, about 20%, I'd say, without major hacks and runarounds.

   Comment by Cheshire at 22:22, 10 Jul, 2003 #

4. Cheshire: That my right column folds under the other when there's too little room is a feature, I could just as well force a horizontal scroll if I'd prefer that, it's not a requirement due to CSS-based design. It's a conscious choice on my part, unrelated to CSS.

   Like you, I think the site works best with juxtaposed columns too, which is why everybody with over 800*600 resolution gets that (instead of horizontal scrolling which would be the alternative).

   I don't use any CSS "tricks" at all. Except for the occasional use of adjacent sibling selectors, which isn't really a "trick" per se. That you think resorting to tricks is some kind of requirement with CSS seems to indicate that you're not that deep into CSS. I could of course be wrong, but that's what it seems like judging from your comments.

   Also, 600 (all the way up to 800) pixels wide designs look bad in high resolution, imho. I always resize my browser window when I happen to visit a low-res optimized website.

   It boils down to either optimizing for old browsers or for new ones (since IE4.1 or so). Why optimize for the scarce few (less than 5%) using an old browser?

   Comment by Tomas at 23:02, 10 Jul, 2003 #

5. Tomas, I know you consider it a feature. That's fine. Maybe you're right and I'm not too deep into CSS -- that's a definite possibility. However, I've been following A List Apart for quite some time, and it seems that many of their articles have been about this hack or that one, that a reasonably competent designer needs to use in order for his/her site to display correctly on the array of browsers people use.

   Plus, maybe I didn't understand something. When you wrote (emphasis mine), "Serving a somewhat narrow left-column (50% of horizontal space or so) to people with low resolutions and a rather wide left-column to those who have screen space to fill, requires a certain amount of CSS tinkering," what exactly did you mean if not employing some kind of nonstandard CSS approach? Isn't the goal of CSS to make it easier for designers to create accessible, flexible sites? Sounds like you had to jump through a lot of hoops. Not how I want to spend my time, thanks.

   We're going to have to agree to disagree: from a usability standpoint, I just think that forcing the navigation below a lengthy column of content just doesn't work for me. By the way, it's the same with Windows IE version 6 that I have running here as well.

   Note: I hadn't followed the link you provided to the new layout until a few minutes ago. It does indeed adjust its size on my browser, to a point, and then it just adds white space on either side.

   Bottom line: you consider the top/bottom alternative a feature. I call it a design liability. If you want to appeal to people viewing your site on a PDA, I think you should probably employ a detector that funnels those visitors to an alternate style sheet that would work better on their device than the top/bottom alternative.

   Comment by Cheshire at 00:18, 11 Jul, 2003 #

6. Cheshire: What I ment by "tinkering" is that I had a bit of a predicament: the two columns should fit in a reasonably low resolution, yet the content column should be rather wide if there's room for it to be, but only up to a certain width, after which it's just becomes too wide. Maybe I didn't make that as clear as I could have, in hindsight, I probably didn't.

   Thus, the approach isn't nonstandard (a similar approach could be used with a table-based design), it's the predicament itself (use all width when there's not that much of it, use a lot but not too much when there's lots of it) that requires "tinkering".

   Were I to use a table-based layout instead, I'd face the exact same predicament; should the columns fold or should the user scroll horizontally? If the columns should fold, how do I make the best use of the horizontal space in any given case? This has nothing to do with CSS, you are extrapolating too much from my layout predicament when you assume that it has.
   

   Comment by Tomas at 10:45, 11 Jul, 2003 #