Designing for Various Resolutions

[Art]

I've been designing a website which looks great on my machine and when
viewed with my default browser (1024x768). However, when I view online
or preview where the resolution is set to 800X600 I need to scroll
across to see all of the right hand of the screen.

This has become a problem since I started using layouts in FP 2003.
Previously I just typed without layout tables and cells and the result
worked in all browsers and resolutions. I understand that I now have a
lefthand link bar cell that pushes text to the right, but there has to
be a simple way for people to read my pages regardless of resolution

 

[Michael Hemphill]

Explanation:

As far as I know there isn't code that will do this for you.

A users screen resolution doesnt broadcast to the web at this time. This
means the code wouldnt know what the users screen resolution is.

Wouldnt it be great if you could go to options in internet explorer or
Mozilla and tell the browser what screen resolution you were using. Then it
could interact with code. But it doesnt

Solution:

Design all your work at 800 x 600. Use stretching tables to fill in the
empty space accordingly.

That's it!

Hope this helps. Oh yeah if there is code that does this I'd like to use it
on all my sites.

here's a few

www.planetbabble.com/flash.htm

www.paintingandwaterproofing.com

www.lmwmarketing.com (under construction)

www.coolbarstuff.com (flash site)

www.aquatulle.com (if it's even up anymore)

www.bayareawindow.com (old site)

Take care Michael

 

[Andrew Murray]

Yes, you can do this with Javascript.

The script detects the screen res, and can load an appropriate version of
the page for that resolution.

The other simple way is to design for the *minimum* size you think people
will use eg 800x600, and use tables to do the layout and use percentages
(rather than pixels) when specifying table width size which then adjust that
percentage of the screen in whatever resolution.

 

[Murray]

Resolution has nothing to do with it.

 

[Art]

Thanks, everyone. I'll try the 800x600 tables.

Art

 

[Windsun]

About the only (almost) universal way to do it is with CSS.

Here is a test page that fits in nearly all size screens (though some of the
graphics are oversized at low rez - it is just a test page I use for various
browsers etc) by having a liquid center section that resizes automatically
with screen width:

http://www.solar-electric.com/test1.html

You can come somewhat close by using percentage columns in tables.

 

[Tom J]

Thanks, everyone. I'll try the 800x600 tables.

If you don't want a scroll bar on 800 X 600 resolution screens, you'll
need to set width at 760 pixels.

Tom J

 

[P@tty Ayers]

It does have something to do with it; the screen resolution determines the
upper limit to the pixel dimensions that user's browser viewport will have.
Useful information, n'est-ce pas?

I just wish that you (and others) would say something more like, "Resolution
isn't the only factor, and it's misleading to focus on it. Browser window
size is the main consideration", or something.

I'm just saying.

 

[P@tty Ayers]

Although that's a good method, CSS is definitely not the only way to do it.
Tables do a fine job of creating "liquid" layouts.

 

[Murray]

It really is only distantly related. On any given resolution screen, I can
duplicate the appearance of any browser window on any smaller resolution
screen by merely changing my viewport width and height.

We have already discussed this many time. There is no direct relationship
between resolution and browser viewport width/height, other than the maximum
achievable values.

 

[Windsun]

It can be done with tables, but if using multiple or nested tables, it can
start getting pretty tricky. Something like a simple 3 column layout is just
a matter of making 1 or 2 of the cells based on % instead of fixed.

-------------------------------------------------------------------------

 

[P@tty Ayers]

We have already discussed this many time. There is no direct relationship
between resolution and browser viewport width/height, other than the
maximum achievable values.

You don't need to discuss it with me if you don't want, but I still may
correct misinformation when I see it posted - sorry!

 

[P@tty Ayers]

Huh? It's a simple and widely-used method of building that type of page, and
as long as you have some basic knowledge of HTML, isn't tricky at all.

 

[Bob]

Huh? It's a simple and widely-used method of building that type of page, and
as long as you have some basic knowledge of HTML, isn't tricky at all.

If you have tables within tables within tables (typical with table
based layouts) it can get very interesting.

 

[Bob]

You don't need to discuss it with me if you don't want, but I still may
correct misinformation when I see it posted - sorry!

It's true that resolution is not the direct issue, but since most
users run at a minimum of 800x600, we can use resolution to define the
typical maximum achievable viewport - therefore making reasonable
decisions about reasonable page design width.

Resolution is not definitive, but it is a factor.

 

[Murray]

It only sets the maximum. It has no further bearing on anything.

 

[P@tty Ayers]

It's true that resolution is not the direct issue, but since most
users run at a minimum of 800x600, we can use resolution to define the
typical maximum achievable viewport - therefore making reasonable
decisions about reasonable page design width.

Resolution is not definitive, but it is a factor.

Exactly, precisely. Thus, "Resolution has nothing to do with it" is not
accurate or helpful.

 

[P@tty Ayers]

It only sets the maximum. It has no further bearing on anything.

No, but that's significant, and enough to disqualify it from "having nothing
to do with it".

I know what you mean, Murray. I just think you're confusing people with that
statement.

 

[P@tty Ayers]

If you have tables within tables within tables (typical with table
based layouts) it can get very interesting.

Tables can be used badly, of course. But that's no reason to claim that "the
only way" to build flexible pages is with CSS. It's just not true. It
can be done simply and well with tables, and it's not particularly
difficult.

 

[Murray]

I don't. And I will continue to assert that resolution is not a critical
factor, or even the one to consider at all, in this issue.