Jump to content

Fixed Vs. Fluid Layouts


Guest FirefoxRocks
 Share

Recommended Posts

Guest FirefoxRocks

This is still a debate going on with web designers obviously. Therefore I have checked out the Top 20 sites to see what they use (however I removed duplicates so there's less than 20):

  1. Google - mostly fixed?
  2. Yahoo! - fixed
  3. Facebook - fixed
  4. YouTube - fixed
  5. Windows Live - fixed (fluid headers)
  6. Microsoft Network (MSN) - fixed
  7. Blogger.com - fixed
  8. Wikipedia - fluid
  9. Baidu.com - mostly fixed?
  10. Myspace - fixed
  11. QQ.COM - fixed
  12. Twitter - fixed
  13. RapidShare - fixed
  14. Microsoft Corporation - fixed
  15. WordPress.com - fixed (fluid header)
  16. 新浪新闻中心 - unknown, blocked by OpenDNS

As you can see, most of the sites have fixed layouts. All of them fit the minimum of 1024 width screen resolutions.For 2 column layouts, here are the basic layouts:

  • Fixed width
  • Fluid content column, fixed sidebar
  • Fluid columns

For 3 column layouts, this could work too, for fixed widths, like Facebook.What do you use on your sites?

Edited by FirefoxRocks
Link to comment
Share on other sites

I prefer using fluid layouts whenever possible. Note however (just in case you didn't checked that part out) that a fluid layout doesn't have to use "float". It may be achieved with absolute positioning and percentage values too.I use it because the site would work regardless of sceen resolution. Where I live, there are various resolutions all around, and it just doesn't cut it if you support just 1024x768. There are also many 1280x1024, some in between, some slightly larger (1400x1200 or something like that), and a few 800x600 even, though the percentage of those is really low, and such users would also use Windows 98 and IE5.5, so those are not a priority. BTW, the display on all computers I work on, and the larger part of computers I encounter is from the many 1280x1024 ones.

Edited by boen_robot
Link to comment
Share on other sites

I always use flexible layouts. If you worry about your page getting too thin, just use min-width.Flexible pages are easier to navigate: not everybody browses with a maximized window, so even if you do only want to support larger screens, people still may have trouble when they want to have several windows open.My laptop has a resolution of 1024x768 and won't allow higher. It's about four years old. I still get annoyed when I come across pages that give me horizontal scrollbars. How much space can you need to display some text information? I only tolerate horizontal scrollbars when viewing things that are intended to be wider than the screen, such as high resolution images. 1024 pixels is not that small, really.

Link to comment
Share on other sites

Coincidently enough, I'm working on a site that will be with a fluid layout. Currently, it works fine with min-width of 600, which to me means "any resolution" :)... not that anyone uses 640x480 though. Does anyone support 800x600 and below, or am I the only crazy person around here?

Edited by boen_robot
Link to comment
Share on other sites

I support 800x600 most of the time. Sites that are 760px wide look pretty good on my monitor, though I only use 760px as a min-width and not a fixed one.

Edited by Ingolme
Link to comment
Share on other sites

Ok I think I'll stick to a min width of 964px since that's what the Facebook header bar uses for the fixed width layout.
I don't get it... why do you have to be influenced by what Facebook uses? If you want to look like Facebook for popularity's sake, copy its color scheme, and positioning of things... no need to copy its fixation. No need to copy anything just because "all popular sites use it". In fact, often tmes, popular sites can get it wrong in terms of "how it should be" for the sake of doing it quickly.
Link to comment
Share on other sites

Guest FirefoxRocks

Synook said that 960px is a pretty common width for sites. And a year ago, Facebook did have the width at a bit less than 780px I think.I don't need to copy the colour scheme because I can use different CSS files to change the colour if necessary. Copying the positioning would be inappropriate for this case because the elements are different.Just tell me if this is OK when expanding and resizing the window in different resolutions, because I think it is ok: http://portal.trap17.com/sandbox/t2.php

Edited by FirefoxRocks
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...