Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2003
    Location
    UK
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Liquid layout vs fixed width

    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?

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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

  • #3
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Last edited by _Aerospace_Eng_; 04-10-2008 at 07:03 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Apr 2008
    Location
    Dayton, OH
    Posts
    31
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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/saku...dbox/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.

  • #6
    New Coder
    Join Date
    Oct 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Senior Coder
    Join Date
    Apr 2007
    Location
    Quakertown PA USA
    Posts
    1,028
    Thanks
    1
    Thanked 125 Times in 123 Posts
    Quote Originally Posted by Markxxx View Post
    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.

  • #8
    Regular Coder oldcrazylegs's Avatar
    Join Date
    Feb 2004
    Location
    East Moline Illinois USA
    Posts
    414
    Thanks
    4
    Thanked 5 Times in 4 Posts
    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/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •