|
Browser Debate
|
User's average monitor resolutions -- July 2005 from: w3Schools
These figures cover a two year period and were collected by the W3schools (which has a significant user base that is interested in technology and can therefore be assumed to have more knowledge and the latest browser, software and hardware--in other words, the monitor resolution statistics are likely to be skewed towards the LOW end of the actual range.) We still believe (a guess) that the general user base in November of 2005 with monitor resolutions of 800 x 600 pixels will be between 30% and 35%.
| 2005 |
Higher |
1024x768 |
800x600 |
640x480 |
Unknown |
| July |
14% |
55% |
25% |
0% |
6% |
| January |
12% |
53% |
30% |
0% |
5% |
| |
|
|
|
|
|
| 2004 |
Higher |
1024x768 |
800x600 |
640x480 |
Unknown |
| July |
10% |
50% |
35% |
1% |
4% |
| January |
10% |
47% |
37% |
1% |
5% |
| |
|
|
|
|
|
| 2003 |
|
|
|
|
|
| July |
8% |
43% |
44% |
2% |
5% |
| January |
6% |
40% |
47% |
2% |
5% |
| |
|
|
|
|
|
| 2002 |
|
|
|
|
|
| October |
6% |
38% |
49% |
2% |
5% |
If you don't want to read any further,
our suggestion for the total width of the sum of all horizontal elements
in your web page shoud be 774 pixels.
In 200-2006, TexasWebDevelopers will be using a canvas size of 774 X 434 pixels.
|
|
640x480 |
| |
Browser |
Width
(with scrollbar) |
Width
(no scrollbar) |
Height |
|
|
IE 6.0 Win
|
620
|
620
|
293
|
|
IE 5.x Win
|
620
|
620
|
290
|
|
IE 4.x Win
|
620
|
620
|
317
|
|
N 6.x Win
|
616
|
630
|
326
|
|
N 4.x Win
|
620
|
636
|
302
|
|
AOL 7 Win
|
620
|
620
|
324
|
|
IE 5.x Mac (OS X)1
|
588
|
603
|
316
|
|
IE 5.x Mac1
|
588
|
603
|
319
|
|
IE 4.5 Mac2
|
584
|
599
|
326
|
|
IE 4.0x Mac2
|
593
|
608
|
329
|
|
N 6.2 Mac (OS X)2
|
609
|
623
|
343
|
|
N 6.2 Mac2
|
603
|
617
|
344
|
|
N 6.0 Mac2
|
609
|
623
|
337
|
|
N 4.7x Mac
|
608
|
623
|
317
|
|
N 4.5x Mac
|
608
|
623
|
317
|
|
N 4.0x Mac
|
598
|
613
|
323
|
|
|
Safest
recommendation
|
584
|
599
|
290
|
|
|
5.0+ Win & Mac
|
588
|
603
|
290
|
|
|
Windows only
|
616
|
620
|
290
|
|
|
|
800x600 |
|
Browser
|
Width
(with scrollbar)
|
Width
(no scrollbar)
|
Height
|
|
|
IE 6.0 Win
|
780
|
780
|
413
|
|
IE 5.x Win
|
780
|
780
|
410
|
|
IE 4.x Win
|
780
|
780
|
437
|
|
N 6.x Win
|
776
|
790
|
446
|
|
N 4.x Win
|
780
|
796
|
422
|
|
AOL 7 Win
|
780
|
780
|
444
|
|
IE 5.x Mac (OS X)1
|
748
|
763
|
436
|
|
IE 5.x Mac1
|
748
|
763
|
439
|
|
IE 4.5 Mac2
|
744
|
759
|
446
|
|
IE 4.0x Mac2
|
753
|
768
|
449
|
|
N 6.2 Mac (OS X)2
|
769
|
783
|
463
|
|
N 6.2 Mac2
|
763
|
777
|
464
|
|
N 6.0 Mac2
|
769
|
783
|
457
|
|
N 4.7x Mac
|
768
|
783
|
437
|
|
N 4.5x Mac
|
768
|
783
|
437
|
|
N 4.0x Mac
|
758
|
773
|
443
|
|
|
Safest
recommendation
|
744
|
759
|
410
|
|
|
5.0+ Win & Mac
|
748
|
763
|
410
|
|
|
Windows only
|
776
|
780
|
410
|
|
|
|
1024x768 |
|
Browser |
Width
(with scrollbar) |
Width
(no scrollbar) |
Height |
|
|
IE 6.0 Win
|
1004
|
1004
|
581
|
|
IE 5.x Win
|
1004
|
1004
|
578
|
|
IE 4.x Win
|
1004
|
1004
|
605
|
|
N 6.x Win
|
1000
|
1014
|
614
|
|
N 4.x Win
|
1004
|
1020
|
590
|
|
AOL 7 Win
|
1004
|
1004
|
612
|
|
IE 5.x Mac (OS X)1
|
972
|
987
|
604
|
|
IE 5.x Mac1
|
972
|
987
|
607
|
|
IE 4.5 Mac2
|
968
|
983
|
614
|
|
IE 4.0x Mac2
|
977
|
992
|
617
|
|
N 6.2 Mac (OS X)2
|
993
|
1007
|
631
|
|
N 6.2 Mac2
|
987
|
1001
|
632
|
|
N 6.0 Mac2
|
993
|
1007
|
625
|
|
N 4.7x Mac
|
992
|
1007
|
605
|
|
N 4.5x Mac
|
992
|
1007
|
605
|
|
N 4.0x Mac
|
982
|
997
|
611
|
|
|
Safest
recommendation
|
968
|
983
|
578
|
|
|
5.0+ Win & Mac
|
972
|
987
|
578
|
|
|
Windows only
|
1000
|
1004
|
578
|
Measurements in pixels
It's not a pretty sight.
That's why you see a few possible recommendations for each resolution. Pick the one that's most appropriate to your site, or invent your own.
NOTES:
1 If you use CSS absolute positioning for page layout, subtract 15 pixels from the width measurements for these browsers. For some reason, a horizontal scrollbar appears "sooner" in IE 5.x Mac when using CSS positioning.
2 In most browsers, hitting the Maximize icon successfully maximizes the browser window. However, for these browsers, the Maximize icon maximizes the height but not the width of the window.
In summary, there are no easy answers about canvas size. But we hope that the recommendations above will give you a place to start.
|
|
