resolution question.

[rickle42]

Hi,
I am kind of new and have a question regarding varying screen resolutions of clients.
I see the "standard" it seems is to design for lowest resolution possible, 800 x 600 i think. Then at higher resolutions only half the browser is used.
Is it uncommon to get the resolution of the client in a script and base the output to the browser( html output) on that? Or what about using percents instead of pixels in the div's?
Maybe i see the "standard" so much because it is the way dreamweaver and other software used so commonly generates code?
Any feedback welcome.

By the way... This site rocks!! Its like a free school for me...

Jon

[Jober68]

If you really want to make something completely resolution compatable you need to 1) have relative positioning and use %'s or 2) need to use tables instead of positioning with %'s. Most websites just make it viewable for 800x600 and then center it so that if there are larger screen resolutions it's centered and so it just looks like the designer threw in some padding. Any professional site I've seen done though is always done using tables which takes care of the problem. (CSS is always used but the positioning is done in talbes)

[worthynotes]

I don't know if I agree with the poster above saying professional sites always use tables. It is completely possible to design a site without tables - in fact none of my sites use tables. I find it quite easy to allow all screen resolutions to access my site. Using percentages instead of fixed widths is good, and as long as you do it right it does work. There's no need for tables any more. Yes it is sometimes more complicated to not use them, but I think the end result is much better.

[naim4u]

you can use the folling script to redirect the surfers to diffrent page accordin to the resolution.

<script type="text/javascript" language="javascript">
var s_800x600 = "index.php"; // Page for 800x600 resolution
var s_1024x768 = "index2.php"; // Page for 1024x768 resolution
var s_others = "index.php"; // Page for any other resolution

if ((screen.width == 800) && (screen.height == 600))
{
window.location.href = s_800x600;
}
else if ((screen.width == 1024) && (screen.height == 76)
{
window.location.href = s_800x600;
}
else
{
window.location.href = s_others;
}
</script>

orelse the below script can be used to give warning while entering the page if the screen resolution is not correct.

<style type="text/css">
body
{
margin : 0px;
}
#warn
{
width : 100%-10px;
background-color: #666666;
font : bold 10px Verdana;
color : white;
padding : 2px 10px 4px 10px;
cursor : pointer
}
#warn .x
{
float : right;
}
</style>
<script type="text/javascript" language="javascript">

var width = 800;
var height = 600;
// Text to show in the warning bar.
var warning = 'Change your screen resolution to '+width+'X'+height+' to view this site correctly!';
// Advanced html code to format the warning bar.
var code = '<div id="warn" onMouseOver="this.style.backgroundColor=\'#0099CC\ '" onMouseOut="this.style.backgroundColor=\'#666666\' " onclick="hide_warn()"><span class="x">X</span>'+warning+'</div>';

function hide_warn()
{
document.getElementById('warn').style.display = 'none';
}
if ((screen.width != width) && (screen.height != height))
{
document.write(code);
}
</script>

[diabolo]

refering to Naim4u, it could be easier to change the css, rather than changing the page, if it is possible

[Dra_chan]

I do the table thing too, set with pixels, and centered, and for 800x600
When I had my screen at 800X600 and browsed some higher resolution pages, it was a pain in the butt, I had to scroll the page horizontaly too. That's the reason pages are done in a small size, as another user mentioned too. There are a lot of outdated people out there, and most of them don't know about screen res too.

naim4u, that code is pretty nifty, thanks for posting it.

[Loneua Technologies]

Optimize your website for 800x600 but keep in mind that there will be people browsing at 1900x1200 and 1650x1050

[NoWorldPeace]

I'd seriously now consider 1024 x 768 as the standard resolution that the majority of people will be viewing your website at.

800 x 600 is pretty much gone these days.

As said above, use % on widths and make sure you position your <div> or tables to center.

If you can, avoid using table based layouts and move to <div></div> tags

[Loneua Technologies]

Actually I have been looking on some recent polls and they have shown that the majority of the people are browsing at 1280x1024.

I would optimize my website to 1024x768 but keep that in mind.

[Livewire]

I'd go a step further and do one of the two below:

1) Poll. Put up a web-poll for your users and have them vote on their screen resolution.
2) Stats gathering. Automatically log what screen res the browsers viewing the site are using.


After a week, check the results - code the resolution so it fits the majority of your browsers, or at least consider the results.

I mean, if 90% of the users on the site are using 640x480, well I know what I'd be coding for XD

And on the other hand if I get 95 at 1024x768, 3 at 1280x1024, and 2 at 800x600, I'd code for 1024x768 - I'd lose the 2% on 800x600 quite possibly, but I'd keep 98% of what I've got, and only mildly upset the guys on 1280x1024 who aren't getting the full screen used.


Just a thought. For starters though, either 800x600 or 1024x768. I'd usually go 800x600 just because until you know what your users are using, you don't want to risk 1024x768 to find out half were on 800x600