43 replies to this topic

[nuts]

It is conventional wisdom that websites should not show a horizontal scrollbar at 800x600 resolution, which means the max width should be 760 or possibly even less.

Does anybody have any up-to-date statistics on what percent of viewers still use 800x600?

Awstats does not list browser resolution, but my awstats report shows OS usage : 1.5% mac, 3.7% win98, 10.7% unknown, 16.7% win2k, 64.9% xp.

[rynert]

According to w3schools in July 25% were 800*600.
In Oct 3.2% were Macs.

I always work to 780 myself, is the 760 to cater for a MAC?

[bwelford]

I use Firefox on Windows XP. The maximum width without horizontal scrolling when using a 800 x 600 window is 773 pixels. I think probably 760 is a wise maximum for PC computers.

In some markets, e.g. graphic design, a high proportion of those visiting the website will be using Macs so it is important to get it right for them, if they're using a 800 x 600 window. I believe a prudent maximum in that case is 740 pixels.

[rynert]

Barry, when I use FF on XP I can see 780 wide with 800*600.

Can you take a look at www.weddingchaos.com/800-600.html and see if you can see the whole right column?

I'm curious as if what you are saying is correct then I have made all my sites too wide!

With respect to MACs if only 3% use MACs and only 25% of them use 800*600 then very few people will suffer from the horizontal scroll at less than 780/760. Factor in the people that mostly use MACs (designers for one) and I doubt they design in 800*600. (of course.. i have no figures to back this up!)

[edit - it seems IE introduces scroll at 780, but is fine at 779]

[sanity]

Good to see you Mike.

I've not seen any recent stats but keep in mind even if users are on a higher resolution than 800x600 they may not surf with their browser maximised.

[bwelford]

Hi rynert,
I can't see the whole of the left column using Firefox on Windows XP at 800 x 600 resolution. Here's a 775 pixel wide web page. Can you see that without a horizontal scroll bar. I can't.

It actually takes a 810 x 600 window to avoid the horizontal scroll bar for my setup.

[rynert]

If I load that page the no, I can't see it without a scroll, however, if you add a left-margin 0px; then it fits fine.

To fit in IE it also needs the right-margin 0px;

And to fit in NN 6 it needs neither to avoid the scroll, although there is a gap on the left ?!?!

I didn't realise that the browser automatically placed a margin / space / padding around your content. I guess I always specify the margins so never actually encountered the default and therefore never had a problem.

[bwelford]

That's fascinating, rynert. I still get it 2 px too wide even adding the zero left and right margins. I think prudence would suggest taking a few more out just to make sure.

[DianeV]

Have you added this to your CSS?

body {margin:0; padding:0; border:0}

That ought to take care of the few-pixel borders that browsers put around pages by default. Bear in mind, too, that Mozilla's scrollbar is not as wide as others.

[nuts]

Barry, I saw a horiz scrollbar on that test page, also a leftmargin of several pixels. The leftmargin/marginwidth setting on the page, as well as cellspacing/cellpadding in tables, can be a big influence. Not to mention <ul> tags, which can really throw it off.

My feeling is that if somebody is surfing with the browser window not maximized, then the horizontal scrollbar is not really my problem -- I can't anticipate their window size.

But, for example, if you are using right-hand placement for google tower ads, are you losing clicks and dollars if there is a slight horizontal scroll for 25% of your viewers?

What I am looking for is 3 columns: right col 160, center col 468, gutters 5 pixels (?), which leaves only 122 for the left column -- pretty narrow to get any real information squeezed in there -- if you are going to limit total width to 760 -- and that does not give you any leftmargin/marginwidth, or cellpadding/cellspacing.

Maybe something a little sneakier is in order -- put a 468x60 banner in a table row with wider center column and narrower side columns, then fit the remainder of the center column (text, header graphic, whatever) into a new table with narrower center column, say 420, leaving more room on the sides. You can stack tables, or place a table in a cell colspan=3.

Just a thought.

[bwelford]

I've now added your suggestion on the CSS addition, Diane, but I still get a width of 773 pixels is the maximum I can see with Firefox in Windows XP at 800 x 600. So the 775 px wide web page has a very tiny extra sliver that forces the horizontal scroll bar.

[DianeV]

Those are the choices. You can always go for a much smaller layout.

[rynert]

Barry, that is odd. Maybe if you want everybody to be happy you have to make it 760 to play safe. On the other hand, and this follows on Mike's point, if you have a horizontal scroll is it a problem in itself, or is it only a problem if content is off the screen?

For example, on my re-design of www.weddingchaos.com I have intentially made the body of the content 780 but there is an extra column down the right for adverts. I believe that if somebody came to my site and saw the horizontal scroll they would scroll once, see there was only adverts there, and just ignore the scroll from that point on (unless they wanted to see the adverts)

In some ways this may even be a positive as the visitor would recognise that I had taken the time to place adverts out of their main field of vision.

Mike, I think this approach may be an idea for what you are planning?

[bwelford]

Good points, rynert. I guess it illustrates that there are no easy solutions. There's lots of different people out there with different hardware, software and ways of picking up impressions.

760 is OK for the 800 x 600 slice that uses PCs. It probably doesn't work for all Mac users depending on what software they're using.

Then finally there's the question of what your visitor may infer from what he or she sees. If I see a typo, I make a mental reservation that this company or individual may not be as reliable as they should be. If I see a very small horizontal scroll bar, do I infer that they were trying but just didn't know enough to get it right?

I guess one final point is that it is screen real estate you're wasting. I have so many toolbars at the top, that I can't afford to lose another horizontal slice at the bottom. However that's the least of the worries here.

[nuts]

Here's another angle: What are we giving up by limiting our display for the convenience of those still using 800x600?

An increasing number of people are using quite large display resolutions, and limited-size web pages look like sad orphans on their displays. How effective are our pages on these browsers?

Quite a number of the more professional websites (i.e., large corporate withs lots of bucks to throw) are using resolution-recognition javascript to customize the page to the display size -- or at least they are using a percentage width figure for tables, which accomplishes the same goal except that fixed-pixel-width graphics (468x60 banners, 160 google towers) can't be squeezed.

Rynert, if advertising revenue is paying the grocery bill, one needs to climb every mountain, tweak every detail to make sure that revenue is maximized. If ads are cpc (cost per click) and the ads are off the screen, are you throwing away part of your paycheck? Plus, if you have cpm advertising (cost per thousand, or pay per display), just like these advertisers usually require "above the fold" or top 1/3 of page placement, one would assume the same advertisers would want their ads to be visible horizontally as well.

I am not sure if this issue will become simpler or more complex with time, as more people get new computers.

Does anybody know a stats program that records viewers' screen resolution? Years ago we setup a javascript page that recorded this data, so I know it's possible (that js file is long gone). It's not a standard item in server logs, like IP, OS and browser type, so stats programs that simply read server logs don't pick it up.

Here's one url that shows something, not quite sure where the stats come from but I assume their site traffic. It shows 800x600 under 10%. There are other interesting stats here too. I think their site may tend to have webmaster traffic, so that influences the figures.

http://www.sitetraff...p?d=m1130846400

[bwelford]

I'm using Site Meter, which shows Screen Resolution as just one of the many ways you can analyze the traffic. The new Google Analytics also shows Screen Resolution as one of its summaries. In both cases, you have to add code to the pages for which you wish to have the traffic data.

[rynert]

Mike, my site actually expands to up to 1300 wide for compliant browsers and as far as you like with IE, just sets the minimum at 780.

Less and less people are using 800x600 but enough people, especially when added to those that may use 1024*768 but don't maximise windows, that we should cater for them, but also cater for people on higher resolutions.

It is hard, if not impossible, to make it work for everybody. Indeed, size asside, I had great difficulty in choosing the correct colour for the 'gold' on the site. Some people saw it as brown, others yellow, some gold. Some had TFT, some LCD, some TV, some had brightness up, others down... just impossible to please all1

[bwelford]

Of course the other aspect is that with relative sizing, text may display as very long lines with wide resolutions. That can be difficult to read too.

[DianeV]

That's the other question here -- the implied question, if you will.

Not all design layouts lend themselves to filling the screen with stuff. Perhaps it's just me as a designer, but I sometimes find I really enjoy a sparse layout.

And Barry's point is an important one; the readability of lines of text decreases (along with enjoyment) as the lines get too long.

[nuts]

For me, I have limited time to spend on things that do not generate revenue. I think that using a site such as the sitetrafficstats.com demo area, which (apparently) gives real-time reports of visitors to their website, is good enough for me -- for this issue. They show about 10% using 800x600. Over a period of time, if this number drops to, say, 3%, it may become a non-issue. 640x480 doesn't even show up on these reports any more.

Back in the dot gone era, we had a great group of young wizards pumping out projects. Our shop had some elaborate plans of getting multiple OS + browser + monitor setups as a testing lab, which never completely came to fruition. I had one experience, where a very sharp kid designed a complex front page for the (profitable) resumerobot.com website -- with graphics cut up and re-assembled in tables, javascript recognition built-in for OS, browser and screen resolution. Worked great. Then I made a trip to the mainland and visited a client. Their shop was using netscape at 1152 x whatever -- one combination we had not tested. The graphics were totally broken -- for all 50 workstations in their office. I came back and discarded the complex design. KISS, thank you very much.