Fixed or Variable Width Layouts

[ackerley1]

I have been designing most of my sites around a fixed 750 to 780px centered layout and lately I have had 3 clients strongly question why it was that way and why they could not utilize the full screen. My best efforts to explain the various resolutions and screen sizes and trying to make it compatible across all platforms was the reason behind it. They show me sites like Beaches Caribbean Family Resorts - All-Inclusive Caribbean Vacation that span the whole screen and I show them sites like MSN.com. I also show to them sites like ESPN: The Worldwide Leader In Sports and Yahoo! who appear to disregard low res settings and layout their pages for widths around 900 to a 1000px (catering to the large 1024x768 res users). None of them seem to care, they just want their screen to be filled with stuff.

So I guess I am stuck on what methods to use to resolve such issues. I have had little success with full spanning sites and like the control of the fixed width layout, but should I abandon the 800 px constraint and use the 1024 instead?

Is there a good and simple way to create variable width sites without it looking like crap on extremely low or extremely high res settings?

some examples. Travel Belize - Xanadu Island Resort, Ambergris Caye, Massage, Mobile Massage, Calgary Massage Therapy, Calgary, Swedish Relaxation Massage, Massage Therapy.

Any insight?

Rob
PS Don't look at my signature link... outdated and relatively abandoned

[speed]

Some of our hosting clients where asking this question, so one option which I documented on our forums was to load different style sheets based on browser width.

Simply you continue to design for 800 and always include the style sheet for that width, then you use JavaScript to detect the browser width and load a style sheet that best matches the browser width. This 2nd style sheet then modifies the width and background images from the base style as appropriate.

To ensure that people with JavaScript disabled still see a nice layout it is important to always load the base 800 layout without using JavaScript.

This of course does require you make use of CSS and if replacing images with high resolution versions then the images must also be referenced within the CSS rather than img tags.

Using this you can continue to use fixed width layouts as well as fluid.

Alternatively you can create fluid layouts and design your page and graphics such that it stretches to fill the page, min-width and max-width can be useful for limiting the width changes, except for IE6.

[DaveSawers]

Fixed width websites are so last year don't you think?

Why wouldn't you allow the size to float to fit the screen width the user chooses? You are designing sites for users, so give them what they want.

And you don't need alternate CSS files (except perhaps for mobile devices) and you don't need to use Javascript browser detection either.

[dharrison]

Originally Posted by DaveSawers

Fixed width websites are so last year don't you think?

Actually no. I am getting more call than ever to design fixed width sites. A good indicator is at my client's initial meeting where I ask them to pick a couple of sites that they like the look of. If its a fluid site, fair enough, but I am finding that fixed is preferable.

OK so maybe fixed not at 800 x 600 as this is being phased out but certainly 1024 x 768.

Besides have you ever tried to read text across a long screen? A bit of whitespace is good for any website.

ackerley, I would definitely recommend a separate stylesheet for the low res called up for thus:

<link rel="stylesheet" href="./css/yournormalstylesheet.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./css/handheldstylesheet.css" type="text/css" media="handheld" />

A good article about this can be found at Media Queries and Handheld stylesheets - Slightly ajar - by David Storey. I also wrote about fixed design (and my reasons for doing so) at: Small business articles, SEO web design articles - DVH Design

Hope this helps.

[speed]

Originally Posted by DaveSawers

Fixed width websites are so last year don't you think?

Certain designs of websites may not lend themselves to being fluid, i.e. those that are very graphically rich as the images may not stay meshed during scaling.

In which case you have to stay with fixed width, but the option I proposed would allow you to effectively have a low resolution and high resolution fixed width variant.

[DaveSawers]

Originally Posted by dharrison

Actually no. I am getting more call than ever to design fixed width sites. A good indicator is at my client's initial meeting where I ask them to pick a couple of sites that they like the look of. If its a fluid site, fair enough, but I am finding that fixed is preferable.

I'm surprised at that. When I point out the benefits of variable width, my clients tend to go for that.

Originally Posted by dharrison

Besides have you ever tried to read text across a long screen?

If that's the case then the user can reduce her browser width! That's the whole point of a flexible design.

Looks like I'm outvoted on this topic for the moment though

[speed]

Originally Posted by DaveSawers

Looks like I'm outvoted on this topic for the moment though

On the contrary the bulk if not all my latest sites are 100% fluid.

The only reason I would do fixed width is if there was a specific reason for it such as the requested design simply can't scale with a fluid layout.

I agree with Dave when he says reduce the browser width, this machine is running at 1920x1200 which allows me to view 2 websites at once or reference material while posting, I can't imagine ever running a browser maximised. However max-width on supported browsers helps with the line length problem.

[Dubbya]

I prefer fixed width but it always depends on the content and what the customer wants.

You can be "right" and lose the client, you can give your customers what they think they want or you can do some research and show them why your idea is best for their site users. Work out a compromise based on proven data from your server logs.

You'll probably see that the vast majority of your users are viewing pages at 1024 x 768 or greater.

Regarding fluid layouts, I can't stand looking at a TFT display with a ridiculous resolution and seeing a center column that's 1400 pixels wide with left and right columns that are 250 pixels wide on either side of it.

IMHO, a great fluid layout will incorporate centered content with a max-width and min-width to place some restrictions on the design.

The content, headers and footers should neither collapse nor expand to a point where they look silly.

[dharrison]

Originally Posted by DaveSawers

If that's the case then the user can reduce her browser width!

Then with respect why should they? One of my clients views the internet on his TV (one of these integrated packages). He cannot reduce his browser width.

At SES London one of the seminars focused on web design and the emphasis was whitespace is not a bad thing on any website (or black or red, etc).

[ackerley1]

All, thanks for the insight... seems I am not the only one who questions this on a regular basis.

Any ideas on good ways to decorate that white space on larger res sites?

Where is good reference for the min/max width settings... is this CSS? Can it be set on any element? <p>? <div>?

[LD]

If a client is fixated on fluid design I'll go with them on it, but I still rather do a fixed width when there are no restrictions on layout imposed. To me it just feels and looks better. I agree with white space being a good thing as well.

The hardest thing sometimes is to convince the client that everying including the kitchen sink in any design is not a good thing. Most defer to the designers experience, but some are just intent on getting it their way because they are paying for it. Then - so be it. All one can do is try.

[Windsun]

Personally I dislike most fixed width sites, perhaps because so many seem to still be going for 800 or even 640, and it leaves half my screen blank.