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

Static layout, width 800px Static layout, width 1024px Static layout, width 1280px

Fluid layout

Adaptive layout, width 1280px

Adaptive layout, across the width

резиновая верстка Адаптивная верстка, ширина 1280px Адаптивная верстка, по ширине

So, let’s consider the main layout types

Let`s start with the static layout

примеры статической верстки шириной 1280 px

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.