Scaling graphics and pages to user resolution

Logan

New Member
I've been designing a data-driven website to fit perfectly on a screen resolution of 1280x1024 (the res I'm using).
Although it might just be easier to ignore the different resolutions possible and inform my users "This is best viewed at a screen resolution bla, bla, bla", I'd much rather do it right and scale the text and graphics to fit the user's browser window regardless of his/her screen res.

Because I don't like working in the dark ages, I don't use tables for layout... I find them frustrating and confusing to work with for layout purposes.
So, I'm using CSS and <div> tags :)

I've considered using margin-left: abc%; but it's a real chore to make my page look the way I want when I do it that way. Especially on the higher resolutions (1400+), then it looks like there's a huge open space on my page where I don't want one.

Any help with this will be greatly appreciated.
 

AusQB

New Member
It's best not to try and adapt your site dynamically to suit the user's screen. Set specific dimensions and stick with them. Seeing as most peoples' monitors these days are about 1280x1024, most sites have a width of about 800-1000 pixels. Obviously with time that average will grow proportionately with the average screen resolution. I think a good measure is about 75%.

As far as keeping the site a fixed size on different screens, there are some standards you can implement. For example, when setting font sizes, use px instead of pt. Different browsers have different interpretations of how big a certain pt value should be, whereas a pixel value will be constant and will depend only on the screen's resolution.

You can always set the width of the containing element of your site to be a percentage value and set the left and right margins to auto. This will make the site scale to the browser window, but I wouldn't recommend that approach.
 
Top