Although my experience is limited, most of your targeted users are probably widescreen. Width that being said, I would say to stick to percentages. I have seen some websites that choose a css layout based on resolution, but I am not entirely sure how to set something like that up, all I know is that is passes parameters with the css, and the css is generated server side. It is a serious thing to consider though, any designer wants to be sure that the important stuff is seen.
I would say that 100% is the best since it fills the page and adjusts to the users screen.
I always use width 100%!
I wouldn’t use 100% width since many people have different monitors and resolutions. For forums its ok to have 100% width, but for websites i think best solution is to use 960 grid system.
Have you read any of the posts above that explain at great length why a 960px with is a really bad idea?
Waste of time even arguing it, people will just keep sleazing out crappy fixed width websites because they have their heart set on doing things in their designs that have no business even being on websites in the first place… Which is WHY some people actually seem to think grids and 960 idiocy is actually useful… I often wonder if it’s like my “visual programming” mental block; where dynamic layout is a conceptual hurdle some people just can’t grasp – they NEED the fixed sizes because the idea of having things adjust, or adjust between a constrained range is outside their comprehension.
Depressing given that such sites are typically accessibility train wreck, but it’s like the people who defend using PX metric fonts on their content. They’re gonna keep making absolute garbage no matter what we tell them because it’s “too hard”.
Laughable considering I think dynamic/elastic hybrids as semi-fluid are WAY simpler to work with since it auto-adjusts to whatever you plug into it, instead of having to micromanage every last little stupid element width.
Can you please tell me how would you make websites like youtube or pornhub or similar with fluid width, or why all who make themes make them with fixed width. For example rockettheme is strongest theme provider for joomla and they make themes with fixed width. I have read posts above and i have really found one post where someone explain why fluid width is bad for big monitors and i have big monitor and its really hard to read text, constantly moving head left - right, than someone explained that windows 7 have option to split screen in two but not all users have windows 7. Most resolutions browsing internet are between 1280 and 1366 resolution so not a big difference if it would be fixed or fluid, if you make comercial themes you will just make it more complicated to user with fluid width because he will have to deal with different resolutions, and none of regular users dont want to deal with this, they want to be on every monitor, every resolution, every browser, every system, exactly as they see it. If you make some specific themes, or personal project and you want to deal with everything than it’s ok to make fluid layouts. If you are making it for regular user who wish just to enter their text, and no much knowledge than fixed width is must. If you don’t like 960 grid than try 978 grid.
A combination of laziness, incompetence and ignorance…
I have read posts above and i have really found one post where someone explain why fluid width is bad for big monitors and i have big monitor and its really hard to read text, constantly moving head left - right,
If you don’t like having a full width of text, why do you run your browser maximised? Set the window to an appropriate size and you’ll have no problem. I have my browser window set to a size that I find comfortable when it is filled with text. If you don’t do that, that’s your choice, but you shouldn’t expect designers to make their design worse for other people just to accommodate your bad choices.
than someone explained that windows 7 have option to split screen in two but not all users have windows 7. Most resolutions browsing internet are between 1280 and 1366 resolution so not a big difference if it would be fixed or fluid, if you make comercial themes you will just make it more complicated to user with fluid width because he will have to deal with different resolutions, and none of regular users dont want to deal with this, they want to be on every monitor, every resolution, every browser, every system, exactly as they see it.
It really doesn’t matter if it isn’t exactly the same on every computer. No user is going to visit the site on two different machines and complain that it looks slightly different. What matters is that whatever set-up the user has, it looks well-designed.
If you don’t like 960 grid than try 978 grid.
[FONT=Verdana]Yes, good move 
a 960px is too wide so we’ll solve the problem by using a 978px width instead.
Huh??[/FONT]
Let’s use the former as an example; speaking of websites that are broken and useless on my netbook and tablet and I have to dive for the zoom to use on my desktop! (Both too big AND too small, thanks fixed width with px fonts!)
Open up the center column fluid, add width detection to choose a proper width advert (Not that I see adverts, but If I recall they still have that massively and idiotically large one up top?) or chop off one side of the advert, maybe go a little smaller on it and center it. Swtch all the fonts to EM, make the side column widths in EM, add media queries to drop it to two column and eventually single columns. DONE.
NOT rocket science, and sure-as-shine-ola doesn’t need any stupid ‘grid’ asshattery to build a layout.
The same reason Eisenhower used to describe America’s peacetime readiness: Ignorance, apathy, and just plain wishful thinking.
First, if that’s a problem as Stevie said why are you running the browser maximized? That said, there IS the legitimate concern that excessively long lines are difficult to read… but that’s why on sites where that would be an issue you use a semi-fluid layout instead of fully fluid. You set a max width so it can’t get so wide the long lines are hard to deal with, a min-width for when media queries don’t work so the layout doesn’t break shrinking too narrow, and media queries to change the layout for narrower screens; People are calling this “responsive” design now, but it’s really what we should have (and I have been) doing all along.
Let’s say you have a simple three column layout, using the double wrapping content first approach… and then stick an extra wrapper around both your outer columns.
<div id="pageWrapper">
<div id="contentWrapper"><div id="content">
Main Content Column
<!-- #content, #contentWrapper --></div>
<div id="sideBarWrapper">
<div id="firstSideBar">
First Side Bar
<!-- #firstSideBar --></div>
<div id="secondSideBar">
<!-- #secondSideBar --></div>
<!-- #sideBarWrapper --></div>
<!-- #pageWrapper --></div></div>
First start with a middle size two column layout.
screen.css - media=“screen,projection,tv”
#pageWrapper {
overflow:hidden; /* wrap floats */
width:95%; /* haslayout wraps floats IE, make some body bg show */
margin:0 auto;
/*
min and max here are actually for browsers that
don't know media queries!
*/
min-width:752px;
max-width:68em;
}
* html #pageWrapper {
/*
legacy IE knows not the min-width, so they get crappy stripe,
OH WELL.
*/
width:752px;
}
#contentWrapper {
width:100%;
float:left;
}
#content {
margin-right:20em;
}
#sideBarWrapper {
float:left;
width:20em;
margin-left:-20em;
}
Two column layout, semi-fluid width when media queries aren’t present.
Then you can make it three column when the screen is large.
bigScreen.css - media=“screen and (min-width:68em)”
#pageWrapper {
max-width:88em;
}
#content {
margin:0 20em;
}
#sideBarWrapper {
float:none;
width:auto;
margin:0;
}
#firstSideBar,
#secondSideBar {
position:relative;
float:left;
width:20em;
margin-left:-20em;
}
#secondSideBar {
margin:0 -20em 0 0;
left:-100%;
}
Turns it into a 3 column layout.
then for smallScreen.css - media=“screen and (max-width:751px)”
#contentWrapper,
#firstSideBar,
#secondSideBar,
#sideBarWrapper {
float:none;
width:auto;
margin:0;
}
Strips it down to a single column layout in source order.
NOT rocket science… and no stupid “grid” nonsense needed either. It often feels like ‘grids’ are based on this whacko mentality of running around and declaring widths on EVERYTHING… must go hand in hand with the “Not every ejaculation deserves a name” of people slapping endless classes and ID’s on everything, like those “OOCSS” nutters. Basically completely missing the POINT of HTML, CSS, and the Internet as a whole!
That they’re most always based in PX and as such can’t expand to hold auto-enlarged dynamic fonts, making them strictly the province of the {expletive omitted} who declare everything, even content paragraphs, in px metric fonts… or just end up with a broken layout for large font/120dpi users like myself.
Just because that’s “most” doesn’t mean it’s everyone, NOR does it mean it’s going to stay there. You’re looking at a 30% mean when you have a 100% range to deal with. Basically fixed widths are simply a way to tell 70% of your visitors “we could give a flying purple fish about you!”
You’ve got your conclusion backwards from the reasoning. Users all HAVE all the things you listed – different resolutions, different screen sizes – and it’s our job as developers to make sites that account for all that and deliver the best experience possible regardless of the device; that’s what HTML was CREATED TO DO!!!
Which is why slapping in a fixed width with fixed fonts that sends large font users diving for the zoom and then breaks when they zoom past a certain point thanks to the fixed with, or is too large for things like netbooks or tablets with no real solution even offerred to them, such sites are steaming piles of failure.
… and the only reason such accessibility failures can even come close to having a following is simple – people will put up with the most half assed BS on the planet if you have content people want anyways. Youtube is a great example of this in action; Their UI is inaccessible broken rubbish, but the content keeps people coming back anyways.
Part of why I say “content first” for design.
Still doesn’t mean users won’t complain about it, or that it looks far, far, far less than professional as a result.
Besides, when we’re talking a place that has code like this:
<div id="masthead-expanded-container">
<span id="masthead-expanded-menu-shade"></span>
<div id="masthead-expanded-menu">
<ul id="masthead-expanded-menu-list">
<li class="masthead-expanded-menu-item first">
<a href="/user/deathshadow60?feature=mhee">
My Channel
</a>
</li>
<li class="masthead-expanded-menu-item">
<a href="/my_videos?feature=mhee">
Video Manager
</a>
</li>
<li class="masthead-expanded-menu-item">
<a href="/my_subscriptions?feature=mhee">Subscriptions</a>
</li>
<li class="masthead-expanded-menu-item">
<a href="/inbox?feature=mhee&folder=messages">Inbox</a>
</li>
<li class="masthead-expanded-menu-item">
<a href="/account?feature=mhee">
Settings
</a>
</li>
<li class="masthead-expanded-menu-item">
<a href="#" onclick="yt.www.masthead.accountswitch.toggle(); return false;">
Switch account
</a>
</li>
<li class="masthead-expanded-menu-item">
<a class="end" href="#" onclick="document.logoutForm.submit(); return false;">
Sign out</a>
</a>
</li>
</ul>
</div>
<div id="masthead-expanded-lists-container">
<div id="masthead-expanded-loading-message">Loading...</div>
</div>
<div class="clear"></div>
It’s pretty obvious that no matter how good their content and concept is, the people they have writing their code don’t know enough HTML or CSS to be opening their mouths on the subject!
If you don’t know what’s wrong with the above, you may want to take some time learning about inheritance and the “cascading” part of CSS.
So excuse me if I don’t consider YT a site to mimic the behavior of, they have GREAT user generated content that we all want; but their website is outdated bloated half assed garbage from the idiotic markup to the bloated CSS to the total accessibility failings of the fixed width and px metric fonts.
It depends on your design , but i will recommend build design such as giving width 100%.
:headbang:
in all seriousness, there oughta be a warning level for posts which clearly show that the poster hasn’t read the thread
the price of freedom is eternal vigilance
I prefer percentages because of the explosion of mobile. Our site, which was based on pixels (960px-width), was fine back then. But now we’re are getting around 10% of our visitors from mobile (100k). We have a lot of work to do to make it easy for those visitors.
Consider the amazing examples on this following page; as you view the pages on the desktop, drag the side of the browser narrower and see what happens. Then visit a couple on your smartphone and tablet.
Stevie D - wouldn’t happen to be on Google Webmasters would you?
A little levity here. 
Of course, the reason why so many people used fixed width website sizes is obviously because they are all stupid. Even the smart people are stupid and lazy. The fact that advertising might be difficult and complicated to sell means nothing to some web designers. The fact that maintenance of the site and being able to easily create sell cards and decks means nothing to the developer because all that matters is technology. Oh, those idiots in the business group…
It isn’t about the technology or purity of coding principles or anything like that … it’s about making a site that works for everyone, a site that everyone can use easily. I’m sure the “idiots” in the business group – if you actually sat them down with a few “real” users and showed them the barriers that their pretty site puts up by being too wide, ifthey saw for themselves how it frustrates users and makes it less likely that they will complete a transaction or return in the future – would understand that usability should trump aesthetics in any sensible decision.
That’s very true. But, I think it’s actually a myth that a truly usable design can’t be aesthetic. If designers warmed up to the notion that aesthetics didn’t need to suffer (at all), we’d be one step further today.
It may take a while to adjust from thinking with pixels to thinking of a website in terms of a flexible canvas, but it’s definitely possible, just requires a different state of mind. That’s the second step, though. The first step would be not to work with visuals at all in the first stages of designing a site. That may be leaving the comfort zone for quite a few, not just designers but clients as well.
I know it was quite hard for me to adjust and I’m nowhere near complete, but it’s an exciting challenge and well worth pursuing.
Usable + accessible != aesthetically boring.
I understand where you’re coming from but the limitation in your reasoning, IMHO, is that:
(a) fixed width does not mean unusable (or should I say “fixed widths.”) Not even close.
(b) real users also want no advertising. If we are talking about just giving people everything for free and everything that they want, you’re right.
(c) the only sensible decision is one which people can easily understand and reduce to simple terms. With fixed widths you’d have every advertiser needing to discuss screen size, how the ad may shrink, where it goes when screens are made wider or reduced and other variables. Every additional variable adds another part to the equation and nobody wants to get short changed. By having limited but perfectly accepted widths, order and expectations are regular and expectations are maintained.
I found that everything in the world is a sacrifice of sorts.
You’re right, I didn’t phrase that very well. I was referring to the deezyner’s idea of aesthetics that are tied to a particular pixel-perfect image. While we know it’s perfectly possible to have flexible or responsive designs that look fantastic, there are still far too many webbists who won’t relinquish that level of control in order to make a site more user-friendly.
[font=verdana]
I’m not saying that fixed widths are “unusable”, but that they can present usability difficulties for people whose window widths are narrower – and no matter how well you design the site, those difficulties will be there.
(c) the only sensible decision is one which people can easily understand and reduce to simple terms. With fixed widths you’d have every advertiser needing to discuss screen size, how the ad may shrink, where it goes when screens are made wider or reduced and other variables. Every additional variable adds another part to the equation and nobody wants to get short changed. By having limited but perfectly accepted widths, order and expectations are regular and expectations are maintained.
I accept that there are compromises that may need to be made. I strongly disagree that the 960-grid approach, which is currently popular, is on the right side of those compromises though, it hinders far too many people. I’ve not noticed any advertising banners wider than 768px, so I’d be very surprised if you needed a page much wider than that even if you need to accommodate ads.[/font]
What difficulties are there with a 960px site? Personally I’m a fan of responsive sites where you have a couple of widths defined and done.
I agree with you on the frustration but it’s more about how these ad sizes get to be what they are instead of the other way around, such as figuring out the best grid sizes for a variety of popular devices and then affixing them properly. For 200x250 the 960px approach is fine for two column. The awkwardness begins with the introduction of the leaderboard sizes causing all sorts of strange things to happen in order to accommodate them.
Ok, so first off, I’m sort of in the process of relearning web design trends, as I’ve been out of the loop for the past 5+ years. A LOT has changed.
So I understand the fluid, semi-fluid, responsive, etc concepts. One thing I’m not sure about is all the talk in this thread against using pixel units, especially for fonts. Based on things I’ve read recently in various articles and forum threads, I started to gather the impression that people are going back to using pixels due to modern browsers using page zoom anyways. IE6, who?
Wouldn’t a semi-fluid/responsive hybrid, with pixel fonts be an ok way to go?