«

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

"SuperK" <> writes:
> 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.

--
Chris

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/...092/index.html

--
-bts
-This space intentionally left blank.

On Thu, 19 Feb 2004 15:17:16 GMT, "SuperK"
<> wrote:

>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.

--
Smert' spamionam

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/...092/index.html

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

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/...092/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.

In article <ahkZb.3551$>, "Steve
R." <stevie_ritchie(NOSPAM)@hotmail.com> says...
> > Design for a width of around 800 pixels.
> No don't.
> Design for Any Size:
> http://allmyfaqs.com/faq.pl?AnySizeDesign

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

--
Whitecrest Entertainment
www.whitecrestent.com

Whitecrest wrote:

> In article <ahkZb.3551$>, "Steve
> R." <stevie_ritchie(NOSPAM)@hotmail.com> says...
>> > Design for a width of around 800 pixels.
>> No don't.
>> Design for Any Size:
>> http://allmyfaqs.com/faq.pl?AnySizeDesign
>
> 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.

--
Reply address is a bottomless spam bucket.
Please reply to the group so everyone can share.

On Fri, 20 Feb 2004 09:17:58 GMT, "Steve R."
<> wrote:

>No don't.

Oh learn to read the whole ****ing message, why don't you.
--
Smert' spamionam

Andy Dingley wrote:
>
> 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.

--
Reply address is a bottomless spam bucket.
Please reply to the group so everyone can share.