PDA

View Full Version : Screen width - would appreciate advice


harv
13-06-2002, 14:21/02:21PM
I seem to recall (and maybe myself used this in
the past) about setting a screen width to
say 600 pixels.

Could someone explain the pros and cons of this
please compared say to the situation with
my site
http://www.clickbankguide.com

where I am not using fixed widths but
percentages viz

DIV.body {
border: solid thin red;
padding: 10px 12% 10px 12%;
margin: 10px 7% 10px 7%;
font: 12px Verdana, Arial, sans-serif;
background-color: white;
}



Thanks
Harvey

Mertu
13-06-2002, 15:29/03:29PM
The 600-pixel width was recommended in early web design. At the time, 15-inch monitors were the mid-range size and a number of video cards could only go as high as VGA resolution (640x480).

If you limited the size to 600 pixels, then the people running at VGA could see your entire site without having to scroll right and left.

Although there are still those running at that resolution, they are a definite minority now. However, if your audience has a fair number of visually impared or elderly members, the 600-pixel width is something to keep in mind.


As far as fixed-width (absolute) and variable-width (relative), it's mostly just a style (sheet) thing now.

If you come from a publishing background or otherwise want complete control so that what you create is exactly how you want people to see it, then you go the absolute route.

Absolute is also the easiest way to go if you have to juggle several different objects in a number of columns on a page. Portal sites like MSN or Netscape are extreme examples.

Otherwise, like in the case of your site, it's just a matter of choice.
With a mostly-text site, relative positioning is still going to work just as well at the 640x480 resolution as the higher resolution.


Sean

sanity
14-06-2002, 02:44/02:44AM
As Mertu said 600 was initially the size to design for cause of the size of monitors all those years ago.

These days I tend to design for 800 x about 650 which is pretty safe. Personally I prefer fixed width for the control it brings but that's really a matter of taste.

:cheers:
Sophie

harv
14-06-2002, 10:53/10:53AM
Sean, Sophie - thanks for your replies

For a dumb question - would a fixed width
page, say 600 pixels , mean that the page
width would be PHYSICALLY the same across
all monitors and that on a wide monitor this
would show as empty space to the left
and right.

Harvey

Blue
14-06-2002, 11:03/11:03AM
Hi Harv,

That's a perfectly legitiamte question and the answer is yes.

Mertu
14-06-2002, 11:29/11:29AM
Well, the phrase "physically the same" makes it two questions--neither of which are dumb.

If you got out a ruler and actually measured the width on different monitors with different settings (or even the same monitor with different screen sizes), you'd get different results. The number of pixels is fixed, but the size of a pixel varies.

But, as far as fixed-width and blank space, yes. If you design a site with a fixed width of 600 or 800 pixels and someone is running their browser at full screen at 1240 pixels, there's going to be a large amount of blank space.

MSN is a good example for that. If you have the video width set for 1024 or higher, you can go to the MSN page and view it a browser at full screen. You'll notice all the dead space to the right--and the higher you set the video resolution, the larger the dead space.

(Netscape and most other fixed-width sites aren't as conspicuous since they center their content.)

It should also be noted that variable-width designs can have their problems with large screen sizes as well. If a site has a lot of graphics and/or uses nested tables, text that wraps at "normal" resolutions may not at higher ones. The result can have a negative effect on the intended layout or flow.


Sean

harv
14-06-2002, 11:55/11:55AM
Thanks Sean - good explanation.

If I were to design for a fixed size (say 600) would
it require a simple adjustment to the CSS
I listed above, viz

DIV.body {
border: solid thin red;
padding: 10px 12% 10px 12%;
margin: 10px 7% 10px 7%;
font: 12px Verdana, Arial, sans-serif;
background-color: white;
}

Harvey