Although the ancestor of web page layout is print layout, there is one important difference between the two. Any printing such as a booklet, leaflet or brochure is printed on sheets of a fixed size and within the same print run has only minor or even imperceptible differences. A web page is launched on a computer running a client program called a browser. It is clear that the operating system, its settings and the browser itself differ from computer to computer. From what follows the banal conclusion that the same site document is displayed differently for each user.

This begs the question, is it possible to make the web page display the same? Considering how many different controversial factors will have to be taken into account, it should be said that no, it is impossible. Therefore, the task of web page layout is formulated as follows: to form a document that would be displayed correctly with slight differences on the main platforms and browsers. Correctly means that the original intention of the author has been followed, the required design of the document has been implemented, and it is displayed in the browser without errors.

To accomplish this task, you need to understand how the layout of web pages generally occurs and measure your ideas with their implementation. Some of the features that are of great importance in the layout of site documents are described below.

Document width

Initially, the site developer does not know the width of the user’s browser window, since it can vary over the widest range. The width depends on the resolution of the monitor, the length of its diagonal, the size of the window and some other variable data. In other words, it is not possible to predict it in advance by simple means. Taking into account this feature, two methods of layout have been established: fixed and “rubber”.

Fixed layout

In this case, we act from the opposite and set the total width of the layout to a hard-coded one and equal to a certain value. If we take some generalized statistics of website visitors and see what monitor resolution they mainly use, we find out that it is 1024×768 pixels. If we take 1000 pixels as a reference, then the total width of the layout minus the vertical scroll bar and the browser border will be 800×990 pixels. We focus on this size and set the width of the layout, for example, 900 pixels.

The advantage of this scheme is as follows. Since the total width of the layout is known exactly, then we can easily adjust the design to it and make images of the already known width. In general, such a layout is close to the layout of a printed booklet, and in both cases the width of the information carrier is strictly specified, due to which the layout is at least partially, but simplified.

There is actually one drawback that this type of layout is incriminated – insufficient efficient use of free space. Indeed, for a monitor with a large diagonal or high screen resolution, the document will look different than at the estimated 800 pixels. In fig. 1 shows what the layout looks like in this case.

A wide empty bar appears on the right, the size of which depends on the user’s screen resolution and the diagonal of his monitor. In order to somehow reduce the white space, the layout is usually placed in the center of the browser window (Figure 2).

“Rubber” layout

This type of layout is based on the fact that percent is one of the units of measurement. The total working width of the browser window is 100%, and the total columns of the layout should not exceed it, therefore, for convenience, as a rule, percentage notation is used everywhere. When the window is resized, the page data is reformatted to fit into the new width

This type of layout is gaining more and more popularity and almost all well-known sites have chosen it due to the fact that the entire area of ​​the web page is effectively used. But we should immediately note some of the features and disadvantages inherent in the “fluid” layout.

Although the web page adjusts to the width of the browser window, when a certain value is reached, it becomes inconvenient to read the text – the lines are too long and the eyes get tired of running over them. However, the browser can be minimized to a window, choosing a comfortable size.
Layout of a “fluid” layout is more difficult than a similar one, but with a fixed width. This is due to the fact that you have to take into account many additional factors and know some layout techniques. Besides, popular browsers interpret some parameters ambiguously and in them the “fluid” layout can be displayed in different ways.

Leave a Reply

Your email address will not be published. Required fields are marked *