Webmaster Tutorial Menu
Tutorial Home
Life before .htaccess
You have to start somewhere
Becoming a Webmaster
The steep learning curve
What to look for in books
How many hats?
Technical Job Description
Linux or Microsoft?
Standard web stuff
Basic HTML
Frames and/or Flash?
Site submission
Negotiating Links
Validating your HTML
Web safe fonts
Web safe colours
Different screen & monitor sizes
Cascading Style Sheets (CSS)
'Nix specific stuff
Choosing a 'Nix hosting company
Web Logs Demystified
Web Log Status codes
Limitations of robots.txt (and the power of .htaccess)
cost  effective,   fast  loading,   lightweight,   high  return  websites

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]
_ _
copyright © 2001-2007 bpresent
Terms of Use, Privacy Policy, Copyright and Trade Marks
Sydney +61 438 726 669