Fixed Or Liquid?
11 Sep 2004 09:29 AM
I know this topic has been beaten to death, but being the sadistic bastard that I am, I thought I’d bring it up again. The current version of this site gives you the choice of using either a fixed or liquid layout via the style sheet switcher in the sidebar. I thought about trying to gather some stats on which style sheet people were using most, but I’m in a typical lazy non-coding mood right now. Well, the next best thing I could think of was to post an entry here asking you what you prefer. Yeah I know, brilliant solution there JB!
Firstly, let me give you some background info on my browsing habits and preferences. My current screen resolution is set to 1280x1024 (19″ monitor) and I always browse with Firefox maximised. As a reader, I prefer fixed width layouts because they are generally much easier to read. They also tend to look more aesthetically pleasing to my eye. As a designer, I also prefer fixed width layouts because they are easier to create and allow greater control over pixel precision.
I find it difficult to read most liquid sites because the line lengths become far too long at my screen resolution. “So resize your browser” I hear you say. Why should I have to resize my damn browser? It seriously pisses me off having to resize just so I can read the content comfortably. I’ve even started getting into this really bad habit of highlighting the line I’m reading with my mouse, just so I don’t lose my place when it’s time to jump to the next line! “Liquid sites give user’s a choice” I hear you scream. Choice? At what cost? My choice might be to simply leave your site.
We all know that better browsers can use the max-width property to prevent this from happening, but I hardly ever see it used. Let’s not forget about the poor lost souls still using IE, which doesn’t even support this property (yes I know there are other ways).
As you can see, I decided to give the user a real choice by providing alternate style sheets. It wasn’t easy and the additional mark-up was a little hard to justify. I also had to use larger images for the header to avoid an unnatural look when viewing the liquid layout at large resolutions. A few things to point out are:
- The fixed layout fits in 800x600. I was going to go with 1024x768 but the global reinvigorate stats convinced me not to.
- The liquid layout uses min-width (420 pixels) to avoid total layout destruction. It manages to work well in small resolutions such as 640x480, but probably looks like crap on a pocket sized screen.
- The liquid layout uses a max-width of 1200 pixels to avoid extra long line lengths. This also helped avoid making the header image file sizes ridiculously large (they are still pretty big though).
- Large images within the content have been wrapped with an additional element (using overflow: auto) so a scroll bar appears when the browser window is very small. You can see the effect in my denormalization article if you use the liquid layout. I don’t like it, but it was the only way I could prevent the liquid layout from exploding.
- There’s more but my brain is stuck right now.
So, was it worth the effort? Which layout do you prefer? Which layout should be on by default? How do you browse? Do you prefer Pepsi or Coke? Who really framed Roger Rabbit? I really want to know!
- Posted by John Serris in Web
1. 11 Sep 2004, 09:53 AM | Sam said…
Nice post John, kudos to the nice linkage there.. a couple I hadn’t read.
As for your question.. personally, I love the ability to switch between fixed and liquid. The liquid layout of your site looks fantastic at full screen on my Powerbook, but reading is much easier using the fixed.
Great work on implementing this, and I would love to see some stats on who is using what!
2. 11 Sep 2004, 11:16 PM | John said…
All your options are executed to a very high standard.
For some reason, I leave this site as fixed with the left menu.
Odd, because I normally prefer right side menus.
Look forward to any conclusions.
3. 12 Sep 2004, 04:09 AM | John Serris said…
Hmmm… I just have to figure out how I’d gather stats on this. Right now the style switch is done client side. I wouldn’t want to have to make a round trip to the server just so I can get stats. Might be time to look into using xmlhttprequest. Anyone got any bright ideas?
4. 12 Sep 2004, 12:04 PM | coda said…
Agreed on the links - John, you’ve clearly done your research on this topic. I hope it was worth the effort (providing the choice, not the research), although I have a feeling that the only visitors who will really bother with the styles are other designers, which is fair enough because I’m guessing that’s majority of your audience.
I prefer the fixed layout line lengths because I browse with Firefox maximized at 1400x1050 (damn notebook displays), but find the liquid layout more aesthetically pleasing due to the better use of browser space.
That said, if liquid was the default I probably wouldn’t bother changing to fixed, (a) unless I know what to expect (page refresh or not), and (b) I know it will be permanent (i.e. cookie). But providing all of that info along with the switcher itself seems overkill.
I’ve had my fair share of experience with the style switcher. In one of my previous designs I provided about 5 different “themes” primarily to demonstrate the flexibility of CSS and for more design freedom. The implementation consisted of a
formselect box, which when changed reloaded that page and set a cookie and DB entry. I didn’t mind reloading the page if it was just a once-off. But in the end, I found I was the only one using it (granted I don’t get many hits) and the effort behind maintaining so many style sheets wasn’t worth the thrill it might have given a handful of users to see my site redesign itself. How that compares to your situation depends on your switcher usage, so I don’t know.My latest design uses the IE max-width technique you’ve linked to above, in an effort to provide the best of both worlds. A liquid layout, that’s fixed up to a point - it’s optimized for 1024x768 and lower, so stops at around 980px. I also wrap my large images and in some places text with
overflow:autocontainers, and find it works well enough. But I’ve sacrificed validation in the process - which a year ago might have changed my mind; these days validation is a bonus. I guess as long as I know my markup is valid, and I’ve implemented proprietary solutions to benefit 50% of my visitors, then I’m happy. ;)Coke all the way.
5. 12 Sep 2004, 01:01 PM | John Serris said…
Coda, first up I have to say that I love your site mate. It’s one of the best liquid designs I’ve seen. Back to the topic…
You are probably right in saying that not many people will use it. We’ll soon find out though. I just put together some quick php to read the style sheet cookie (which I initally set via javascript on the client side) and log it. I can actually see people are using it already. Honestly though, I’m not fussed if they don’t.
I enjoyed the challenge of doing the liquid layout. Once I had that down, it was pretty easy to provide alternate style sheets for the other layouts (with only a few extra lines of css too). I’m also thinking about adding the max/min width javascript solutions for IE. We’ll see… My stats are showing IE usage declining majorly lately. I think I’m gonna post something about that soon :)
6. 12 Sep 2004, 02:36 PM | John Serris said…
John, I can see you coming in from your b2 stats pages. Looks like you are using fixed/right side bar ;)
7. 24 Sep 2004, 04:41 AM | Todd said…
The article and the site have been a big help. I’m just getting into CSS design and finding all these great places that use standards to create great work. I’m porting my abilities from flash design and video work, so the challenge is there to create flowing pages with CSS. The liquid v. fixed is incredible to see, but I think I’m the only one in my organization viewing with Firefox, so the switching feature doen’t seem that useful for my day job. I’ll be back to check out more. Thanks :)