page layout

what to do with extra space in higher screen resolutions

[Birdman]

When laying out a page, I want the main content text to stay within a certain width for readability. If I make the content box flexible for larger screen res, the text lines get too long. I know I can set max width, but what do you do with all extra space left when viewed at high res. Can you make font size expand according to resolution so that the characters per line stay the same, but the content enlarges to fill screen so there isn't a bunch of open space.

[Macguru]

I usually give the page some nice background color and keep text in fixed table width. I would not play with JS loading different CSS for client screen size.

[Birdman]

Hello Macguru. That's exactly what I want to do. Keep text columns narrow. I read it over and over, people don't like long strings of text. I was just wondering if there were any ways to help fill the empty space, when some with a large monitor views.
<added>My monitor is small. Is there someway to see how it looks on larger screens without having someone to beta test?

[papabaer]

Birdman, the maxwidth property is one of those not yet supported but will be very useful when it is... Regarding "whitespace" and high-res: I would not worry too much about it. For example, I surf using a 21" monitor @ 1600x1200 res., but never maximize a browser window; instead, I use the extra screen real estate to display additional windows. I typically resize my browser panes to approximate 1024 pixel width. I suspect, many surfers using larger monitors and high resolutions do the same.

It is no more enjoyable viewing a maxed-out, hi-res, large screen browser window than it is for a Word document or an HTML editor: I size everything to a comfortable, useable size (my own preferences of course!).

Let's hear some other "browsing preferences!" :)

[Macguru]

Hi Birdman,

I agree 110 % with you with narrow text colums. It reads easy just like a newspaper. I use a very wide screen but never assume visitors do. I generally use some 1X1 pixel image to fill the background of page. According to the site design, I put fixed width content in tables. It can be centered or aligned left or right.

Visitors with wider screens are used to it and mostly don't resise windows to screen widht. I would not try to resize content to visitors screens. (enlarging content) A nice fill can be lived with IMHO.

<added> ARGH! papa beat me again! ;) </added>

[Birdman]

He is quick isn't he! :) Ok, i'll go with fixed size to fit 800px. Thank you both.

[Knowles]

The average users uses 800x600 since its the default windows size. So they wont see the extra space. Only people that know how to resize the res will see it. Most of us dont really care and like papabaer said dont keep windows maximized. I only do when I cant fit everything onto the screen which is very annoying I hate sites that are so wide you have to maximize. I feel sorry for people using default when they surf to those sites.

[lorax]

Most of us dont really care and like papabaer said dont keep windows maximized.

I beg to differ. I normally keep my browser maximized as do many of my co-workers. In fact the only one I don't maximize is DW which I set to 8X6.

When I do build page structure I've encouraged my clients to use dynamic page widths and let the content flow. I don't end up with long strings of unbroken text because my page designs typically have a 2 or 3 column layout which takes out those extraordinarily long lines. I also encourage the content writers/editors to provide me with short punchy content and this helps keep their sentence structures short.

I do build some fixed width pages and in these cases either provide a colored back ground (solid or with a band) or use a very light image (line art screened back to 20% or some such.

[knighty]

>>Most of us dont really care and like papabaer said dont keep windows maximized.

I completely agree.

All my firends and work collegues never use fully maximised windows including myself. I work on an Intranet and often get to see the site on a lot of peoples computers, most people use the extra space so they can see their desktop or other windows.

[papabaer]

There is a precedence for fixed width layout that may not rate highly with Jakob N., but is one that many of us see daily and accept as normal. I am referring to the major news sites of course: CNN, MSNBC, BBC, SPIEGEL ONLINE, the JAPAN TIMES, RADIO NETHERLANDS, ESPN and many more... All of these sites use fixed width, table based layouts approximately 780 pixels wide. On top of that, they are ALL left aligned! How many millions of visitors do these sites receive each day? People are conditioned to this presentation.

There can be useability arguments that support many viewpoints, but one thing these news site all have in common is that their news content (not the main, multi-column page) is presented in a fixed width layout that stays within the recommended characters per line (50-70 CPL) that has been acknowledged as the most user-friendly. Text columns exist for a reason. I'm not saying "nay or yea," but I did want to point out the precedent we are all very familiar with. It's more food for thought.

By the way... one more reason I love the Opera browser: If I come across a site that uses fixed width CSS divs for text... and I want to view the site in a "liquid" layout, I just hit CTRL+G and voila! I can resize the window to suit my preference! This is yet another feature that "those other guys" have yet to implement.

A good guideline to follow if you pursue CSS layout techiques, is to make certain that your content will flow in a logical progression. Test your CSS designed page with styles disabled to view the logical page flow. Not only is it a good design practice, but it will help in your SEO evaluation of the content. Try it..! ;)

- papabaer

[Eric_Jarvis]

there is no reason not to have a fixed width div containing any large amounts of text whilst otherwise using a flexible layout...though I prefer to use max-width

[Birdman]

Okay, so I have a three column layout. Which is better:
1) Make right sidebar stick to the right side of window at all res.(any "extra space is between main content and right content)
or...
2) Fixed size divs.(any "extra" space is right of all content)

Thanks for all of the insight.
Birdman :)

[Eric_Jarvis]

there is always the possibility of using a "dummy column" to do the big size changes with the others fixed width...not often necessary though