How Wide to Design a Web Page

liunx

Guest
hello all,

this is my first post on this forum, so please forgive any lapses in etiquitte...
so i am charged with designing a new website for a small business here in sf, and i am wanting to make the site 850-900 pixels wide. would i be doing my client a disservice? in the past i have always kept sites at about 750 pixels wide do to the variations in users screen resolution and not wanting to impose horizontal scrolling. but if you look at the current stats (<!-- m --><a class="postlink" href="http://www.w3schools.com/browsers/browsers_stats.asp">http://www.w3schools.com/browsers/browsers_stats.asp</a><!-- m -->) these days its actually a pretty small percentage of users that have a screen resolution of 800 wide or smaller. so wouldn't it be safe to assume that we can start building sites that are wider than 800 pixels. is there a current industry standard? any opinions or suggestions out there??

thanks!
JohnI would say, if you explain the screen res issues to your client and they still want you to do it, then do it. Otherwise you could possibly make the site resizable with the browser.Screen resolution alone isn't enough to go on. 1024x768 seems to be the leading resolution in terms of popularity, but you have no idea how many of those people surf with their browsers maximized, and how many don't.
The best thing to do would be writing pages that can flow so that the width isn't an issue.What I have been starting to do myself is when I design the site initialy, say in photoshop or something like that I will go with a 1024x768 image size and when I decide what actual images I am going to use I will break them up into much smaller sizes and then do the rest (background colors and and repeating background images) to fill in the spaces in html and css. You can set up the page to dynamical fit to any browser size or to float in the middle of a browser. I find it a good idea to keep the width smaller than 800px, and let the content expand the page down. People are a lot more used to scrolling up and down a page, so i never worry about that.

I personaly never view my browser window full screen. I like to be able to see my desktop behind it and be able to use things on my desktop while I am browsing. Though, my screen resolution is 1680x1050, so it is pretty big.Why use px when you have % ?Why use px when you have % ?

Often folks want pictures on web sites, and it's pretty tough to be sizing them in %. So if you have an image that's 600px across, suddenly you're looking at a minimum width of your site - in px.

Personally I'm still using 800px as the max width of my sites. I've seen too many of my customer's PC's with smallish screens. My monitor is 1600 across, and I like to keep my browser window to about 800, maybe 1000.

DaveThanks, tracknut. That makes sense.

However, you could use % for the overall (page/table/column/etc.) width and still use px to size the images. You could even specify % for the images ... as long as you did the math and kept them in proportion. With the images specified in px, the window would only shrink as small as the image in it, but the text/whatever would still "flex" to fit. With the images in %, they would "flex" along with the text/whatever. The only real problem I foresee with px-sized images and %-sized pages is if you want to display very large images in a very specific size. i.e. large enough to take up the entire width at the windows fullest and you're not willing to see them shrink.

... or am I missing something?Here's an example of % for images in conjunction with % for the page. (The code for the page is in the css, which I did not show.)

<div><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://img-srv.dtcbuilder.com/engine/builder/images/1/5/6/4/8/5/file/5.jpg" alt="Fire Piston after just one push" width="30%" align="left" />
<font size="2">Ever wish you could reliably start a campfire without matches, lighter or magnesium? Would you believe it can be done almost without effort in under 30 seconds? Using the heat created by compressing air, the remarkable Fire Piston creates a burning ember with a single push.
<br />
<br />


The Fire Piston is the most amazing and effective fire starter ever conceived. It works on the same principle as the diesel engine. Air molecules within the cylinder become so hot with a single push, tinder placed in the end of the Fire Piston is ignited by compression, instantly becoming a glowing ember. With no more effort than lighting a match.
<br />
<br />
The Fire Piston is the most amazing and effective fire starter ever conceived. It works on the same principle as the diesel engine. Air molecules within the cylinder become so hot with a single push, tinder placed in the end of the Fire Piston is ignited by compression, instantly becoming a glowing ember. With no more effort than lighting a match.
<br />
<br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://img-srv.dtcbuilder.com/engine/builder/images/1/5/6/2/0/6/file/6.jpg" alt="Coco Bolo Hunter model Fire Piston" width="30%" align="right" >
<br />
<br />
<br />
The Fire Piston can ignite a variety of tinder including true tinder fungus, mullein pith, milkweed pod, <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://botit.botany.wisc.edu/toms_fungi/dec2001.html" target="blank" alt="fomes fomentarius" >fomes fomentarius</a> (hoof fungus), wood punk, and charcloth.
<br />
<br />
The most familiar methods for fire starting today involve the transfer of an isolated flame, such as from a match or lighter, to a combustible material. Matches and lighters require little effort, are effective under favorable conditions and their use has become so common that they are the only methods most people know. But, that flame from match or lighter is fragile and adversely affected by wind and water. Anyone that's tried to light a campfire on a windy or wet and day knows that. Put windy and wet together and you can just about forget it.</font>
<br />
<br />
<font size="3"><b>The Fire Piston will get a fire going when matches and lighters can't,
<br />
or aren't at hand.</b></font>


It's not complete by any means, but it illustrates what I'm getting at.Makes complete sense, Sarge. In my situation, it seems like every site I make has a fairly significant photo gallery, which ends up being the page(s) that push the boundaries on size. The rest of the pages can all be done like you suggest, but of course once the site is set up to hold the gallery then that kind of dictates the minimum window size.

Dave...It's not complete by any means, but it illustrates what I'm getting at.
Wow, -re: 'piston fire-starter', -I'd like to red more about this. :D This summer I learned how to build a fire using a empty Coca-Cola can, a Toblerone chocolate bar and a super-dry tinder stick as commonly found on a dead, standing tree (seriously!)...

-McGyver would have been proud. ;)Wow, -re: 'piston fire-starter', -I'd like to red more about this. :D This summer I learned how to build a fire using a empty Coca-Cola can, a Toblerone chocolate bar and a super-dry tinder stick as commonly found on a dead, standing tree (seriously!)...

-McGyver would have been proud. ;)

lol Visit my web site ... below ... in my sig ... WeGotMoreStuff.

On the Fire Piston page, there's a link to the history of the thing.Hi everybody,
I am RMahesh. I'm new to Perl Script. I created one script for moving the folder from one location to another location. It working properly. But I need it will come to loop statement. Anybody Pl. help me.

use File::Copy;
move("$outloc3$outcopy3", $fiwebloc3);You need to post that question in the perl section. This forum section is about problems with html. You would also want to start a new thread, since that question has absolutaly nothing to do with the content of this one.a web page shouldn't be more than 760px. many users are still using 800x600 this isn't always down to old hardware it is down to personal preference and eye sight.

as someone mentioned if you use % its a lot more accommodating. although there are a lot of techniques of using px and % the background-repeat: is a nice bit of CSS which helps make a site look like its designed for that resolution without actually being completely fluid.

something along the lines of a centered 760px box model with a larger and/or repeated horizontal background lets the site look great for all resolutions.

you will be shocked to hear some people still use 600px x 400px resolution
 
Back
Top