Monitor Resolution & Design :: Your Thoughts

Question

Something I seldom think about but probably should, is the resolution most users view websites with on their monitors. My 23" Apple Display is set to 1920x1200 and in the past I generally designed my sites with a width of around 800 pixels or smaller to make sure it worked well with most displays. Even so, on occasion when I've been in a client's office and have gone to show someone my work I was aghast at how large it looked on their display due to the lowered resolution settings on their setup.
I used to keep my websites fairly compact in size to work with the smaller monitors, but it seems that the trend is now leaning toward larger designs. I realize that making a site flexible is probably the best way, but some custom designs do better with a fixed size.
I would be interested in feedback on this based on some of your experiences, and how some of you handle this.
Thank you!
Linda

Answer 1

Resolution only limits the maximum practical width you can set for your
browser. In fact, a given page will look *exactly* the same (only smaller
or larger), on any resolution screen provided you keep your browser the
same width in pixels. Thus, I say that 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)
Murray