Procedure for finished design

Modern layout should be:

1. Block, not tabular.
2. Cross-browser, i.e. the site should be displayed equally in different browsers (Google Chrome, Yandex.Browser, Opera, Mozilla, Internet Explorer, Safari and others).

3. Adaptive, i.e. the site design should adapt to the user's screen and look acceptable on large and small screens.

At the entrance, you give the layout designer the PSD layouts received from the designer. At the output you get a layout file and CSS files with styles. Some layout designers can integrate the layout into the site management system (CMS). Sometimes it is included in the service, sometimes it is done for an additional fee. It is worth checking with a specialist before starting work, whether he will integrate the layout into the CMS or not, and how much this service costs.

The cost of site layout directly depends on the amount of work and complexity of the project. Before we get to the question of how much the layout costs, let's figure out what it affects and what requirements it should meet?

What does the layout affect and why is it important?

Here are a few parameters that depend on the quality of the layout on the website or in the online store:

1. The site loading speed and the time after which the browser starts rendering pages on the user's screen. The better the code is written, the faster the content will appear. This has a positive effect on SEO and conversion, because fewer users will leave while waiting for the site to load.
2. The correctness of the site display. If the layout is made with errors, in some browsers the design may be distorted to the point that the site will be impossible to use.
3. Ease of support. High-quality and structured code with comments is easier for other developers to understand. If you involve other specialists in support, they can make changes to the layout faster and will charge less money for it.

4. Корректность работы сайта. Бывают случаи, когда из-за некачественной верстки ряд элементов they don't work at all or they can't be used. For example, I met a site where, at a certain screen resolution, the button for sending data disappeared from an important form, another element was found on it. As a result, customers could not use the function.

What should be a high-quality layout?

1. Match the PSD layout. The appearance of menus, forms, buttons and other elements, font sizes, margins, etc. should be the same as in the layout or very close to it. For example, if the button has rounded edges in the layout, they should also be rounded on the site.
2. The code should be compact and well structured. It should contain comments that will help other developers understand the layout and make changes to it.
3. Style sheets should be rendered in separate CSS files.
4. Block, adaptive and cross-browser (displayed the same way in different browsers).
5. The name of the styles should be logical and thoughtful.
6. All elements that can be matched with text should be matched with text, not pictures.

7. Take into account the requirements from the SEO side. Part of these requirements can be found in the article about technical audit. For example, it is impossible to design elements in the page template with H1...H7 tags. They should only be used to mark up headings and subheadings in the main content of the page.