I'm stumped on this one, if you view <!-- m --><a class="postlink" href="http://nwgk.polygraphik.com">http://nwgk.polygraphik.com</a><!-- m --> i have certain resolutions in order to view the site, but people use so many different resolutions its to much for me, does anyone know of a script or something that will autoresize my images and code to fit everyones resolution. I would really appreciate it.<!--content-->One of the biggest challenges of web design is to design web pages that look good in different resolutions. There is no magic script that will answer all your problems but there are a number of different things you can do to get around this problem.<br />
<br />
1. Use tables in your design and set the widths using percentages rather than pixels. That way, the design will stretch to fit whatever resolution they are using. You need to be careful with this method though, because when the table stretches it can really mess up the alignment of your text and pictures if you don't think it through carefully.<br />
<br />
2. Use javascript to detect what resolution the person is using and then redirect them accordingly to a page that is designed to fit that particular res. This of course means a lot of extra work for you because you have to design multiple versions of the pages for different resolutions which isn't very practical.<br />
<br />
3. Design a 'fixed' layout using pixels to define the sizes so that it does not stretch at all. Make it look good in the lowest resolution you think your visitors will use (normally 800x600). You will have to put up with the empty spaces left at higher resolutions but if you put all of your content within a table, and center that table it will look nicer at all resolutions.<br />
<br />
Hope that helps!
<!--content-->Just to chime in with a variation on Goldilocks' "tables with percentage widths" theme, a variation on that is to have three columns with 2 of fixed width and one fluid. It can be done along these lines:<br />
<br />
| COL 1 | COL 2 | COL 3 |<br />
| 120px | No width assigned | 120px |<br />
| | As the res changes so | |<br />
| | does this column's width| |<br />
<br />
<br />
Neil<!--content-->Maybe the mods will spank me if I prostitute this post too much... but here goes again. Second time today. This reply was one I did for another thread... some pointers for you with the good advice you have already had.<br />
<br />
800*600 is what I would aim for. If anyone is still surfing at any res less then forget them. Most surfers now surf at 800*600 or above. Could get into some deep discussion about it but there is no point going back to anything less. Don't think I have ever seen a web page in such a long time consider widths of anything less.<br />
<br />
As for 800 width, this means you design at 750 considering tool bars etc in Macs and PC's and the various browsers. <br />
<br />
Feel embaressed about posting this again, but what follows is an old post that I feel is relavent.<br />
<br />
<br />
There are four main factors that will determine how a site is percieved, these being: <br />
<br />
Screen Size <br />
Screen Res <br />
Browser <br />
Platform (ie Mac, Web TV or PC) <br />
<br />
<br />
I hope screen size doesn't need explaining but to say that in my experiance people using 17" and 19" monitors at home still view sites at a 800*600 res... only because they don't know how to ajust the res. <br />
<br />
Screen res is an important function to plan for when writing a site. The res to design for is 800*600. Most surfers view at this res (51%), but that doesn't mean some surfers don't surf at 640*480 (6%). I think it safe to ignore the latter though. Often over looked is the live space of a screen. <br />
<br />
A browser affects the live space. Just because a screen res is 800*600, that doesn't mean you get that to play with. Live space is the space you have when tool bars etc are removed. The lowest live space you should design for is (accounting for Netscape/Explorer) 778*406 on a pc and 751*427 on a mac, that is obviously at a 800*600 screen res. Various versions of explorer and netscape have diffrent live spaces, those just quoted would be the lowest of versions 5+. Combining these two you get 751*406. <br />
<br />
As you can see, the software changes the display. Hardware will also chnge the display. From the last paragraph you will see that PC's and Macs work a little differently. But there is a 3rd and much overlooked way of connecting to the web. Via a TV. TV's to put it bluntly are crap for internet viewing and interactivity. But people are buying more and more of them as an alternative to hogging up a PC or because they are cheaper. I am not sure what a web tv screen res would be, but the live space is 544*378. I would never design for web tv, but that depends on your content. If you are interested in more on web tv go to: <br />
<!-- m --><a class="postlink" href="http://developer.webtv.net">http://developer.webtv.net</a><!-- m --> <br />
<br />
As for your question as I may have digressed a little... <br />
<br />
There are two ways to combat the various diplays in a design aspect. <br />
<br />
1] Design your page at a fixed width, ie at a 800*600 res, with a live space of 751*406. This way mac and pc viewers will have no problem with your site. Perhaps the best way to start the design is with a table, width set to 751... and include everything inside that. <br />
<br />
2] The alternative is to dynamically author your site so that your page expands to fill the user area. If you do this... design your page with your monitor at 800*600 res then tweak it at a higher res. Why? The page may look great at a low res but empty at a higher res. <br />
<br />
I hope that gives you some insight and some design ideas. <br />
More than anything I hope it made sense.<!--content-->I think you have to design for a minimum resolution of 800x600, but you also have to consider how your site will look in a higher resolution. There is nothing worse than a small text block in the corner of a screen on a 1600x2200 resolution etc<br />
<br />
Generally I never go beyond 700 pixels wide to account for additional tool bars etc (nothing worse than having to scroll 10-12 pixels horizontally all the time)<br />
<br />
Your options, if using variable table size, is either to fix the width of the content column/table and then make the white space on either side larger/smaller depending on resolution, or to keep a variable content table width which can then thoroughly mess up your postioning of elements as explained by goldilocks.<br />
<br />
Whatever you do, do it simple...<!--content-->Thanks again you guys, i should have used tables in the first place, maybe laziness caught up to me and kicked me in the butt. So i will slice up my layout and use percentages as suggested instead of the layers i was using.<!--content-->Originally posted by kdjoergensen <br />
I think you have to design for a minimum resolution of 800x600, but you also have to consider how your site will look in a higher resolution. There is nothing worse than a small text block in the corner of a screen on a 1600x2200 resolution etc <br />
1600x220?? man, do you have a 35" monitor???<br />
<br />
most monitors and graphics cards won't run very well at that resolution. in fact most monitors won't even go that high, if it does then the refresh rate is almost NULL. which is not good for your eyes and will give you headaches.<!--content-->This time around i sliced up my images and used tables instead of layers and it works great on every resolutions, thanks for the push guys!<!--content-->
<br />
1. Use tables in your design and set the widths using percentages rather than pixels. That way, the design will stretch to fit whatever resolution they are using. You need to be careful with this method though, because when the table stretches it can really mess up the alignment of your text and pictures if you don't think it through carefully.<br />
<br />
2. Use javascript to detect what resolution the person is using and then redirect them accordingly to a page that is designed to fit that particular res. This of course means a lot of extra work for you because you have to design multiple versions of the pages for different resolutions which isn't very practical.<br />
<br />
3. Design a 'fixed' layout using pixels to define the sizes so that it does not stretch at all. Make it look good in the lowest resolution you think your visitors will use (normally 800x600). You will have to put up with the empty spaces left at higher resolutions but if you put all of your content within a table, and center that table it will look nicer at all resolutions.<br />
<br />
Hope that helps!
<!--content-->Just to chime in with a variation on Goldilocks' "tables with percentage widths" theme, a variation on that is to have three columns with 2 of fixed width and one fluid. It can be done along these lines:<br /><br />
| COL 1 | COL 2 | COL 3 |<br />
| 120px | No width assigned | 120px |<br />
| | As the res changes so | |<br />
| | does this column's width| |<br />
<br />
<br />
Neil<!--content-->Maybe the mods will spank me if I prostitute this post too much... but here goes again. Second time today. This reply was one I did for another thread... some pointers for you with the good advice you have already had.<br />
<br />
800*600 is what I would aim for. If anyone is still surfing at any res less then forget them. Most surfers now surf at 800*600 or above. Could get into some deep discussion about it but there is no point going back to anything less. Don't think I have ever seen a web page in such a long time consider widths of anything less.<br />
<br />
As for 800 width, this means you design at 750 considering tool bars etc in Macs and PC's and the various browsers. <br />
<br />
Feel embaressed about posting this again, but what follows is an old post that I feel is relavent.<br />
<br />
<br />
There are four main factors that will determine how a site is percieved, these being: <br />
<br />
Screen Size <br />
Screen Res <br />
Browser <br />
Platform (ie Mac, Web TV or PC) <br />
<br />
<br />
I hope screen size doesn't need explaining but to say that in my experiance people using 17" and 19" monitors at home still view sites at a 800*600 res... only because they don't know how to ajust the res. <br />
<br />
Screen res is an important function to plan for when writing a site. The res to design for is 800*600. Most surfers view at this res (51%), but that doesn't mean some surfers don't surf at 640*480 (6%). I think it safe to ignore the latter though. Often over looked is the live space of a screen. <br />
<br />
A browser affects the live space. Just because a screen res is 800*600, that doesn't mean you get that to play with. Live space is the space you have when tool bars etc are removed. The lowest live space you should design for is (accounting for Netscape/Explorer) 778*406 on a pc and 751*427 on a mac, that is obviously at a 800*600 screen res. Various versions of explorer and netscape have diffrent live spaces, those just quoted would be the lowest of versions 5+. Combining these two you get 751*406. <br />
<br />
As you can see, the software changes the display. Hardware will also chnge the display. From the last paragraph you will see that PC's and Macs work a little differently. But there is a 3rd and much overlooked way of connecting to the web. Via a TV. TV's to put it bluntly are crap for internet viewing and interactivity. But people are buying more and more of them as an alternative to hogging up a PC or because they are cheaper. I am not sure what a web tv screen res would be, but the live space is 544*378. I would never design for web tv, but that depends on your content. If you are interested in more on web tv go to: <br />
<!-- m --><a class="postlink" href="http://developer.webtv.net">http://developer.webtv.net</a><!-- m --> <br />
<br />
As for your question as I may have digressed a little... <br />
<br />
There are two ways to combat the various diplays in a design aspect. <br />
<br />
1] Design your page at a fixed width, ie at a 800*600 res, with a live space of 751*406. This way mac and pc viewers will have no problem with your site. Perhaps the best way to start the design is with a table, width set to 751... and include everything inside that. <br />
<br />
2] The alternative is to dynamically author your site so that your page expands to fill the user area. If you do this... design your page with your monitor at 800*600 res then tweak it at a higher res. Why? The page may look great at a low res but empty at a higher res. <br />
<br />
I hope that gives you some insight and some design ideas. <br />
More than anything I hope it made sense.<!--content-->I think you have to design for a minimum resolution of 800x600, but you also have to consider how your site will look in a higher resolution. There is nothing worse than a small text block in the corner of a screen on a 1600x2200 resolution etc<br />
<br />
Generally I never go beyond 700 pixels wide to account for additional tool bars etc (nothing worse than having to scroll 10-12 pixels horizontally all the time)<br />
<br />
Your options, if using variable table size, is either to fix the width of the content column/table and then make the white space on either side larger/smaller depending on resolution, or to keep a variable content table width which can then thoroughly mess up your postioning of elements as explained by goldilocks.<br />
<br />
Whatever you do, do it simple...<!--content-->Thanks again you guys, i should have used tables in the first place, maybe laziness caught up to me and kicked me in the butt. So i will slice up my layout and use percentages as suggested instead of the layers i was using.<!--content-->Originally posted by kdjoergensen <br />
I think you have to design for a minimum resolution of 800x600, but you also have to consider how your site will look in a higher resolution. There is nothing worse than a small text block in the corner of a screen on a 1600x2200 resolution etc <br />
1600x220?? man, do you have a 35" monitor???<br />
<br />
most monitors and graphics cards won't run very well at that resolution. in fact most monitors won't even go that high, if it does then the refresh rate is almost NULL. which is not good for your eyes and will give you headaches.<!--content-->This time around i sliced up my images and used tables instead of layers and it works great on every resolutions, thanks for the push guys!<!--content-->