maybe this is just the first site that i've actually had to care about this, but what is good practice to follow when designing pages with different browsers in mind?<br />
<br />
i know my site looks alot different in 800x600 as opposed to 1024x768. is there something i can do so that the page looks more similar no matter what resolution?<br />
<br />
is there an online article link that anyone has handy?<br />
<br />
it'd just be nice to know that i'm not forcing my visitors to use their horizontal toolbars in 800x600, but also that they can actually read the text in 1024x768<br />
<br />
thanks in advance<!--content-->One way is to make the site using percentages instead of pixels. <td width="90%"><br />
<br />
what I tend to do is make my sites with a 700px table in the middle of my page which looks alright on 800x600, 1024x768 and higher resolutions.<br />
<br />
another idea would be to make a script to dynamically resize everything on your page. i.e.<br />
<br />
<script language="Javascript"> <br />
function resize(){ <br />
if (screen.width == 800) { <br />
document.image1.width=64 <br />
document.image1.height=64 <br />
} <br />
else if (screen.width == 1024) { <br />
document.image1.width=80 <br />
document.image1.height=80 <br />
} <br />
else { <br />
document.image1.width=80 <br />
document.image1.height=80 <br />
} <br />
} <br />
</script> <br />
<body onload="resize()"> <br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image1.bmp" name="image1" width="320" height="240"> <br />
<br />
<br />
it is also possible if you have everything layout wise along the left (navigation, images) and only text on the right so that it won't matter whatever the resolution. (this also works the opposite way round.)<br />
<br />
Gaz.<!--content-->If you want to keep things working cross-browser, and on different resolutions, program in HTML 4.01 Strict, and use CSS for layout. Also, as CrazyGaz mentioned, you need to use percentage widths rather than pixel widths.<br />
<br />
Note that using javascript to resize elements on the page is not only very tedious and time comsuming, but won't work for 13% of web users.<!--content-->Hey,<br />
<br />
The "old school" method, which is still VERY common, is to not make your page any wider than 750 pixels. This ensures that there will be no horizontal scroll bars in 800 x 600, but the page still looks o.k. in 1024 x 768. Here is an example:<br />
<br />
<!-- m --><a class="postlink" href="http://www.netscape.com/">http://www.netscape.com/</a><!-- m --><br />
<br />
This page is left aligned, but some people center align the page, then if the user is in 1024 x 768 they will just see some of the background color on each side.<br />
<br />
<br />
The more modern way is to use percentages in your divs, etc to allow for the resizing of the window. DON'T do this with images though, as they look like crap resized unless they are vector based.<!--content-->Hey all -<br />
<br />
I am new to the resolution problem too.<br />
<br />
I need to get some advice about my website I'm creating that I just posted. <!-- w --><a class="postlink" href="http://www.calpa.info">www.calpa.info</a><!-- w --><br />
<br />
How should I code the subsequent pages so that someone using 800x600 resolution will be able to see the images and see the entire frames on the left (20% of page) and on the right (80% of page) . I'm guessing to change from pixels to %'s will help, but I wanted to get some feedback first.<br />
<br />
I designed the site in 1028x768, does this make a difference?<br />
<br />
Also, with the night skyline image on the top of the subsequent pages, should I recreate that image while<br />
Im in 800x600 resolution and fit it in there?<br />
<br />
I thought most people would be using 1068x768, but I guessed wrong.<br />
<br />
Thanks for all your help in advance.<br />
PG<!--content-->When using frames, you often need to set the frames up using pixel widths. This will make it so that the entire frame is visible at all resolutions. It can also keep users with large screen resolutions from having an excessively large frame. You might want to try numbers something like this: 150 pixels for the top frame and 210 pixels for the left frame (those numbers are just estimates).<!--content-->In most of the stats that I have seen, 1024 x 768 still only makes up 40 - 45% of the web veiwing audience.<!--content-->http://www.thecounter.com/stats/2003/May/res.php<!--content-->I really hate designing a site knowing someone could have a 640x480 screen res, and someone else may have a 1280x1024 screen res- I'm using 800x600- I simply designed my site to barely fit on 800x600 (so large) and was kinda small for 1024x768- that way everyones happy
<br />
<br />
I did use frames to solve my problem, but then, I just decided to switch to one big page and do what I did above- its all good<!--content-->Thanks all. I appreciate the words of wisdom!<br />
<br />
Off to resizing these pages b/c some numbskulls out there<br />
still use 800x600.<br />
<br />
<!--content-->Off to resizing these pages b/c some numbskulls out there still use 800x600 <br />
<br />
Eh HEM! Oh, *cough cough-<br />
<br />
was that a direct insult towards me?
<!--content-->Thanks for posting the link Spufi, I couldn't remember it!<br />
<br />
And of course when you say "some..." you are referring to the 10's of millions of users that are still in 800 x 600!<!--content-->Hi all,<br />
<br />
I'm having the same problem. The site I'm working on has been created using an 800 x 600 resolution setting, but when a user with a different resolution visits, it goes haywire. I've set it up using frames and have tried using percentages, as suggested in this thread. Nothing's working. Help!
<br />
<br />
Candyman Fundraising (<!-- m --><a class="postlink" href="http://www.mad-clicker.biz//AnkeneyFundraising/candyman.html">http://www.mad-clicker.biz//AnkeneyFund ... dyman.html</a><!-- m -->) <br />
<br />
Thanks for your help!<br />
<br />
Rebekah<!--content-->The easiest way I found to remedy this, is to look into Javascript. It CAN tell your users which way to go.<br />
<br />
If users come to the site with a screen width of 800x600<br />
then they will be directed here (800page.html)<br />
<br />
or<br />
<br />
If users come to the site with a screen width of 1024x768<br />
then they will be directed here (1024page.html)<br />
<br />
<br />
Thanks to reading HTMLGoodies book, I found this.<br />
<br />
Here is what I mean:<br />
<br />
<SCRIPT LANGUAGE="javascript"><br />
<br />
if (screen.width == 800)<br />
{parent.location.href='http://www.webdeveloper.com/forum/archive/index.php/800_res/800page.html'}<br />
<br />
if (screen.width == 1024)<br />
{parent.location.href='http://www.webdeveloper.com/forum/archive/index.php/1024_res/1024page.html'}<br />
<br />
</SCRIPT><br />
<br />
<br />
PG<!--content-->But why make two pages when you could make one that works for any resolution? And in all honesty, HTML Goodies is a really bad site to learn from. <br />
<br />
Looking at the site I see the banner image is 760px wide. Try to postion the rest of your stuff within that size of an area in terms of width and you should be good. Even on a larger resolution things won't look out of whack.<!--content-->For some reason, I thought I had made everything based around the top frame (the banner). I guess not. I will definately try that again, thank you so much!<br />
<br />
Everyone's advice is greatly appreciated.<br />
<br />
Thanks again!<!--content-->
<br />
i know my site looks alot different in 800x600 as opposed to 1024x768. is there something i can do so that the page looks more similar no matter what resolution?<br />
<br />
is there an online article link that anyone has handy?<br />
<br />
it'd just be nice to know that i'm not forcing my visitors to use their horizontal toolbars in 800x600, but also that they can actually read the text in 1024x768<br />
<br />
thanks in advance<!--content-->One way is to make the site using percentages instead of pixels. <td width="90%"><br />
<br />
what I tend to do is make my sites with a 700px table in the middle of my page which looks alright on 800x600, 1024x768 and higher resolutions.<br />
<br />
another idea would be to make a script to dynamically resize everything on your page. i.e.<br />
<br />
<script language="Javascript"> <br />
function resize(){ <br />
if (screen.width == 800) { <br />
document.image1.width=64 <br />
document.image1.height=64 <br />
} <br />
else if (screen.width == 1024) { <br />
document.image1.width=80 <br />
document.image1.height=80 <br />
} <br />
else { <br />
document.image1.width=80 <br />
document.image1.height=80 <br />
} <br />
} <br />
</script> <br />
<body onload="resize()"> <br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image1.bmp" name="image1" width="320" height="240"> <br />
<br />
<br />
it is also possible if you have everything layout wise along the left (navigation, images) and only text on the right so that it won't matter whatever the resolution. (this also works the opposite way round.)<br />
<br />
Gaz.<!--content-->If you want to keep things working cross-browser, and on different resolutions, program in HTML 4.01 Strict, and use CSS for layout. Also, as CrazyGaz mentioned, you need to use percentage widths rather than pixel widths.<br />
<br />
Note that using javascript to resize elements on the page is not only very tedious and time comsuming, but won't work for 13% of web users.<!--content-->Hey,<br />
<br />
The "old school" method, which is still VERY common, is to not make your page any wider than 750 pixels. This ensures that there will be no horizontal scroll bars in 800 x 600, but the page still looks o.k. in 1024 x 768. Here is an example:<br />
<br />
<!-- m --><a class="postlink" href="http://www.netscape.com/">http://www.netscape.com/</a><!-- m --><br />
<br />
This page is left aligned, but some people center align the page, then if the user is in 1024 x 768 they will just see some of the background color on each side.<br />
<br />
<br />
The more modern way is to use percentages in your divs, etc to allow for the resizing of the window. DON'T do this with images though, as they look like crap resized unless they are vector based.<!--content-->Hey all -<br />
<br />
I am new to the resolution problem too.<br />
<br />
I need to get some advice about my website I'm creating that I just posted. <!-- w --><a class="postlink" href="http://www.calpa.info">www.calpa.info</a><!-- w --><br />
<br />
How should I code the subsequent pages so that someone using 800x600 resolution will be able to see the images and see the entire frames on the left (20% of page) and on the right (80% of page) . I'm guessing to change from pixels to %'s will help, but I wanted to get some feedback first.<br />
<br />
I designed the site in 1028x768, does this make a difference?<br />
<br />
Also, with the night skyline image on the top of the subsequent pages, should I recreate that image while<br />
Im in 800x600 resolution and fit it in there?<br />
<br />
I thought most people would be using 1068x768, but I guessed wrong.<br />
<br />
Thanks for all your help in advance.<br />
PG<!--content-->When using frames, you often need to set the frames up using pixel widths. This will make it so that the entire frame is visible at all resolutions. It can also keep users with large screen resolutions from having an excessively large frame. You might want to try numbers something like this: 150 pixels for the top frame and 210 pixels for the left frame (those numbers are just estimates).<!--content-->In most of the stats that I have seen, 1024 x 768 still only makes up 40 - 45% of the web veiwing audience.<!--content-->http://www.thecounter.com/stats/2003/May/res.php<!--content-->I really hate designing a site knowing someone could have a 640x480 screen res, and someone else may have a 1280x1024 screen res- I'm using 800x600- I simply designed my site to barely fit on 800x600 (so large) and was kinda small for 1024x768- that way everyones happy
<br /><br />
I did use frames to solve my problem, but then, I just decided to switch to one big page and do what I did above- its all good<!--content-->Thanks all. I appreciate the words of wisdom!<br />
<br />
Off to resizing these pages b/c some numbskulls out there<br />
still use 800x600.<br />
<br />
<!--content-->Off to resizing these pages b/c some numbskulls out there still use 800x600 <br /><br />
Eh HEM! Oh, *cough cough-<br />
<br />
was that a direct insult towards me?
<!--content-->Thanks for posting the link Spufi, I couldn't remember it!<br /><br />
And of course when you say "some..." you are referring to the 10's of millions of users that are still in 800 x 600!<!--content-->Hi all,<br />
<br />
I'm having the same problem. The site I'm working on has been created using an 800 x 600 resolution setting, but when a user with a different resolution visits, it goes haywire. I've set it up using frames and have tried using percentages, as suggested in this thread. Nothing's working. Help!
<br /><br />
Candyman Fundraising (<!-- m --><a class="postlink" href="http://www.mad-clicker.biz//AnkeneyFundraising/candyman.html">http://www.mad-clicker.biz//AnkeneyFund ... dyman.html</a><!-- m -->) <br />
<br />
Thanks for your help!<br />
<br />
Rebekah<!--content-->The easiest way I found to remedy this, is to look into Javascript. It CAN tell your users which way to go.<br />
<br />
If users come to the site with a screen width of 800x600<br />
then they will be directed here (800page.html)<br />
<br />
or<br />
<br />
If users come to the site with a screen width of 1024x768<br />
then they will be directed here (1024page.html)<br />
<br />
<br />
Thanks to reading HTMLGoodies book, I found this.<br />
<br />
Here is what I mean:<br />
<br />
<SCRIPT LANGUAGE="javascript"><br />
<br />
if (screen.width == 800)<br />
{parent.location.href='http://www.webdeveloper.com/forum/archive/index.php/800_res/800page.html'}<br />
<br />
if (screen.width == 1024)<br />
{parent.location.href='http://www.webdeveloper.com/forum/archive/index.php/1024_res/1024page.html'}<br />
<br />
</SCRIPT><br />
<br />
<br />
PG<!--content-->But why make two pages when you could make one that works for any resolution? And in all honesty, HTML Goodies is a really bad site to learn from. <br />
<br />
Looking at the site I see the banner image is 760px wide. Try to postion the rest of your stuff within that size of an area in terms of width and you should be good. Even on a larger resolution things won't look out of whack.<!--content-->For some reason, I thought I had made everything based around the top frame (the banner). I guess not. I will definately try that again, thank you so much!<br />
<br />
Everyone's advice is greatly appreciated.
<br /><br />
Thanks again!<!--content-->