|
Web
Page Sizes Tutorial
The size of the user's web browser window
is probably one of the biggest headaches when it comes to web
page design.
The trouble is not everyone has the same size monitor running at
the same resolution. To make things worse different browsers
have different viewable screen areas.
It is much easier viewing a web page that is designed for a
smaller screen than one that is designed for a larger screen
where you may have to do allot of scrolling left and right to
read what is on the page.
Thankfully, the minimum resolution most people use these days is
800 x 600 pixels and either use Internet Explorer or Netscape
web browsers. In this case the minimum live space you can work
with is 783 x 398 pixels. You can view a full list of 'Live
Space' sizes at the bottom of this page.
By designing the web page for a live space of 783 x 398 pixels
you a guaranteed that the web page is going too easily viewed by
the majority of web users.
In fact this web site is designed for this amount of live space,
but when the page is viewed on a higher resolution monitor with
more live space the page automatically resizes to fit the
browser window.
The resize feature of web browsers is something that works for
this site, but you may find that it completely ruins your much
worked on page design. However, this can be overcome by laying
out your web page using tables with fixed pixel width so your
web page will have the same layout whatever screen resolution
the user is using.
The length of your web pages is also important. It is best to
try to keep pages under 3 page lengths long and if necessary
split the page into 2 or more pages.
|
Live Space in Browser Windows
|
|
Live area in Internet Explorer 4 on Windows
|
Monitor Resolution |
Minimum Live Space |
Maximum Live Space |
|
640 x
480 |
623 x
278 |
635 x
380 |
|
800 x 600 |
783 x 398 |
795 x 500 |
|
1024 x 768 |
1007 x 566 |
1019 x 668 |
|
1152 x 870 |
1135 x 668 |
1147 x 770 |
|
|
|
Live area in
Netscape 4 on Windows
|
Monitor Resolution |
Minimum Live Space |
Maximum Live Space |
|
640 x
480 |
623 x
278 |
635 x
380 |
|
800 x
600 |
783 x 430 |
795 x 500 |
|
1024 x 768 |
1007 x 598 |
1019 x 668 |
|
1152 x 870 |
1135 x 700 |
1147 x 770 |
|
|
|
Live area in
Internet Explorer 4 on Macintosh
|
Monitor Resolution |
Minimum Live Space |
Maximum Live Space |
|
640 x
480 |
612 x
315 |
627 x
431 |
|
832 x 624 |
804 x 459 |
819 x 575 |
|
1024 x 768 |
996 x 603 |
1011 x 719 |
|
1152 x 870 |
1124 x 705 |
1139 x 821 |
|
|
|
Live area in
Netscape 4 on Macintosh
|
Monitor Resolution |
Minimum Live Space |
Maximum Live Space |
|
640 x
480 |
612 x
313 |
627 x
402 |
|
832 x 624 |
794 x 457 |
809 x 546 |
|
1024 x 768 |
986 x 601 |
1001 x 601 |
|
1152 x 870 |
1114 x 703 |
1129 x 792 |
|
|
|
|