...

View Full Version : Liquid layout vs fixed width



Sparky
04-09-2008, 01:39 PM
Hey there everyone!

I have always followed the idea that it is preferable to create a website using a liquid layout, as opposed to a fixed width approach. This is an idea which has been established and reinforced by a number of guides, books and respected authorities on the subject.

It’s something that I have recently started too question. First of all, it seems that a good proportion of sites on the internet (certainly many of the very large established companies and sites) take a fixed width approach to their website. From my own experiences, it appears that the fixed width approach offers a number of advantages to designing and creating sites – especially those that are image heavy (such as sports or news sites).

If my observation is correct, and there is a majority for fixed widths? Is this just a case of the minority being “right”?

What approach do you use, as a designer and developer? As a user, do you prefer one approach to the other?

bazz
04-09-2008, 08:38 PM
You'll find more if you search CF as this has been asked before.

It depends on the audience of the site. Many people, if not most, browse with a half sized window so that they can see other stuff by using more than one window. Tabbed browsing may make this less necessary some of the time but there will always be people whoi browse whilst they haveother windows open such a word/open office etc.

I think it is true to say that the BIG guys (who have had a website going for years and since before browsers were standards compliant or even close to it) have no need to spend considerable sums of money to achieve something that will not improve their bottom line. people will visit their sites regardless, for the while at least), and so they don't need to change.

But I think it best to design with fluidity in mind, not just for the one browser however the visitor plays with it but for making the site visible in many other browsers/hand-helds etc.

my 2c

bazz

gnomeontherun
04-10-2008, 04:27 AM
I think fluid design is harder, so more often than not people will tend to use fixed designs. I would agree, design with fluidity in mind. That doesn't mean you have to make the site completely fluid, but think about how the layout works when the browser is resized, or if the text is resized by the user, and so on. A fixed width can still manage to adjust for such things if planned well.

_Aerospace_Eng_
04-10-2008, 05:55 AM
When you want to create shadows on a layout fixed width is easier to make. Things get tricky when you try to make a fluid layout with drop shadows. Check out my site. That took some thinking. Alistapart.com is a some what fluid site. When you resize the browser you'll get a horizontal scrollbar eventually but the main content is usually always visible.

pilas14
04-10-2008, 10:15 PM
When you want to create shadows on a layout fixed width is easier to make. Things get tricky when you try to make a fluid layout with drop shadows. Check out my site. That took some thinking. Alistapart.com is a some what fluid site. When you resize the browser you'll get a horizontal scrollbar eventually but the main content is usually always visible.

I seriously doubt drop shadows are the biggest concern with fluid layouts.

There's a different way of thinking when coding a liquid layout. You have to be willing to compromise original design if you can't hammer out a problem one way or another. There isn't any 'quick fixes', as there are with fixed layouts. If I can't get a box to sit just right in a fixed layout, I just absolute position it. Screw the math, screw the percentages. I just put it 11 pixels down and 300 across.

But when coding liquid layout, you have to do your math. You have to have a plan. If you don't, the workload will seem insurmountable.

The first layout is the hardest. Figuring out those small nuances by reading guides you didn't know existed before trying make it frustrating. You can read 101 things about liquid layouts from alistapart and still not understand a damn thing you're doing.

I know my first liquid layout was the simplest-looking of all the layouts I've ever made. That's because I had to experiment and trust my gut. I had to give a lot of the design aspects up and learn what limitations I had as a beginner.

Here's what it ended up as >>> http://www.fallensweetheart.com/sakura_flowers/premade/mini-sandbox/index.php

But it took me over 6 months to finish it.

OMG SIX MONTHS, my friends say. I'm like...well, yah. I cared about it. I wanted to make it work.

Now I have my second liquid layout done and I've been working on it for a year. But it's a major overhaul of everything and I've added a lot of elements I've never tried before. The funny thing is, I'm stuck on a problem concerned my parent content box totally encircling a float object. Isn't that ridiculous!?

Just be patient and keep working at it. Don't give up on it because it's not "everywhere" on the web and the major websites won't bother with it. Liquid design is totally worth the effort to learn.

Peaceout.

Markxxx
04-12-2008, 11:00 PM
I found the best thing to do is to design for 800X600 and then put that in a table and center it. Yeah I know CSS says not too, but the liquid designs are very poor since you have so many different browsers, versions of browsers and stuff.

Especially with laptops. Of course I had one guy want me to do a simple webpage and he was fussy so I just read what type of browser and monitor and then fed a different CSS/XHTML for each type.

That works great and I noticed a lot of the big companies do that if you view their source code.


The funny thing is CSS was supposed to stop this kind of thing but in fact it just added to it.

PappaJohn
04-13-2008, 01:19 AM
I found the best thing to do is to design for 800X600 and then put that in a table and center it.
So, if you want to design for 800x600 fine, why put it in a table? There's no need for the table, you can design fixed-width, table-less, cross-browser layouts using proper semantic coding.

oldcrazylegs
04-14-2008, 09:04 PM
here are some fixed-width centered css layouts that are easy to figure out. you can use them as examples. examine their source code.

http://www.designsbydarren.com/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum