CSS help needed...

[schoolboy]

I think you are falling into the common trap of designing a website FOR YOURSELF, and basing the design on what you are seeing on YOUR MONITOR, on a browser YOU HAVE CHOSEN.

All cardinal errors in the world of web design.

We build quite a few sites (not just zencart) and twice a month we convene focus groups (generally people we don't know) to come in and "test drive" the sites we are working on. We tell them to be ruthless about criticising the sites. And we test on a wide variety of machines, screens, operating systems... etc

Since starting this procedure some 10 years ago, we have found design formulae that work consistently well. But we still get very critical feedback from the focus groups.

Usually, the final site ends up looking very different from what we envisaged...

[WebKat]

Well this is why I'm asking what browser you're using and such, because when I look at it, I can't replicate the problem you're seeing.

[schoolboy]

The most important thing about eComm sites - way above "s e x y" looking design - is USER EFFICIENCY.

Webshoppers want SPEED, SIMPLICITY, EASE and EFFICIENCY. (These FOUR key factors were identified in a massive research undertaking conducted by the eConsultancy a couple of years ago.)

So... anything that makes sites SLOWER, MORE DIFFICULT, LESS STREAMLINED and LESS EFFICIENT, need to be addressed.

By making your site 100% width, you are "stretching" various components over a wider area - and one result of this is that users need "more mouse effort" to navigate the site.

Think of it this way...

If your competitor's site achieves a user goal in TWO CLICKS and your site achieves the same goal in THREE CLICKS, your site is 33% LESS EFFICIENT than your competitor's site.

This stuff is known to have a huge impact on sales. Less efficient sites will not get as many sales as more efficient sites...

So... while YOU make like 100% width, please know that it makes the site LESS EFFICIENT and MORE DIFFICULT to navigate.

But don't take my word for it... when you aren't getting sales, it's probably because your visitors (potential customers) feel the same way.

[WebKat]

I'll consider setting a fixed width, but the problem I have with that is that it alienates anyone with a *narrower* browser window. Figuring out exactly WHAT fixed width to use is very difficult.

How does having a site that fills the screen cause the user to have to do three clicks instead of two?

Also, just as a data point, Amazon.com fills 100% width on the screen as well, and they seem to be doing ok.

[schoolboy]

I'll consider setting a fixed width, but the problem I have with that is that it alienates anyone with a *narrower* browser window.

We're not talking about browser windows here... we are talking about monitor screen resolutions and aspect.

Figuring out exactly WHAT fixed width to use is very difficult.

980 pixels is considered suitable for over 95% screen resolutions and screen widths

How does having a site that fills the screen cause the user to have to do three clicks instead of two?

That was just an example of efficiency. If I have to shift my mouse pointer FURTHER, it means more effort. This may seem "silly" but it's not my research that points out these faults. It's research from Forrester and eConsultancy... probably the two most reputable internet research firms in the world.

[WebKat]

We're not talking about browser windows here... we are talking about monitor screen resolutions and aspect..

...which affects browser window width. You refer to it one way, I refer to it another way, but we're talking about the same thing.

[schoolboy]

Well, you are wrong... but frankly, I don't really care if your site is user-efficient or not.

In fact, keep it as it is, because we have 3 clients in your industry, and for as long as your site is less efficient than theirs, they have a competitive advantage over you.

[WebKat]

I don't understand why you're getting attitude with me. A small browser window on a larger monitor with higher resolution shows the same thing as a larger browser window on a monitor with lower resolution/on a smaller monitor/etc. It's how many pixels wide the browser window is that matters, and that is determined by the size of the window and by the resolution of the monitor. If I have a monitor running at 800x600 and have a fullscreen browser window, that's going to look exactly the same as having an 800 x 600 browser window on a much higher resolution monitor. Do you see my point? They're ultimately the same thing. I'm not "wrong."

[schoolboy]

By default, all browsers initially open in 100% of screen width. To resize the browser requires a manual change by the person viewing that browser. Unless there is a compelling reason to change the default opening width (such as a stretched out site) practically everyone keeps the default view (100% of screen width).

Again, it is a user-efficiency consideration. By making your site 980 pixels wide you remove the need to alter browser size in over 95% of views. Every EXTRA action needed by your users contributes to inefficiency.

Consider too that people now browse in TABS... flicking from one site to others in quick succession. IF they have to re-size their browser just because YOUR site is affecting the look of the other tabs, they will stop looking at your site, and look only at those that offer them less hassle.

As I said... this is detailed research done by Forrester and eConsultancy. You are perfectly free to ignore it, of course.

[rstevenson]

By default, all browsers initially open in 100% of screen width.

One small caveat here, if I may. That statement is true of one particular, quite popular but not ubiquitous, operating system. Those of us who use the other OS, the one gaining in popularity, have never experienced that default behaviour. In fact this other OS only recently adopted a similar sort of behaviour in its latest version, and only as an option set on an application by application basis.

The reason I noticed the horizontal scrolling is because I often work in two or three programs at once and I like to be able to click from one to the other while keeping them all visible. Hence my normal browser window width is about 1000 pixels even though my screen is set to 1680 px wide. I use the latest Firefox, by the way, as my main browser.

So to get to the OP's question about not seeing in his browser what I'm seeing, that's normal. That's exactly why you have to test in different browsers and different machines, and preferably in different OSes. It would be nice if all browsers rendered code exactly the same but they don't. I expect that Chrome is making some sort of assumption that FF is not making (or vice versa).

I see your home page no longer shows the little bit of scroll -- did you make stevesh's suggested change? -- but the product page still requires a scroll of about 1" to the right. This is true until I increase the browser window width to about 1160 px.

As for the more general issue of what should be the best site width, I agree with schoolboy that 980px is currently optimal. I usually set things at 960px just to be sure. Do you know about this handy gadget?

Maybe someday we'll be able to make sites that have a design minimum and maximum width, floating in between those two extremes, but most browsers can't handle that yet.

Rob