It’s been a long time since I did any CSS coding so I’m a bit rusty.
I’m working on a personal site at the moment and the basic layout is going to be 2 columns. The widest column will contain a further three columns for some of the text content. The narrowest column is going to house the main navigation and the logo. This navigation and logo needs to remain visible whenever the user scrolls down the page, preferably without using Javascript (I think it can be done with CSS alone). The column for the navigation and logo should ideally be a fixed width, with the main content column being flexible. Hopefully that made sense.
The overall page width needs to be constrained so that users with maximised browser windows is not going to get a weird layout or have the line length be too long. The user needs to be able to control the text size (so the text needs to scale according to the user’s set text size in the browser options) without breaking the layout.
So I’m thinking I should probably go with an elastic or a hybrid layout for this rather than fixed or fluid. But in Dan Cederholm’s Handcrafted CSS book, there is a chapter covering fluid grids which was written by another guy. This guy reckons that elastic layouts are losing favour. Has any of you guys got any idea why this might be? I’ve Googled but found nothing.
Well there’s too many examples to name from my past designs, but if you’re interested, I wrote a fun article for Six Revisions outlining the various methods available:
If Dan Cederholm had allowed anything like that in one of his books, I think I would have quit the whole internet, because it was obviously going down the pan
Page zoom has undoubtedly helped, but as browsers implement it in different ways and with varying degrees of success, it isn’t the panacea that some people had hoped it would be. If a site is coded to a fixed width that is too wide for your screen, zooming out is likely to make the text too small to read.
If you’re aiming to cater for IE6, remember that that doesn’t have page zoom… Also note that the left menu won’t remain in position with CSS alone in IE6, although it will for all other browsers, so I wouldn’t worry too much about IE6 users having to scroll up to the top for navigation options.
I would still recommend a liquid or elastic layout, to ensure that the site fits on everyone’s screens and makes the best use of them, obviously with min- and max- width constraints to help legibility.
This guy reckons that elastic layouts are losing favour. Has any of you guys got any idea why this might be
Doesn’t he say why in the book? I don’t have the book so can’t comment.I think it all depends on your intended audience and on the type of content you have to display. If you have multiple columns then you will probably need some sort of min-max effect to stop it breaking.
A lot of sites used fixed widths these days but that’s usually because it is easier to code but does limit you to a certain audience in some respects.
I still prefer elastic sites but obviously if you were viewing on a mobile you might want it to be more elastic perhaps. Or if you have a 27" monitor (like my imac) you don’t want text spread all the way across.
It’s a choice that you have to make depending on your intended audience and on the content you have to display.
lol I would think so too. It was my mistake, I was thinking of the wrong book/author. The bit about elastic layouts going out of favour was actually in another CSS book, written by a different author. That particular book is actually pretty good but obviously the author has his own ideas about elastic layouts.
Page zoom has undoubtedly helped, but as browsers implement it in different ways and with varying degrees of success, it isn’t the panacea that some people had hoped it would be. If a site is coded to a fixed width that is too wide for your screen, zooming out is likely to make the text too small to read.
Noted. Thanks for explaining.
If you’re aiming to cater for IE6, remember that that doesn’t have page zoom… Also note that the left menu won’t remain in position with CSS alone in IE6, although it will for all other browsers, so I wouldn’t worry too much about IE6 users having to scroll up to the top for navigation options.
I agree, it won’t matter if it’s not quite the same in IE6 as long as it looks reasonably the same. Thanks for the heads-up. (Again thank God for my CSS books, they are full of tips and how-tos for IE fixes.)
I would still recommend a liquid or elastic layout, to ensure that the site fits on everyone’s screens and makes the best use of them, obviously with min- and max- width constraints to help legibility.
Think I’m going for elastic. That seems to be the best option.
<checks the Book>… Oops my bad! It’s not in the Handcrafted CSS book, it’s in my other CSS book. He did say why, apparently it’s because page zoom is now the norm.</closes the Book>
I can see why that would make elastic layouts kind of pointless for a lot of people. So is there some kind of hybrid layout that might suit my site better? I’m aiming to cater for across the spectrum as far as mobiles/browsers/monitors are concerned. And I don’t want my site to look crap on any device or in any modern browser (might even have to cater for IE6 even though I want to run in the opposite direction). I don’t think fluid layouts will be suitable and I don’t want to use a fixed layout unless I’m able to have relatively sized text without breaking the layout (for example if someone has their font size set differently in the browser options).
