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 == 768))
{
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

 

[bigjoe4]

Almost no-one has 800x600 now.

 

[Afterburn]

Go to this link.

http://www.macpolls.com/?poll_id=80&ref=forums.macrumors.com

They have over 800 poll results on which people use most. I have started to grow out of the 800x600 resolution when making websites. 800x600 were used alot during the Windows 98 - 2000 era. Now, most people are at about 1024x768 or 1280x1024.

 

[port5800]

as my web design teacher told me...use what ever Yahoo uses. Their a big search engine with tons of hits they need to be more compatible then any other site. So thats what I do. So its 1024

 

[Loneua Technologies]

I would center all of your pages but don't make your web page huge, make it

so that the 800x600 people aren't scrolling to the side and for the Love of

God do not make it optimized for people with 1900x1200.

 

[Smith6612]

What I'd do for images is that I'd make a thumbnail for the image, but yes, the standard is to design stuff for 800x600 displays. If it's anything above 800x600, make a clickable thumbnail or make it so that the full size image comes up via JavaScript. Also, with the increased resolution, the larger the file usually becomes. I usually try to keep my images intended for dial-up users per page around 90KB of total download, and while for Broadband, usually around 1MB, unless you want it larger.

 

[DarkenProject]

I actually agree most with Livewire in regards to stat collecting. It can be hard to guess your user's equipment beforehand, as you are figuring out. So instead of guessing, just find out
I also like the idea of creating adapatable, flexing webpages that are not relying on absolute boundaries. This enforces a portable code; if you are optimizing for individual resolutions, you will be doing it for the rest of your web-site's life. Keep in mind too that Widescreen resolutions are becoming more popular as pre-built PC companies (Dell, HP, etc) continue to push them.
So, as Livewire was emphasizing, you can't please everyone, so please as many as you can. Good luck with your designs!

 

[Smith6612]

Also, don't forget about handhelds! The 100x100 thumbnails are very useful for them as those things have very little memory and a small screen. I'm one of those people who on vacations will use the internet on something other than a PC, in my case, my PSP

 

[Calipe]

Whoever says using tables is the way to is wrong. You can design a completely tableless website just using CSS and XHTML. It will also be much easier to edit and make changes to if you want to. Most professional websites now use <div> in place of tables.

 

[DarkenProject]

Also, don't forget about handhelds! The 100x100 thumbnails are very useful for them as those things have very little memory and a small screen. I'm one of those people who on vacations will use the internet on something other than a PC, in my case, my PSP

True; I'll sometimes surf via SmartPhone or PSP. Its terrible when you get to a website that's too graphic intensive.