Site layout and its types

September 14, 2020
5 Min Read
Read the article

In 2020, there are about 1.74 billion registered websites in the world. Just imagine the number. They all exist through the layout. What is the layout of the site and which layout meets the requirements of the modern world, read on.

Layout. What is this?

Short? This is the creation of web pages. More details? You explain to the browser that is depicted in the layout provided by the designer. Do not describe what you see in words or show gestures and language understood by browsers. This is writing code understandable to a web browser. Explain to the browser that it should display a 200×200 image, a blue title, and when hovering the cursor over the contacts – a dialog box will appear, you can use:

  • HTML
  • CSS
  • JavaScript


The layout begins with HTML. This is a hypertext markup language consisting of tags that you can use to add:

  • structured text, which contains: headings, citations, lists, tables,
  • interactive objects,
  • hyperlinks,
  • video, pictures, sound.

A tag is a symbol that identifies a feature of the text. Thanks to the tags, the browser is given a command on how to reproduce a certain piece of information.

Hypertext markup not only fills a website but also gives it meaning. This is called – semantic layout. Using tags you explain to the browser where in the text is the title (h1, h2 … h6), where is the quote (<blockquote>), and where is the list (<ul>, <ol>). So it understands what is being said and during queries in the search engine, will give the user the information he was looking for.

CSS – site tuning

Imagine that all people are the same. Hair color, nose shape, eye incision. Doesn’t that sound boring? With sites the same story. CSS makes it possible to create websites that are visually appealing and different from others. Another feature is the adaptation of the site to different screen extensions.


Your site is an actor, and the code is written in JavaScript – a script that he must read and play a role accordingly. You specify when and how the elements of the web resource will be displayed on the screen. This is the interaction, the type of “behavior” of the site with the user. JS is used in frontend development (creating a user-friendly interaction with the site), but if the project is small, layout designers also use JavaScript.

Types of site layout

According to the implementation process:

1. Tabular layout

This type of layout is actively used to create e-mails. The fact is that this approach guarantees the same image of the letter in all postcards and devices. There will be no displacement, distortion of content. The main table is created, which is divided into cells, where other tables are placed. In short, tables in tables. Tautology, but that’s the whole point of this type of web page creation. And if for designing complex tasks it is a relic, then for e-mails it is the best option.

2. Block

Here everything is simple. All parts of the page are divided into blocks (header, sidebar, footer), their basis – content. With this layout, the code is compact and well-indexed (search engines understand what the resource is full of).

By display type:

1. Adaptive

Chameleon in the Internet space. About 50% of web traffic comes from mobile devices, the other 50% are computer users. What do you prefer? It is wise to find the optimal solution. This solution is adaptive layout. This means that the site adapts perfectly to different screen sizes on devices. Guess the riddle: “In winter and summer, on a tablet and an iPhone, it looks cool?”. Right. Adaptive site.

2. Rubber layout

The site, like chewing gum, can be stretched if necessary. But too much is not great.

Image quality may deteriorate, text may become unreadable, and the user may be disappointed. Strive for the ideal!

3. Fixed

Only this way. Not otherwise. The width of the page and its parts are unchanged. In the environment of a large number of gadgets with different screens, this layout is outdated and has not been used for a long time.

You are a perfectionist, not yet perfect, so not ready?

Then know that the layout has:

  • Provide fast page loading. It is vital that the user gets to the site and does not leave it prematurely. As you know, most people are willing to wait for the download for less than 3 seconds. This factor is also taken into account by search engines when ranking.
  • Be cross-browser. The site is displayed identically in all popular browsers.
  • Be valid. W3C compliant (the organization that oversees the web development process) and error-free.
  • Be semantic. All parts have their place, purpose and logic.

What do you need to know about the website layout?

1. HTML and CSS

This will be enough for a simple site. But be prepared for high competition and a relatively low salary. If you are ambitious and want to maximize your potential, then your path to frontend developers (programmers working with the user interface). This will require language

JavaScript programming.

2. English language

You can work as a web developer without knowledge of English, but it’s harder.

Firstly. Programming languages ​​are often written in English and you have to memorize all the meanings. This affects both quality and speed.

Second. Frequent customers are foreign users. An intermediary will be needed.

Third. Help in case of difficulties is easier to find in English.

3. Understand the programs for the layout of sites.

They can be divided into:

• those that are used work with the layout. This is often Photoshop. Also actively used

Figma, InVision – these programs are online and they are very popular.

• those are used to write code: Sublime Text, VS Code, Atom, etc. It is best to test a few and choose the best option for yourself. So you can adjust the process to your needs and write code faster.

Thus, the layout is the stage of creating a site, wherewith the help of hypertext markup (HTML) and cascading style sheets (CSS) elements of web pages are placed and parameters are set for its reproduction in the browser. The result should match the layout, load quickly, look good in everyone’s browsers and screen sizes. Layout designers who want to have satisfied customers and a steady job should create sites that meet these requirements.