Layout is a complex and creative process, because it is the work of the maker depends on the smooth operation of the site on various devices, the speed of its loading and perception of the information posted.
All works can be divided into two main stages:
1. Creation of logical markup. At this stage, HTML-code is written, which will contain elements for the future layout.
2. Presentational markup. Within the framework of this stage all elements are made out according to the developed by the designer of a breadboard model of a site and separate page.
Types of layout
They distinguish between "rubber" and "hard" layout. "Hard" or "fixed" layout is now almost unclaimed, as all elements of the web page, regardless of the size of the monitor and its resolution always retain the specified size. Accordingly, this layout is not adapted to mobile devices.
The use of "rubber" or variable layout allows you to automatically resize all the elements of the page and adjust to the diagonal and resolution of the screens.
Site layout process
Each specialist determines for himself the procedure of creating a website, but the following sequence of actions is considered to be a classic one:
- All the pictures, buttons and icons are prepared and then folded into a separate folder.
- The fonts are defined and then reflected in CSS.
- Files index.html and styles.css (maybe another name) are created, where the first file is the future page and the second is the file where styles are stored.
- The layout starts with the header of the site, where the basic elements are written, the encoding, the location of the file with styles, etc.
- The description of the page is made from the upper left corner of the design layout, after which you must move down the diagonally.
- Initially, the structure of the page is laid out in HTML, and then in CSS are taken out identifiers and classes (this process can be carried out simultaneously with the layout).
After creation of HTML-markup the styling of elements is made. To do this, each element is first set the general rules (the background block, indents), and then specified the specific properties.
What is a quality layout?
Simply to transfer design of a breadboard model in a code yet is not enough that a breadboard layout could be considered qualitative.
To do this, it must meet a number of requirements:
- To have a block view, that is, the layout is carried out with the use of blocks of <div>.
- To be cross-browser, which implies correct opening in different browsers and on all types of mobile devices.
- Do not contain errors in the code.
- The code should be as short as possible, and all styles should be in a separate file.
- Be text-based because search engines like text content. This means that if an element or a block can be typed in text, it cannot be typed in a picture.
- For a picture tag (<img>) the height and width are specified.
- All JS-files are reduced to one if possible.
- Navigation is done by lists, as search engines understand them much faster.
- Competent arrangement of H1-H6 headers.
Straut & Skobelev digital studio services
When creating websites, we pay special attention to the layout of web pages in Minsk and do not make any mistakes. We know that the speed, quality, ease of further promotion of sites, as well as the performance of the resource on various devices depend on pure and competent layout.
You can order the layout of the site in Minsk in our Digital Agency. The experience of our designers allows you to create a beautiful and clear code, which is pleasant to work with and which provides a high speed of opening the web resource and all its pages.