EchoEcho.Com
COMPLETE TUTORIALS

THIS PAGE HOME  TUTORIALS  DESIGN  ENVIRONMENT  SCREEN RESOLUTION         

EchoEcho.Com
TOOLS & RESOURCES
 HOME 
 
 TUTORIALS 
 
 RESOURCES 
 
 TOOLS 
 
 DOCUMENTATION 
 
 NEWS 
 
 SITEMAP 

 
  SEARCH THIS SITE

Tell a friend about this site
SUGGEST THIS SITE      

ON THIS PAGE


 RESOLUTIONS

 TOOLBARS

 CONCLUSIONS



 

Screen resolution

Webpages does not look the same on all screens.
The main reasons are that different screens can show different numbers of colors and details.

The details a screen can show is determined by the number of pixels (dots) on the screen. The more pixels the more details.

It is important to understand that the number of pixels is not related to the physical size of the screen.
Two 15" screens can have different screenresolutions.

Look at this example showing the same web-page viewed on the same monitor at two different screen-resolutions:


800x600 pixels

1600x1200 pixels


A full screen image may only take up half the space on another screen. This is because images on webpages have fixed size measured in pixels.

Therefore, if your screen is configured to have 800x600 pixels, an image with the same proportions will fill the entire screen.
On the contrary, if the screen is configured to have 1600x1200 pixels the same image will fill out only 1/4th of the screen (half the width and half the height).

This is what makes webdesign so different from paperdesign.

 


IN THIS SECTION



ENVIRONMENT

 SCREEN-RESOLUTION

 SCREEN COLORS

 GRAPHIC STANDARDS

 FONTS

 LOADING TIME

 OPERATING SYSTEMS


DESIGN TECHNIQUES

 TABLE CONTROL

 FRAMES CONTROL

 BROWSER CONTROL

 PRECISION DESIGN

 DYNAMIC DESIGN


LAYOUT

 VARIABLE DESIGN

 FIXED 640x480

 FIXED 800x600


STYLES

 NO-SCROLL DESIGN

 FLAT DESIGN

 DEPTH DESIGN

 TABLE DESIGN

 COOL DESIGN

 FUTURISTIC DESIGN



 
Resolutions
Most screens has a resolution of 800x600 pixels.

Many has screenresolutions of 640x480 or 1024x768 pixels.

Very few users have other screen-resolutions.

(Note: You can see the exact current screen-stats on our main page.)

If you compare the resolutions it looks like this:

640x480
800x600
1024x768


As you can see the proportions are the same.
The height is 3/4 of the width - no matter which resolution we're using.

In the above example you should notice that it shows how much content will fit on the screen. Not how the screen actually looks. As we allready mentioned above, screens set up to higher resolutions are not necessarily physically bigger than screens set up to low resolutions.

Now if we place the same red image on each screen it will look like this:

640x480
800x600
1024x768


The example shows that screens set up to high resolutions simply compresses the content more than screens set up to low resolutions.

The compression, however, happens without loss of details, since the high resolution simply has more pixels on the screen.

If you looked at the high resolution page through a magnifying glass you would see that even though the content is compressed it still has all the details from the low resolution page.

Another way to put it, is that an image viewed on a 30" monitor at a resolution of 1600x1200 pixel - looks exactly the same as if the image was seen on a 15" monitor set up to show 800x600 pixels.

Top of page



Toolbars
Whereas the width is pretty much the same no matter how the browser is set up, the height varies a lot.

Dependant on which menus, buttons etc. the user has activated the actual height, left for the homepage will vary.

On a windows 98 PC using MSIE 4.0 (version 4.72 to be precise) if only the menu-line is activated the web page gets full window size less 80 pixels.

On the contrary if all toolbars are activated the page gets full window size less 186 pixels.

Look at this example:

Only menu-bar activated:

640x480
800x600
1024x768



All toolbars and status-bar activated:

640x480
800x600
1024x768


As you can see the visual height of the web page is an elastic measurement.

On low resolution-screens the toolbars may use close to 40% of the entire screen. On high-resolution-screens they will at most use close to 20% of the screen. In either case - the number of pixels used by toolbars etc. is 186.

Therefore it is hard to make fixed design with respect to the visual height. The result simply varies - not only from users with diferent screen resolutions but also from users with the same resolutions but different browser-setups.

The main point in this, is the fact that customization of browsers affect the visual height of the web page - but not the visual width!

This means that the width of the screen only varies with the resolution, while the height also varies with the customization of the browser.

It is strongly recommended that none of the navigation tools are designed to be outside the visual area of the opening-screen - even in the worst case (640x480 with all toolboxes activated).

This means that the navigation structure of the page should be kept at the upper 300 pixels of the page. (Actually the upper 294 pixels to be very precise).

When designing pages you should therefore keep this division of the page in mind: Into upper 300 pixels and the rest!

In the samples below this division is shown using a slightly lighter dark color.

640x480
800x600
1024x768

Top of page



Conclusions
The main conclusions to draw from this page are:
  • Webpages are "printed" on "elastic paper".
  • Size of images and text varies dependant on screen-settings.
  • Positioning of images and text varies dependant on screen-settings.
  • The actual size of images and text depends on both screen-settings and physical monitor size.
  • The same web-page looks different dependant on the viewers monitor-size and screen-resolution.
  • Only the visual height varies with customization of browsers.
  • The visual width is less elastic than the visual height.
 





EchoEcho.Com
COMPLETE TUTORIALS
 HOME 
 
 TUTORIALS 
 
 RESOURCES 
 
 TOOLS 
 
 DOCUMENTATION 
 
 NEWS 
 
 SITEMAP 

EchoEcho.Com
TOOLS & RESOURCES


(c) Copyright 1998-1999 NetKontoret - All Rights Reserved        


Tell Your Friends About EchoEcho.Com!
Your name and e-mail-address will appear
as "sender" in the mail sent to your friends.

Your Own Name:
Your Own E-mail:

Friends E-mail 1:
Friends E-mail 2:
Friends E-mail 3:

Your Comment:


PRIVACY STATEMENT:
This Tool Sends Out One E-mail To Each Friend
The Information Will Not Be Used For Any Other Purpose.

Click Here!