How to modify resolution of web page?

[bdunaway]

I created a website while using a computer monitor with a resolution of 1280
x 1024. Looks great to me. It now dawns on me that most site visitors have
monitors with resolutions of 1024 x 768. The fonts on my pages look really
big and graphics are skewed for these visitors. What should I do to be able
to see my site on my monitor the way others do? Is there a simple fix to
adjust the pages to look right?

I thought by looking at the Preview in Browser option and using various
resolutions I was seeing my site the way others did, but this isn't the case,
as I see now.

 

[Murray]

Resolution is not the critical issue. Browser viewport width is. To make
your decision you need to have some ideas about the following issues -

1. What is the primary target demographic for this site?
2. What are the browsing habits of that demographic? Do they normally have
their browser window maximized on the screen?
3. If they usually have their browser maximized, what is the typical screen
width?
4. If they usually do NOT have their browser maximized, what is the MINIMUM
screen width in that demographic.
5. How do I want to build the page?
a. Fixed width and left aligned?
b. Fixed width and centering?
c. Flexible to fill whatever width from left to right?
d. Flexible (within limits) and left aligned?
e. Flexible (within limits) and centering?

As you can see, this decision is probably much more complex than you
thought, and will require that you know quite a bit about your intended
target visitor and their browsing habits.

If you elect to go with 5a, or 5b, then your decision would be - 'what is
the mimimum browser width I want to support without horizontal scrolling?'.
Once you have determined that minimum supported width, all of your decisions
are made. That's how wide you want your page to be.

If you elect to go with 5c, then you just build your page within a flexible
container (the simplest example - although an obsolet one - would be to use
a 100% width table to hold the entire page). Be aware that pages with
limited text content can look VERY sparse and empty on wide viewports when
built in this way.

If you elect to go with 5d, or 5e, then you would add this sophistication to
your decision matrix -

'what is the greatest width I want to allow the page and its contents to
become?'

In this case, you would use the CSS styles - 'min-width' and 'max-width' on
the primary page container. Just so you'll know, although these styles are
well supported *now*, earlier versions of IE (and some other browsers) will
not support them so reliably.

So - which is it? 8)

 

[bdunaway]

Murray, thank you so much for the detailed reply. Back in the halcyon days
when I thought I knew what I was doing, I chose to have pages be fixed-width
and centered. Nearly everyone viewing the site uses IE 7, and I assume they
use monitors with a 4:3 aspect ratio that are of "average" size - probably no
more than 17 inches. Now, if the fonts and graphics on my pages look fine on
my 5:4 monitor but big and stretched on the average user's monitor, does that
mean I erred in specifying that tables be of a particular height and width?
What would help make fonts and graphics look right to the average user I've
outlined?

Rhonda

 

[Ronx]

Build your pages to a width that suits most of your users. You can do
very little about browser height. For example, I (currently) have two
monitors - one at 1280x1024, the other at 1024x1280. How would you
build a page to suit me?

Monitor size (15", 17" etc) has no bearing the design - as Murray said
it's all about browser portal width. Users know the limitations of
their monitors - some I know have 19" monitors set to 800x600, and they
are not as rare as you might think.

One thing (in general) you should do - do not specify the height for a
table. Let it adjust to the font size and content -and remember the
user can easily change the font size to suit their vision.

Changing the sizes of a table is not going to affect the appearance of
an image - image sizes are specified in pixels, monitor resolution is
specified in pixels. An image 400x200 pixels is going to display as
400x200 pixels, no matter what monitor you display it on. If it's
stretched or compressed in one direction, it's down to the size of the
pixels - either the users or the designers. Most, if not all, monitors
have a natural resolution where the pixels are the "correct" size for
all images.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.

http://www.rxs-enterprises.org/fp

 

[Murray]

What would help make fonts and graphics look right to the average user

I've
outlined?

Being as how you have no control over how the user has their browser
configured, the best practice is to build your page so that it can
accommodate changes in font sizes without seriously breaking, and let it go
at that.