In 2020, there were about 1.74 billion registered websites in the world; today the number is close to two billion. Just imagine the number. They all exist thanks to layout. What website layout is and which layout meets the requirements of the modern world — read on.
What is website layout?
In short? Website layout is the creation of web pages. In more detail? You explain to the browser what is depicted in the mockup provided by the designer. You don’t describe what you see in words or show it with gestures — you explain it in a language that browsers understand. This is writing code understandable to a web browser. To explain to the browser that it should display a 200×200 image, a blue heading, and show a dialog box when the cursor hovers over the contacts, you can use:
- HTML
- CSS
- JavaScript
HTML
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, quotes, 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 the heading is (h1, h2…h6), where the quote is (<blockquote>), and where the list is (<ul>, <ol>). So it understands what is being said, and during queries in the search engine it will give the user the information they were looking for.
CSS — site tuning
Imagine that all people are the same. Hair color, nose shape, eye shape. Doesn’t that sound boring? It’s the same story with sites. 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 resolutions.
JavaScript
Your site is an actor, and the code written in JavaScript is a script that it 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 website 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 appearance of the letter in all email clients 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), and their basis is content. Today the blocks are arranged with the CSS technologies flexbox and grid — float-based layout is no longer used for this. With this layout, the code is compact and well-indexed (search engines understand what the resource is full of).
By display type:
1. Responsive
Chameleon in the Internet space. Over 60% of web traffic now comes from mobile devices, the rest are computer users. What do you prefer? It is wise to find the optimal solution. This solution is a responsive 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. A responsive site.
2. Fluid (liquid) 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 must:
- 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 less than 3 seconds for a page to load. 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 is frontend development (programmers working with the user interface). This will require the JavaScript programming language.
2. English language
You can work as a web developer without knowledge of English, but it’s harder.
First. 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 used to work with mockups. Most often it is Figma — it works online and is very popular. Photoshop and Sketch are also used.
- those used to write code: Sublime Text, VS Code, 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 where, with the help of hypertext markup (HTML) and cascading style sheets (CSS), the elements of web pages are placed and the parameters of their reproduction in the browser are set. The result should match the mockup, load quickly, look good in all browsers and screen sizes. Layout designers who want to have satisfied customers and a steady job should create sites that meet these requirements. These are the same requirements we follow in our website development services — from the designer’s mockup to the final layout.