|
|
|
|
 |
Screen / monitor resolution and browser resizing
Y ou can work around the potential problem with default font size,
and in the process you minimise the impact
on the way your pages look to different surfers. However, discussing font size is an
academic point really, because
all the surfer has to do is change the size of the browser window and
the visual impact you intended for the page changes. In other words, at the same time as thinking about font size,
you may also want to tackle the look and feel of your pages with
respect to browser window size and screen resolution.
There are lots of variations in screen sizes and resolutions.
Couple to this prefered font size variations and there are simply too many
combinations to cater for. It's not possible without reverting to a fixed box with a static
border around it (such as Google's home page - surrounded in white in this case) and
this is not a bad option in many cases, or
using Flash or the like.
Common sizes
The most common variations of screen resolution are:
|
| Width |
|
Height |
|
| 640 |
by |
480 |
(although this is becoming rarer) |
| 800 |
by |
600 |
|
| 1024 |
by |
768 |
|
|
|
You're best to choose a size, or a format, or perhaps an approach and
go for it. In order to do this you need to think about your market.
I have for a while, and still assume that most people I'm
interested in (most of my customer's target financial market in other words) will
be happy with 800 wide (and therefore, when the page opens, 600 deep - although obviously you
can go deeper).
You need to remember that this is the size of
the full screen, not the size of
the inside of the browser window (as shown in the demo 800 by 600). |
|
|
|
|
|
|
|
The problem with designing at a fixed width is that on larger screens, your web
pages can look absurdly small, especially if the page is left justified.
The approach we (my "style council" and I) eventually settled
on was to design for 800 by 600 but to also allow the page to grow (to a limit)
for larger resolutions.
Most of the pages on the bpresent.net site (this site) will shrink width-ways
down to fit on about 500 pixels (easy to do) and will expand up to about a maximum of 810. The notable
excpetions are on this tutorial, which expand up to about 1000 with the menu on the
right hand side.
The minimum is easy. The maximum we discovered by mistake! It's
possible that this technique will not work with future browsers - which is not
such a big deal as all that will happen is the page will expand to the maximum width.
(Note that the CSS
style attribute of max-width does not work on all browsers - yet).
|
| |
|
[Content of this page last reviewed: 12-Jun-2004] |
|
|
|
|