screen resolution problem

[hartzoua]

Hi,
I had almost finished my site using my 1550x1050 screen when a friend of mine who has a 1024x768 screen told me that it looked like a mess! I finnaly made out that the problem was the different screen resolution.
The question is: What is the best way to ensure that a site will look well in all the screens? Should i make it using a 1024x768 screen, which i guess is the most common one? I can't have everything in relative dimensions because i have some images in the page.
Thanks in advance

[benevolent001]

If you are making use of some tables..then best use is to make the width of all the tables in % like 100% for outer table and so on this would fit in all resolutions

now when you have made the page..open it in dreamweaver and just change all the table widths to % with DW you can do it within minutes and every thing will look great

hope this helps

[hartzoua]

Thanks benevolent001.
I did it and it works (of course i also had to change the various "font-size" attributes i have used in CSS).
However, in another site with a lot of images it will be a problem as you can not set the dimensions of an image as a percentage of the outer element (at least as far as i know!). Any suggestion for that?

[WebDon]

For the pages with a lot of images you may just have to pick a fixed width and resize your images accordingly so they look good. I've seen a lot of images where the browser took care of the sizing and they generally look awful.

I realize it's small but if you can't do a more fluid layout using % as benevolent001 suggests, then 800x600 is still a good rule of thumb resolution to use for layout. There are a LOT of people who are still using it for many reasons; older computer, older person with vision issues, etc. I did a redesign recently at 1024x768 and when I had some folks preview my prototype most of them commented that they had to scroll left.

And don't forget the impact the browser tool bars and favorites may have on your viewable area.

[growingdigital]

According to my web statistics over 50% of users still have a 800x600 screen res. You have to design around the lowest common denominator - or risk that 50% of users don't see your site right.

[TheDoctor]

Stats on screen resolution do not tell the whole story. Screen resolution only describes the maximum size of a visitor's window.

Not everyone surfs with their browser window set to max. For example, I have my screen resolution set to 1024x768, but I surf with my browser window set to 925x700. Why? Because I like it that way. Other people have other preferences.

Go with liquid wherever possoible. But if you can't for some reason, test out a variety of window shapes and sizes to make sure your pages are readable and usable.

[chriswragg]

You could always create more than one page for each screen resolution eg. 1550x1050.htm, 1024x768.htm, and 800x600 and use some javascript like:

<SCRIPT language="JavaScript">
<!--
if ((screen.width==1024) && (screen.height==768))
{
location.href="1024x768.htm"
}
else
{
if ((screen.width<=1024) && (screen.height<=768))
{
location.href="800x600.htm"
}
else
{
location.href="1550x1050.htm"
}
}
//-->
</SCRIPT>

to redirect the user if their screen resolution is different. Also to get around the window not being fully maximized, you could use this script:

<script language="JavaScript1.2">
<!--
top.window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers¦¦document.getElementById) {
if (top.window.outerHeight<screen.availHeight¦¦top.window.outerWidth<screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
//-->
</script>

To automatically maxise the window on start up.

[rocknbil]

Personally, I **HATE** it when the developer screws with my window size, and I know a LOT of other people hate it too.

If you direct the visitor to a web page based on three preset resolutions - not only are you LOCKED into those resolutions and have no solution for any others, you have three sites to maintain. The same is true of directing to browser-specific pages.

You could output your page dynamically and use three TEMPLATES - this gives you only one content set to maintain that outputs in the template accordingly. But in either of the last two cases it breaks down if Javascript isn't working.

I've implemented (and regretted) all three of these solutions over the years and finally come to a simple conclusion: STOP THINKING IN TERMS OF A SET SIZE. Even a minimum. If you set your mind to thinking in terms of 100%, or even a **maximum** window width, it will degrade gracefully when the window resizes and always look good. :D

[hartzoua]

Thank you all
I 'll agree with Rocknbill. I don't think any user likes his browser window to change size. I also don't want my site to be Javascript dependent. So far i haven't used any script and i gennerally try to avoid them. I'll keep the advise for the thinking in percentages.
Thanks