Web Development: Width Limitation

b4u

Golden Member
Nov 8, 2002
1,380
2
81
Hi,

I'm going to develop a web site from scratch, and although I have some experience with the technology (developing intranet sites), I want to ask all your experts out there for your opinions:

My target resolution will be 800x600, and so apparently, maximazing my IE and counting the pixels seen, I can count about 780 pixels available (for example the right side has the vertical scroll bar taking up space).

For a resolution of 1024, I would get around 1004 pixels. But my focus is 800x600 screen resolution.

Now I know for example that Windows XP has a default blue/green theme, and that could ruin this pixel counts I made. What I want to ask is: "locking" the with of the page contents at 780 pixels would be acceptable?

I'm thinking about "locking" the width, so that the aspect of the page keeps the same on every resolution, with no auto-justify of contents ... if one would open it in a smaller window, it would get an horizontal scroll bar, instead of lines being wrapped inside the table cells.

I must think about cross-browser compatibility (obviously), and on this resolution point ... to maximize my view area and user positive experience (no fidling with scroll bars, unless they open a small window, but I can't do anything about that).

Any opinion counts ...
 

Kilrsat

Golden Member
Jul 16, 2001
1,072
0
0
I have a 17" LCD running @ 1280x1024, and I browse with a maximized Firefox. One thing I absolutely cannot stand is webpages that don't use a majority of the space available. Its very easy to design with percentages, and you can even load different graphics depending on screen resolution, if that's your next excuse.

Maybe I'm a minority, but I have this space, I want to use it. Forced vertical scrolling is bad.
 

LordPhoenix

Golden Member
Jul 1, 2004
1,341
0
0
i think like 90% of users use 800 x 600 or 1024 x 768 so it would be wiser to just do 780 width.
 

AmigaMan

Diamond Member
Oct 12, 1999
3,644
1
0
Originally posted by: Kilrsat
I have a 17" LCD running @ 1280x1024, and I browse with a maximized Firefox. One thing I absolutely cannot stand is webpages that don't use a majority of the space available. Its very easy to design with percentages, and you can even load different graphics depending on screen resolution, if that's your next excuse.

Maybe I'm a minority, but I have this space, I want to use it. Forced vertical scrolling is bad.

I agree with you on principle that webpages should be designed to use all available space if it can. But in practice, it's not that easy. Especially if you have to support every browser in the world, and that POS Nutscrape 4. Graceful degradation is hard, but doable. Getting everyone on your team to code as you do, is even harder. Which is why fixed width table layouts are still being used.
 

Cheetah8799

Diamond Member
Apr 12, 2001
4,508
0
76
I usually lean towards the side of making sites that almost 100% of people can view. If I know it's a site for the general public, I for sure want it to work for 800x600 users with the browser set to full screen. If possible, if it's not a lot of content, I might try for 640x480 resolution. That's pretty hard to do though.

If it's a site for a specific set of people, such as at a business, you might be able to figure out what 99% of the users have their resolution set to. I know where I work most desktops we put out are defaulted at 800x600. None lower, and a bunch changed to 1024x768. Our webmaster made the genius decision to make our main website for 1024x768 resolution! It won't show right at all on anything less... Naturally we have a TON of complaints about this...
 

royaldank

Diamond Member
Apr 19, 2001
5,440
0
0
Lately I've been doing most sites at 780 or a hair less. Center it and use a complimentary color for the background. Lots of wasted space at higher resolutions, but the off color bk makes it look less painful. Plus, for most that use 800x600 or even 1024x768 it looks like a nice fit on the screen.
 

rh71

No Lifer
Aug 28, 2001
52,844
1,049
126
In my experience, the width you should use is actually 770. ;)
 

b4u

Golden Member
Nov 8, 2002
1,380
2
81
The problem with percentages, is that we can never be sure the page will display properly ... yes, I can check the resolution used, the space available on the browser, but not only it's a bit of a pain given the different browsers around, and their way of parsing html, but the page design would be very different.

I mean, I'm planning on using some images on the top of the page, where the logo, menu and some other stuff are presented. If I design for different resolutions, I'll have to "create" variations on the images, so that the page feels right all the time ... how many overwork wil I have? How much space will the page (on the server) occupy? Will I still be sure the page will look right all the time? Of course not ... just imagine some people use the browser non-maximized ... if they have about 300x200 pixels available, that just ruins my hard work ...

And designing a site with percentages just gives a lot of overwork on testing each page ... I lost count on the number of pages I found on the internet with percentages, and when I resize the window the content just dances around the screen, and I completly lose the presentation that the author just worked on for the public ... my next move is just ... maximize and voilá ... all fixed.

I personally work on a 19" monitor with 1024x768 resolution, and I can live with white sidebars when finding a site designed with 800x600 resolution in mind.

The page will serve the purpose of giving a web-face to a company which, besides all services non-computer-related they offer, will also offer the service of designing web pages, so presentation is very very important ... I would never buy a web page from a company with a poor one, or with one I don't like at all ... or maybe I'm one of those old-school programers who are used to have control over everything (or at least the most things I can get control over). :D

Anyway, Percentage vs Fixed with, I still prefer the latter one, as I can only see advantages over the first one. That's just my opinion, and since I'm on this business, I like to hear opinions of many other people around the globe ... crossing experiences and knowledge is the way to the future ...

... so keep those opinions flowing this way :D

Thanks
 

b4u

Golden Member
Nov 8, 2002
1,380
2
81
Originally posted by: rh71
In my experience, the width you should use is actually 770. ;)

Well, if I go with the maximum available, I would use 780 ... but then, if something steals me a single pixel, I would get a horizontal scroll bar ... and there are many things around that can steal pixels ... for example, the default theme on Windows XP ... even the window title bar is a bit ticker (sp?) than those of the previous windows versions (although that one just steals vertical pixels, which are not that important, since web pages have vertical scroll bars).

That's the reason that would made me reduce that resolution to 770 ... what about you? Do you have any other reason from your personal experience that makes you go for 770?

Share with us ... :)
 

rh71

No Lifer
Aug 28, 2001
52,844
1,049
126
^ like you said, browser chrome... can't account for everyone and the 10 pixels won't cost you in design... so go with better safe than sorry.
 

luquidwrym

Junior Member
Nov 1, 2004
13
0
0
When designing a web site you have to know your target audience. If you have no idea what that target audience is then go with 800x600. If people have to scroll sideways they just won't. If you know your target audience is going to be alittle more technical and have newer equipment then design for 1024x768.

I have found that 780 pixels will still force some sideways scrolling on some set ups. I use 760 most of the time, this plays it safe. I have still had scrolling on 770.

As a designer unless a client is paying me to do multliple rez versions of the site I do not offer them. It adds a great deal of work to get the finished product and increases the complexity a great deal, plus the potential for errors. I shoot for the most common denominator for web sites, and more than 50% of the people out there have 800x600. I never design for 640x480 this is a small minority and frankly most sites will force these people to scroll anyway. They use this rez because they are going blind.

I WISH more people used at least 1024x768 but they just don't, for many people they just can't read the text. As more newer systems with larger screens come out and default rezolutions go up this trend will change, but for the next 2 years I think most web sites will default to 800x600.

Most designers WANT to use more screen space, but this would piss most clients off. At least the clients I've worked with. You have to remember most people can barely find the power button on their PC's let alone change the rez. If a site is for the general public then unfortunatley you are stuck. :(

 

kuljc

Golden Member
Apr 7, 2004
1,845
0
0
if you still need input here's mine:

you should take a look at professional sites that are out there already... I was debating the same problem you are thinking of now. Take a look at msn and dell (if I remember correctly). Of course for the reasons you already know, they have made their page w/the 800px width in mind. But they both use different widths. So in actuality, you don't have to worry much about that.


Also for the reasons you have already listed, a good webpage will control EVERY aspect of what will be displayed. Sometimes it's ok to let some things slide, but if you want to be 100% sure everything will look the way you want it to, then you'll have to.

Of course there are times when you don't care, and you'd just like it to look nice on any resolution and fill up the whole screen. In those cases you should look at amazon.com, IMO don't like (but don't mind) when a page only fills up 1/2 my screen (i have a wide screen) so I actually copied their layout :eek:)

So yeah.... to sum it up, just copy from professional sites (they all do it).

Well have fun and I hope I helped.


Forgot to mention:
If you still want to keep the 800px width, then you should checkout www.shuttle.com they actually center the page unlike dell and msn so it doesn't look like it only fills up 1/2 the screen. (which I like better)
 

Kntx

Platinum Member
Dec 11, 2000
2,270
0
71
Make a version for 800 pix and one for 1024 and have 800 displayed by default. At the bottom of your page somewhere have a link that says something like "page too small?? Click here to make it bigger!". Set a cookie that will allow the user's browser to remember what size it should be displayed at the next time they visit the site.

edit: you could also use javascript to capture the screen resolution and display the page properly no matter what.
 

Malak

Lifer
Dec 4, 2004
14,696
2
0
Originally posted by: Kilrsat
I have a 17" LCD running @ 1280x1024, and I browse with a maximized Firefox. One thing I absolutely cannot stand is webpages that don't use a majority of the space available. Its very easy to design with percentages, and you can even load different graphics depending on screen resolution, if that's your next excuse.

Maybe I'm a minority, but I have this space, I want to use it. Forced vertical scrolling is bad.

The arguement is forced vertical scrolling vs forced horizontal scrolling. The thought is that a lot of people still use lower resolutions so if you use a higher width, they have to do the horizontal scroll, which is worse than vertical.

I say, they need to increase their resolution. Call me heartless, but my target audience isn't using that low of resolution. Anything under 1280x960 is so 1998.
 

rh71

No Lifer
Aug 28, 2001
52,844
1,049
126
simplest solution is to detect the screen resolution and do a redirect to the appropriate version if you don't consider this too much work. This has been discussed in other threads (on how to do it). Keep in mind not everyone has (or wants) their browsers maximized so you can't account for EVERYONE regardless. I think screen res tells a lot about the user... so why not do it that way ? It's especially easy if you're using a dynamic language so you can put in variables instead of hardcode for widths everywhere.
 

Kntx

Platinum Member
Dec 11, 2000
2,270
0
71
That wouldn't even be so hard to do if you just load a different style sheet depending on the detected screen res.

edit: replying to the post above