Web Site Resolutions

[SuperK]

Folks,

I've tried to Google up some stuff on this topic but couldn't find anything
good. I'm sure you've seen this question here before, so please be patient.

Anyway, what would be a good approach for making your web site look good on
monitors with different resolutions? I know that I can change the tables'
and cells' width from fixed size to percentages, but that really won't make
the web site look the same, just take up the space. I know that I could
capture the resolution with JavaScript but I don't think this is too
beneficial. Would I be better off being cautions and designing the web site
for 800 X 600 and center it on the screen? I need some feedback on this
issue.

Thanks!

K

 

[Chris Morris]

I've tried to Google up some stuff on this topic but couldn't find anything
good. I'm sure you've seen this question here before, so please be patient.

It's definitely around in the various archives of groups.

Anyway, what would be a good approach for making your web site look good on
monitors with different resolutions? I know that I can change the tables'
and cells' width from fixed size to percentages, but that really won't make
the web site look the same, just take up the space. I know that I could

If you pick the percentages carefully, it should look approximately
the same as it does now on browser widths in the 700 - 1100 range,
while not causing too many problems on larger or smaller windows.

capture the resolution with JavaScript but I don't think this is too
beneficial. Would I be better off being cautions and designing the web site
for 800 X 600 and center it on the screen? I need some feedback on this
issue.

You're right that javascript detection isn't a good idea, but in addition:
- remember that screen resolution and browser window width are
independent. Today my browser is at 848 pixels wide.

- 800 pixels isn't that cautious. I've seen various things that
can't display that wide (lots of handheld devices that are 640
pixels wide at the most) and others where it's inconvenient (if I
was running in 800x600 resolution my browser would be at most 700
pixels wide to leave room for various other applications)

So, basically, try to design the site so that it doesn't get
horizontal scrolling until it's unavoidable. You should, with the
exception of pages with large images, usually [1] be able to get below
600 pixels this way (remember, if you get it below 500 without
horizontal scrolling, someone on 1024x768 can see two side-by-side).

[1] Some designs, maybe not. It depends.

 

[Beauregard T. Shagnasty]

Quoth the raven named SuperK:

Folks,

I've tried to Google up some stuff on this topic but couldn't find
anything good. I'm sure you've seen this question here before, so
please be patient.

Google for "liquid design"

Anyway, what would be a good approach for making your web site look
good on monitors with different resolutions? I know that I can
change the tables' and cells' width from fixed size to percentages,
but that really won't make the web site look the same, just take up
the space. I know that I could capture the resolution with
JavaScript but I don't think this is too beneficial.

No, because the resolution of the monitor is not related to the
browser window size.

Further, nothing will happen for the ~15% who have no, or disabled,
JavaScript.

Would I be
better off being cautions and designing the web site for 800 X 600
and center it on the screen? I need some feedback on this issue.

http://www.allmyfaqs.com/faq.pl?AnySizeDesign
http://www.ddj.com/documents/s=2684/nam1012432092/index.html

 

[Andy Dingley]

Anyway, what would be a good approach for making your web site look good on
monitors with different resolutions?

Design for a width of around 800 pixels. This is a reasonable size to
see an image, and a reasonable size for a line of text. Text lines
any longer than this become hard to read, just because long lines of
text are hard to read.

800 pixels wide is the mininum size of screen you're likely to
encounter. Anyone with 1200+ width is likely to use their browsers
windowed.

If you need bigger width (maybe you're a high-res image viewer) then
don;t be afraid to go bigger.

Don't assume you only have 600 pixel height, even in an 800 pixel
width. If they do, then let them scroll. Most web pages are too tall
to view on any screen and vertical scrolling is much less annoying
than horizontal scrolling.

Phones will be connecting through image-resizing gateways, so stop
worrying about it (but pay attention to the notes below).

Now stop thinking about window (and especially screen !) size
altogether. It's just not a useful way to approach the problem. Use
any JavaScript testing screen sizes and we'll come and break your
kneecaps.

Set your font sizes by using em units and _not_ pixels. This allows
browser-based resizing, which is a valuable accessibility point.

Use pixels for sizing where you're doing something vitally pixel-based
to do with your images. For anything and everything else, use ems.
Don't even think about writing old table-based code with 1x1 blank
..gifs.

Remember that you have a vague idea what size someone's display
resolution is, but almost no idea how big the physical screen is, or
how good their eyesight is. I can read "tiny" text in pixel sizes on
my laptop (a "poor" screen) but I can;t begin to do so on my desktop
machine, because I have a huge resolution (supposedly a good thing)
that actually makes the resolution of each pixel harder (display
sizes grew at a faster rate than display screens).

Stop trying to treat the web as rigid paper and deal with it as a flow
problem. There are plenty of approaches to "liquid" design, where you
simply stop worrying, supply appropriate hints to the important
things, and then let the browser sort it out. As my browser knows what
sort of screen it has to work with, and I've also instructed the
system on how my eyes can resolve my particular screen resolution,
then it's in a much better position to do it.

 

[Steve R.]

SuperK wrote in message ...

Anyway, what would be a good approach for making your web site look good on
monitors with different resolutions?

Some *informative* reading matter for you ...

Design for Any Size:
http://allmyfaqs.com/faq.pl?AnySizeDesign

The Myth of 800x600:
http://www.ddj.com/documents/s=2684/nam1012432092/index.html

How Can I Make My Pages Look Good On All Monitors?
http://www.thepattysite.com/window_sizes1.cfm

 

[Steve R.]

Andy Dingley wrote in message ...

Design for a width of around 800 pixels.

No don't.

Design for Any Size:
http://allmyfaqs.com/faq.pl?AnySizeDesign

The Myth of 800x600:
http://www.ddj.com/documents/s=2684/nam1012432092/index.html

How Can I Make My Pages Look Good On All Monitors?
http://www.thepattysite.com/window_sizes1.cfm

This (800 pixels) is a reasonable size to see an image,

Not so - an 800 pixel wide image will create horizontal scroll bars on most
websites viewed at 800x600.

 

[Whitecrest]

No don't.
Design for Any Size:
http://allmyfaqs.com/faq.pl?AnySizeDesign

This page falls apart in a small browser window.....

 

[kchayka]

This page falls apart in a small browser window.....

Huh? Seems to work fine for me all the way down to ~400px wide, even
with my larger than average text size.

 

[Andy Dingley]

No don't.

Oh learn to read the whole fucking message, why don't you.

 

[kchayka]

Design for a width of around 800 pixels. This is a reasonable size to
see an image, and a reasonable size for a line of text. Text lines
any longer than this become hard to read, just because long lines of
text are hard to read.

The width in pixels has no relationship to the number of characters on a
line. The units relative to a line of text is em, not px.

At my larger-than-average text size, 1000px can be just peachy. An
artificial limit of 800px can actually _cause_ readability problems,
especially in a multi-columned page where a column is only wide enough
for a couple words. Sites like this are very tiring to read.

40-50em is considered an optimal line length for many users, myself
included.

Use the right tool for the job, and all that.

 

[Paul Furman]

40-50em is considered an optimal line length for many users, myself
included.

30-35 em matches the typical book width that studies say is ideal though
50 is certainly readable.

 

[kchayka]

30-35 em matches the typical book width that studies say is ideal though
50 is certainly readable.

30em is too short for my tastes, unless there is generally a lack of
whitespace. Text that takes up the whole screen without any breaks can
be tough on the eyes regardless of width.

40em is near perfect to me. The last studies I heard about (don't have
a link at the moment) was that optimal line length is actually longer
than previously thought, 80-100 characters. If I find an article that
supports this I'll post it, but I'm not going to spend time looking for
one. My own eyes are proof enough for me, and they say 40em is it.

 

[Barry Pearson]

kchayka wrote:
[snip]

40-50em is considered an optimal line length for many users, myself
included.

[snip]

From discussions I've had, I believe users vary by at least a factor of 3.

The conclusion is - let the user decide.

 

[Paul Furman]

Paul Furman wrote:




30em is too short for my tastes, unless there is generally a lack of
whitespace. Text that takes up the whole screen without any breaks can
be tough on the eyes regardless of width.

40em is near perfect to me. The last studies I heard about (don't have
a link at the moment) was that optimal line length is actually longer
than previously thought, 80-100 characters. If I find an article that
supports this I'll post it, but I'm not going to spend time looking for
one. My own eyes are proof enough for me, and they say 40em is it.

There seem to be two options:

The Ergonomic Pragmatist
http://www.humanfactors.com/downloads/nov02.asp
"We apply usability engineering to meet specific business objectives.
[if] the main objective is speed... we use wider text (about 100
characters wide). If... the objective is satisfaction... we would use a
shorter width (about 55 characters wide)."

This one is better with charts and examples:
http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm
They say children & people with bad vision prefer short lines, smart
people prefer long <g>. If the material is difficult to comprehend, it's
good to use shorter, if it's suitable for speed reading long is better.

 

[kchayka]

http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm
They say children & people with bad vision prefer short lines, smart
people prefer long <g>.

It then follows that I must be smart. woo hoo! :-D