What Is Site Layout? Types And Layout Rules

What Is Site Layout?

Site layout is the transformation of a design layout into a working site using program code. As a rule, a layout is created using a graphical editor, and after layouts. During the layout process, the page code is created using the HTML and CSS languages, thanks to which browsers recognize the site and display it the way you need it.

Layout is one of the important stages of creating a site. This is a rather complicated process, which determines the quality of the site display in the browser, download speed, general view, and so on. Poor layout with the wrong code will put a large load on the resource, display elements incorrectly. As a result: zero attendance and the inevitable loss of customers.

It is logical that without special training it is impossible to become a good typesetter. Experienced layout designers have been studying codes for years to accurately achieve a good result.

Types of the site layout.

Tabular;

Block;

Adaptive.

The table layout was used at the dawn of site-building. It is based on the presentation of the website in the form of a tabular arrangement of graphic and text elements. This type of layout is used for standard sites and helps to detail it for any task.

Block layout allows you to place all the elements vertically from top to bottom in the order that it was written in HTML. Using this view, you can make elements floating, placing them in the sequence and display in which you want. This is a more universal type of layout, thanks to which you can create unique sites for a specific topic.

Adaptive layout over the past 2-3 years of site-building has gained tremendous popularity. With the advent of multifunctional mobile devices that allow the user to surf the Internet, there is a need to provide the convenience of the visitor to view resources using the gadget.

Adaptive layout “adjusts” the site page to the width and height of the screen of the mobile device, correctly displaying the site for reading and viewing graphic elements.

What program makes up the site?

Layout designers can use two types of typesetting programs: text and visual. It is believed that visual programs are a lot of beginners, as they greatly simplify the work. In fact, there are visual programs that become a complete professional tool (for example, Dreamweaver). In addition, such programs have a hybrid model: code is written in one part of the screen, and changes are immediately visually displayed in the other.

3 Main rules of the site layout.

There are more than 20 requirements that the layout needs to meet. We will consider 3 key ones that distinguish good layout from the bad.

So, the correct HTML-CSS layout should be:

Cross-browser

Semantic;

Valid.

Consider the requirements in more detail.

Cross-browser layout.

Cross-browser compatibility – the ability to equally display the site in all popular Internet browsers. It makes no sense to make up the site for all existing browsers in the world, but for the most popular (Mozilla, Opera, Google Chrome, Internet Explorer) – mandatory.

Sometimes it is impossible to achieve identity in browsers because of their specificity. In this case, you have to sacrifice any effects. For example, version 6 of the Internet Explorer does not recognize the CSS property “text-shadow”. This property has an exclusively decorative function. If you remove it, then the site will not suffer much. You can “maneuver” the functions. The main requirement is to maintain the basic functionality of the site and its readability.

Semantic layout.

The semantic layout assumes the maximum coincidence of the purpose of tags to the elements of the pages with which they are imposed. This means that a particular element must have its own tag. For example, the “address” tag is used for contacts, the pictures are laid out under the “image” tags, the headers are “H1”, “H2”, “H3” and so on.

Valid layout.

Validity is the alignment of CSS-HTML codes with W3C standards. You can verify it using a special validator site. The validator.w3.org site is used to verify the conformity of the HTML code, jigsaw.w3.org/css-validator is used for CSS.

Additional rules:

Readability in the absence of graphic content;

Clear code;

The optimal number of graphics and lines of code.

The pages made up taking into account these requirements will be equally well received by search robots and visitors, and the owner of a web resource can be sure about the correct technical component.

Finally. The layout of site design is as important as the design itself, so the work requires knowledge and preparation. If you are not ready to spend your time studying theory and practice, it is easier to order the creation of a site and get a fully-fledged working draft than to spend a lot of time and effort and be left with nothing.