Types of site layout: from A to Z

One of the most important stages in the site creation is layout — the configuring of the page’s elements. During the layout process, an expert creates the web site prototype to give it its completed look. And this frame forms the basis of further work — including filling pages with the content and starting the site’s operation. So, what are the types of site layout? And what are their differences from each other? Let’s look at the different factors.

Types of site layout

Table

This layout option is based on the HTML tables creation, allowing you to divide the page structure into separate elements — columns and cells — in which site components will be placed. Each cell during layout making can become a "cap" or "cellar", a section of the menu or an area for content placement.

A table layout looks like a grid with the components placed in it — each one is in a separate cell. That means that the first thing to do is create the general base or framework. This is divided into columns, which are in turn are divided into cells. To identify the elements of table layout, css is applied creating tables of styles, identifiers, and defining the final appearance of each page element.

Table layout has a lot of advantages: it is simple, convenient for adaptation to different browsers, and easily transformed to "rubber" meaning it adapts to different screen widths thanks to the tables auto formatting.

But there are also shortcomings: it has a rather large code, which makes each page and site heavier, some design options are complex to implement, and pages load slowly.

Block (layer layout)

Block layout provides layer-by-layer placement of page elements. Each new block overlaps the previous one, eventually joining together in one page but with the ability to replace or exchange any element on it.

For block layout a main unit is created in which it is possible to place smaller units, which themselves can contain other units. For block configuration, apply the rules of css styles. They allow you to define not only the appearance, but also the placement of each unit.

The obvious advantages of using block layout are the code’s compactness and the light weight of separate documents (pages of the site). Such web sites are convenient for search engines indexing, and they always load pages quickly.

But there are also difficulties. In particular, layout is very complicated with a block system. There are also problems with adapting block layout to different browsers, and for the site to display on screens with different resolutions you need to make separate configurations in css.

Fixed (static)

This layout type provides the possibility of assigning a fixed size to each element. In this case, if the screen resolution is lower, the user will be able to scroll the page, and if the screen resolution is higher, they will be displayed only at the standard (assigned) page width. After that, the user will be able to increase the width by enlarging the picture in the browser window.

Cross browser

This layout option provides the application of css styles and haki to allow the site to display uniformly in all types of browsers. To check implementation of cross-browser imposition, it is a good idea to carry out field testing — load and open the page in all available versions of popular browsers. The site should be equally well adapted to interact with the majority of popular browsers — from Opera and Safari to IE, Chrome and FireFox.

Rubber (elastic)

The layout style allowing the page width to fit the screen resolution of the device on which the site is viewed is called “rubber".

To implement this you should use the following:

• the table layout;
• specifying the size of elements by percent;
• using two layout types at once — for example, rubber for content and fixed for sidebar.

Responsive (adaptive)

In the case of responsive web design the web page is displayed well on all devices connected to the internet independent of size; for example, computer displays, mobile phones, tablets, laptops and TVs. To make a site look good on all these devices, set the particular CSS styles configurations. With every passing day, more and more adaptive sites appear, and adaptive layout itself becomes very desirable, as the number of users of different devices is growing quickly. Our Website Support Service Drudesk meet all customer's needs and can easily help you with layout for your webpage.

Finally, we note that the choice of layout depends on a site’s purpose, so it doesn’t matter which one you use. The main thing is to make sure that it is appropriate and meets all your standards. In the following articles we will take a closer look at each option.