fluid layout with contextual ads?

[deronsizemore]

I'm trying to cover all bases in designing a new site.

One thing I'm confused on is that if I have a fluid layout with contextual ads. Lets say that on an 800x600 resoution the site looks great with all the ad placements, etc. Then, when the resolution is set to say something like 1280x1024 the site is fluid so it will stretch to accomodate the extra space, but the ads are still going to be the same width, so you might have a content area that is 470px wide when the resolution is 800x600 which works well if you're using the 468px width google ads, but then on higher resolutions your content area becomes 800px wide and then you still have this 468px wide ad that is only taking up a little over half of the space of the content area.

How do you design for something like this? Do you just not worry about it and go with it? Seems that this would drastically throw off the flow of the site and is why I keep thinking fixed width although frowned upon as not as accessible, might be easier to manage in situations like this?

Thoughts?

[Chris]

Who ever said fixed width was not accessible? Is there some sort of "large monitor" disability I don't know about? Must we all use fluid widths so that those poor souls with their 30 inch widescreen monitors do not feel buyers remorse when the websites they are viewing do not stretch?

Fixed font sizes are said to be bad as people cannot adjust them up, but fonts aren't layouts.

[Shawn]

Fixed width frowned upon?

By who, the liberal hippy mongers? I prefer fixed -- never use fluid.

[deronsizemore]

lol. You guys think the same way I do. I like I fixed width too, but everything I read talks about how fixed it bad because people get all kinds of white space if their resolution is to big and they get a scroll bar if it's to small, so liquid is the way to go so it forms to whatever resolution the visitor is using..

Any thoughts on the actual question?

[Chris]

I use fixed so in general I do not run into this issue, you can also do a hybrid, where certain elements are fixed and others move.

Generally I either design for 800, or I design for 1020, and that is all I worry about.

[Shawn]

I design for 800px, but some huge sites like ESPN.com have stopped designing for resolutions less than 1024x780.

[deronsizemore]

I design for 800px, but some huge sites like ESPN.com have stopped designing for resolutions less than 1024x780.

Yeah, I thought Yahoo stopped designing for less than 1024x768 because if you use FireFox's web developer toolbar and resize your browser to 800x600 you get a scroll bar, but if you actually change your screen resolution to 800x600 it scales down to the correct size.

[Chris]

It depends on the audience and the site. This site, 1024, I figure if you're a webmaster you should be running more than 800x600. On my literature site though I keep it to 800x600.

[Shawn]

ESPN though seems like a pretty general audience, much like your literature site. They still seemed to think 1024px was fine enough.

[AmbulanceBlues]

They probably did the math on who had what screen size before changing to that standard. I seem to remember that this topic has come up before and somebody posted some data that said less than XX percent (in my sometimes faulty memory) use 800px width.

Edit: It was 17 percent. My memory is faulty. That was in July of 2006, which had a drop from January of 2006. It's probably even less prevalent now.

http://www.w3schools.com/browsers/browsers_stats.asp

[James]

Generally I like the extra whitespace my 1440x900 screen gives me on either side. Adds readability for me.

But what ARE you able to do other than detect the screen size and deliver a different-sized ad for each step up in resolution.

[polspoel]

There's a few things you can do:

- You can use max-width, this works in browsers other than IE, in IE you'll have to use a proprietary CSS javascript workaround.

- Use different stylesheets depending on resolution. I believe this is sort of what yahoo does. You can read an article about it here: http://www.alistapart.com/articles/switchymclayout

However, in the example there the page changes if you resize it, I wouldn't do that. I would just resize it on load (every pageview) as this seems more natural. I also wouldn't hide stuff for people with lower resolutions. It might be handy to add an extra advertisement for bigger resolutions, but I suppose you'll have to add some serverside coding for that since otherwise it will also count as an impression for other users (since it's still in the html code, just hidden (display:none)

[KelliShaver]

Bah to fluid layouts! I don't like them, either. If a site looks good at 800x600 or 1024x768 and you resize it to 1600x1200 you know what you get? A line length from hell on the main body copy that no one can read for any period of time.

I think what you want is not a fluid layout, but an elastic one-- something where content boxes, sidebars, etc. resize proportionally as the user resizes the text, so you can increase font size without breaking the layout. Oftentimes, that still won't look great re-sized, but at least it's not going to break and eleminates problems such as text overlapping.