Screen resolution

Considerations related to the different types of screen that visitors can have and the space available for each case.

The applications in charge of presenting web pages are browsers, among which Internet Explorer, Netscape Navigator and Opera should be highlighted due to their importance and diffusion.

The interface of a browser, in its standard mode, presents the user with one or more upper bars (for menus, addresses, etc.), a lower bar (the status bar) and a main space, the window, in which web pages are presented.

The shape of this window is always rectangular, but its size varies, depending on the monitor and graphics card. We can talk about two different screen sizes:

• absolute size: is the “actual” size of the monitor window, usually measured in inches. It depends on the monitor.
• Resolution or relative size : is determined by the number of pixels that are displayed in the monitor window, the pixel being the minimum unit of information that can be displayed on the screen, generally rectangular in shape. It depends on the graphics card.

Absolute size is usually expressed in diagonal inches (1 inch = 25.4 mm). The most common currently is 17” on desktop computers, although there are still quite a few old computers with 15” monitors and there are quite a few 21” monitors on the market. The absolute size of laptop monitors is typically 14-15”.

Regarding resolution, the most common values ​​are 800×600 and 1024×768 pixels, although there are still users who work below, at 640×480, and above, at resolutions of 1152×864 and 1280×960 pixels.

The absolute size and resolution must be in agreement for a correct visualization, being the following acceptable values:

• 14″ – 15″: Maximum appreciable resolution: 800×600
• 17″: Maximum appreciable resolution: 800×600 or 1024×768
• 21″: Starting at 1024 x 768

The possible work resolutions of a computer depend above all on the quality of the monitor and the computer’s graphics card, and are configured, in Windows operating systems, either by clicking the right mouse button on the desktop, selecting the Properties option and accessing the Settings tab, either from Start> Control Panel> Display.

The importance of screen resolution on the way web pages are displayed in the browser window is very important. The higher the resolution, the more information points are available to present the elements on the screen, but these points are smaller, so the interface elements (texts, images, form objects, etc.) appear smaller.

Page size and resolutions

If we design a page for a given resolution, occupying the entire browser window, those users who view it at lower resolutions will not have space on the screen to contain the entire page, so they will be forced to use the browser’s scroll bars. On the contrary, those users who view it at higher resolutions will have too much space on the screen for so little page, so they will have a lot of empty space, without content.

To solve these differences, it is normal for web pages to be designed for a base resolution, generally the most used currently (800×600), and built internally using tables or layers of relative sizes, with widths defined in %, with which This means that when they are viewed on higher resolution monitors they “open up”, occupying all the available screen space.

The drawbacks of this system are that it does not support users with lower resolutions and that, in the case of higher resolutions, the design of the page can be seriously affected by modifying its original dimensions.

Another possibility is to layout the entire page inside a parent container (a table or layer) and assign a center alignment to it, so that the page will be in the center of the screen if a resolution higher than the design one is used.