I know this comes up from time to time but humor/humour me. I remember a time when variable width layouts were preferred because “not everyone has a 800px wide monitor”. Layouts were running off the screen causing horizontal scroll bars.
Now it’s the opposite. “Fill the screen” is the new mantra, causing me to have to shrink my browser window to make the lines of text comfortable to read. 1280px (and surely 1600px) using a full width browser window is just too much if with a variable layout. All things otherwise being equal I still prefer a fixed width layout at right around the old 760px standard.
What do you say? What is your preference? If your preference differs between your personal usage and your professional designing please explain.
For me, I like to have a fixed width of around 960px because 1) I love the 960 grid idea, although i don’t use the code templates, I just love the look of the layout, and 2) I have a large monitor and hate having to turn my neck to read or move my eyeballs further then they feel comfortable doing. For example, at the moment I have the forums at full screen, but I feel it’s just too wide to be constantly reading at.
However, I guess that’s the beauty of variable width layout, all I need to do is shrink my window and I can become more comfortable reading the site. I definitely believe the mantra has changed as you said. I feel we no longer cater for people with tiny screens (I remember designing for 800px wide) and now we cater for aesthetics instead.
I also think that due to big screen and having variable widths, if you don’t have the content to fill it, don’t have such a big space to fill. Especially for aesthetics reasons, if your content isn’t enough that when at full screen your footer isn’t really a footer, the page looks empty or lacking.
I suppose that media queries sort of makes this design question a bit “mooter” than it was before. Regardless, I still enjoy reading at about 760px in width if it’s a single column layout.
Windows 7 allows the window and left or right arrow keys to be used to make an application window fill exactly half the screen allowing you to easily view two applications side by side. Doing this means you can make use of wider screens without having the individual applications become ridiculously wide.
So for example on a standard HD screen where you have 1920 pixels across each of your two applications gets 960 pixels of width. Once you deduct for the browser chrome this gives a viewport width of about 956 to 958 (or perhaps 10 - 12 pixels less than that if the page has a vertical scrollbar).
So just because people have wider screens doesn’t mean that their browser is going to fill the screen. The bigger the screen the less likely that people will have their browser fill the whole screen and the more likely they will have it fill half the screen and have something else open in the other half.
If you are going to set the width for comfortable reading then making sure that columns are around 25 to 35 em wide is the solution. That way the column width will adjust appropriately to match any changes in the text size.
I’m afraid you’re asking the impossible. The only general consensus on this issue is that there will never be a general consensus on this issue.
Ultimately, it’s a trade-off. And as with all trade-offs, you have to decide which factors outweight which other factors.
My personal opinion - for what it’s worth, which is not very much: I used to prefer the fluid (variable-with) approach, but I have now moved to the fixed-width camp. That’s because it gives me more control over the layout, and besides I don’t think anyone really wants to read 10 pt text on a line that is 40 cm wide. But that’s just my humble o. There are plenty of arguments on both sides.
I continue to oppose fixed-width layouts as I always have done, and for the same reasons. You don’t know how big your reader’s window is. It might be full-screen, it might be half-screen, it might be open alongside a TV viewer or other application, they might have the resolution turned down to effectively enlarge the display.
Invoking horizontal scrollbars when the viewport is wider than the content requires it to be is not acceptable. You want me to read your site? Then make it work in my browser, with my settings. If you don’t make it work for me how I want it to, when I want it to, I’ll very likely go elsewhere.
It’s a good point. I know most monitor sizes are larger now but if someone wants a tiny window up in the corner so it doesn’t cover their work space then I should respect that.
I suppose a max-width would solve the issue of a too wide full width layout. Would you be opposed to a 760px max-width?
I would say 760px sounds awfully narrow for a max-width! I would normally recommend a max-width of between about 1000px and 1200px, depending on the site design and how much of that width is taken up by the main content – ie, the more of the width that is lost to sidebars and other cruft, the wider I would allow the site to stretch, in order to give a large block for the reading area. If the main content runs the full width of the site, I would set a max-width at the lower end.
For a single column layout it seems pretty comfortable.
Because you have good eyes.
Enlarge your font by several times (like I do). You know how many longnonbreakingdutchwords fit in 760px width after you’ve finally gotten the text big enough to actually be able to read it? Not many.
The advantage of “fill ALL the screen!” is that, you now have the freedom to make it tinier for yourself if you need it. For you it’s more difficult to read really wide pages, especially since you have 1) great eyes and 2) a ginormous monitor. If widths are set, they will certainly limit more people than if they’re left to hang out like a obese grandmother on a topless beach. Because then you have the power to set it how you like. Which you don’t if someone sets a width for you.
That said, the type of site probably should have some influence in the decision.
I am one of those rare full-screen people (apparently we’re rare, everyone else I know claims to be a power user who has hundreds of applications open at any one time… me, I have little tabs at the bottom of my screen) and I’m viewing this forum on a 17"er at full width right now. Forums get wide, really wide. Lines are definitely much longer than 80 characters! The way I’m viewing the screen is uncomfortable for a large number of people, especially dyslexics and people who are tired, because they have trouble keeping their eyes on the same line all the way across.
I feel expand-forever-widths let people use their browser size (or something else) to choose what’s most comfortable to them. Then again, I’m not sure how many average computer users even know they can resize their browsers. They don’t seem to know how to do CTRL++ while they’re squinting at text and setting their screen resolutions to 600x800 “because it makes things easier to read” (ayup, I know parents of two people who do this, and you only hear them complain when they’re using someone else’s computer who hasn’t been set at such resolution). Not sure how people figure out how to change screen resolution but not how to enlarge text in a browser. I’m not sure I remember how to change my screen rez anymore…
/ramble
Do you think you’d change running a 20" at 1680x1050? It does feel really silly having the browser take that much space. You have to sit about 12’ away from it to be able to scan a line without moving your head.
Most of the time, the added complexity of a variable width layout doesn’t really provide much extra value to a user. Is somebody with a 30 inch monitor going to surf your blog with the page maximized? Not really, it’s hard to read text like that.
Unless you have a super reason for a variable width layout, I’d stick with fixed width.
That being said, there’s beautiful sites and apps in fixed and variable width in all different sizes.
That’s just it. The web design community touts all these benefits but I doubt anyone notices, cares about or uses any of them.
I’m just wondering if it’s like the academy awards where a bunch of odd balls sit around and tell each other what they do is great, and right, and important when the real world couldn’t squeeze out an ounce of care if they wanted to.
Why don’t you try them both. See which one you feel more comfortable working with. And, more importantly, show them both to a few typical users, and see what reaction you get.
Most of the time, it only takes a few changes to the CSS to convert from one mode to the other.
Well, personally, I like working with fixed width layouts. As stated above I prefer right around 760px for a single column; I prefer a long page to a wide page.
Typical users don’t seem to care too much. As long as you don’t move or change their browser window with javascript they rarely make a change. I’m sure it’s because most of them don’t know they can change the width of a fluid layout or even bump the text size up for comfort.
There are a few designers that prefer one over the other. Those on the fixed-width side generally will work with a variable layout but those on the variable-width side are very outspoken against fixed width. I’m just wondering if it’s based in the real world or if it’s just another soap box to preach on.
The “consensus” is like the tide. Low tide, the “majority” seems to favor fixed widths. High tide, the “majority” goes for fluid widths. I’ve worked with both and will continue to do so, though if pressed, I’d plump down for fluid width designs. :twocents:
Do you think you’d change running a 20" at 1680x1050? It does feel really silly having the browser take that much space. You have to sit about 12’ away from it to be able to scan a line without moving your head.
I have no idea. I was in a Mac shop once and they had one of those ginormous CineMac things… I dunno, 30 inches or something… decided to check out my site, which has a min and a max width (I think still in px, cause it’s old)… looked like a tiny little strip in the middle if a red sea (my background is reddish).
I’m pretty sure if I had such a huge screen I’d just increase text size even more.
