Site layout – what  is it  and what types exist?

During the creation of a web resource of any size and complexity the site layout is one of the main stages that defines the appearance of each page. The process is quite difficult, involving the engagement of an individual professional who knows specific features of work with the HTML code.

What is the site layout?

The term itself is borrowed from the field of printing industry, where it is necessary to indicate the headlines order, columns and images so that to ensure maximum orderliness and visual appeal of information by the reader.

The comparison allows the uninformed user to understand faster what the site layout is. This process involves the placement of the page elements (text, headlines, pictures, blocks, banners, etc.) in accordance with the pre-designed look, the creation of a clear, but flexible structure that can properly adapt to various types of browsers, the size of gadget screens.

At this stage, the development of the site involves the engagement of the front-end specialists. This process is not responsible for the formation of the functionality, but for the content displaying on the page and the visual appeal of information by the user.

What is the layout consisted of?

The base element here is the HTML markup language, i.e. a layout is a writing of its codes competently which are called tags on the page. They are responsible for the placement of the elements, their structure, orderliness, size and text font, headlines. CSS code is an optional tool that is responsible for the display styles, visual content component. Apart from the mastering HTML and CSS languages perfectly ​​and writing codes layout designer’s function is:

• to work with graphic content, its sorting by folders;
• to connect JavaScript libraries;
• initial or periodical testing of the correctness of displaying the pages contents.

Main types of site layout

Tables

This is a basic type of markup, which was the first to be applied in web design. It implies the formation of tables to display the elements properly. The key tag here is <table>, which defines the table parameters and the <td>, <tr> tags correspond to display content columns. This option may be suitable for creating simple pages, but it is less and less practical.

Many experts claim that the table layout is outdated and such placement of content is not convenient enough because a lot of boxes or columns stay empty. At the same time, the weight of the page increases due to the overloaded code.

Block

It is a more modern and widespread option that does not involve the tables. The basic element here is the <div> tag, which determines the size, location, other parameters of each block: a headline, a logo, banners, pictures, etc. Such a markup is much less “weights”, more understandable and attractive for search engines.

It is important to note that such a block layout of the site is impossible without the use of CSS codes that define the background, color, content display style.

Adaptive

The most advanced way to place the contents of the web resource. Its key advantage is the ability to adapt not only to the features of the browser’s display, but also to various sizes of PC screens, smartphones, tablets and other gadgets. This is the most convenient way for users.

Trying to understand what an adaptive layout of the site is, it is important to note that each element does not have a clearly defined, fixed position, and is floating, which allows you to adapt to any configurations.

Semantic

It is based in the same way as in other types of html tags, however their location is determined not by the design of the original layout, but the contents of the page. Its hierarchy is formed depending on the importance and the purpose of the provided information. Thus, the first place is not the appearance, but logic and semantic content.

Experts note that such a web site layout makes navigation easy and improves usability for the user as well as simplifies the process of understanding for search engines, which will inevitably have a positive effect on ranking.

Layout designer’s tool

The specialist in this area mainly works with the code, since in the design of a really high-quality product, the web studio clearly divides the responsibilities between professionals of narrow specialization. However, sometimes the layout designer has to work with graphic content, adapting it to the needs of the web resource. During the layout of web pages, the following groups of tools are used:

• Code editors. Webstorm, SublimeText, NotePad ++, VS Code, PHP Storm and the others;
• Graphic editors. First of all Adobe Photoshop, Illustrator, Figma
• Program testers. CSS Validator, IETester, CrossBrowSerTesting, Dr Watson, etc.

Difficulty in the layout designer’s work

Among the most common can be identified:

1. Differences in display standards in various browsers. During the work, it is necessary to check how the page in Google Chrome or Mozilla Firefox looks like.
2. Designer’s professionalism. The specialist must clearly understand what a layout of the site pages is, how it works and what are its possibilities, not to offer to the layout designer unrealizable ideas.
3. Problems with using non-standard solutions. Some fonts or animation types may not be perceived by certain models of gadgets.

Signs of layout correctness

• Pure code. It assumes that the structure is specified in HTML, and the styles and functionality are put into separate classes;
• Compliance with the size of the initial layout;
• H1…H6 headlines are applied;
• The principle of cross-browser is complied. The high-quality layout of the site suggests that this placement of content is displayed equally in all types of browsers;
• Limited image number. Maximum amount of information must be transmitted by text or code.

 

Check the result

Testing is carried out for a number of criteria:

1. Compliance with a layout. Deviation in the number of pixels for text should not exceed 5 units. It is desirable to follow the specified dimensions between the blocks.
2. Adaptability. The website should be displayed identically correct on devices with different resolutions and screen parameters.
3. Cross browser. The same is applied to the different types of browsers.
4. Code validation. To make sure that the HTML layout is competent, it is needed to check it on special services.
5. Download speed. Specialized applications are also used for its measure.
6. The correctness of the operation of interactive elements and links.

If all the criteria correspond to the norm, it can be considered that the layout of resource web pages has been successfully done.