Types of page layouts and differences between them

Website development starts from the question: what the website will look like on the screens of different resolution and, therefore, what layout types to be chosen: static, fluid or adaptive layout?

What is the difficulty of this question? We will help to find your bearings.

Let`s check the main coding types

Static layout, width 800px	Static layout, width 1024px	Static layout, width 1280px
Fluid layout	Adaptive layout, width 1280px	Adaptive layout, across the width

So, let’s consider the main layout types

Let`s start with the static layout

Static layout is good for the websites intended for the users, who will visit your website mostly from PC, as far as the resolution of all the screens is mostly equal and the static screen width of 1024px will be good-looking on the desktop PCs.

You will not see much difference, if you enter the website from the PC with the screen resolution of 1920 or 1024px, that is, the layout remains static, no matter on what device or screen you view the website.

Let’s see the samples of the static layout with the width of 1280px.

Adaptive layout

This design is intended for the specific screen resolution. It requires additional time for designing and programming.

Adaptive layout differs from the static one by the location of the elements on the page. The essence is the following: to place all the available blocks within visual range, adapting the whole page content to your screen accordingly (no matter if it is a telephone, tablet or laptop).

Fluid layout

Fluid layout is the layout for any screen resolution. It also requires additional time for designing and programming.

It is convenient if users are supposed to visit your website from different devices. It is even better even to say that your website will be good-looking on all screen sizes (from to).

Let’s see how the fluid layout will look like.

We hope this article will help you to obtain the high-quality and efficient website, which will serve you for long years.