Верстка сайта

Что такое верстка сайта и в чем суть данной услуги?

Верстка – это процесс создания HTML-разметки страниц сайта на основе PSD-макета дизайнера.

Верстальщик создает код, по которому браузеры понимают, как должна выглядеть страница на экране пользователя, где выводить шапку, меню, текст, формы и другие элементы и как они должны выглядеть.

Современная верстка должна быть:

1. - Блочной, а не табличной.
2. - Кроссбраузерной, т.е. сайт должен одинаково отображаться в разных браузерах (Google Chrome, Яндекс.Браузер, Opera, Mozilla, Internet Explorer, Safari и других).

3. - Адаптивной, т.е. дизайн сайта должен адаптироваться под экран пользователя и выглядеть приемлемо на больших и маленьких экранах.

На входе вы отдаете верстальщику PSD-макеты, полученные от дизайнера. На выходе получаете файл с версткой и CSS-файлы со стилями. Некоторые верстальщики могут интегрировать верстку в систему управления сайтом (CMS). Иногда это входит в услугу, иногда делается за доплату. Стоит уточнить у специалиста до начала работы, будет он интегрировать макет в CMS или нет, и сколько стоит данная услуга.

Стоимость верстки сайта напрямую зависит от объема работы и сложности проекта.

На что влияет верстка и почему она важна?

Вот несколько параметров, которые зависят от качества верстки на сайте или в интернет-магазине:

1. - Скорость загрузки сайта и время, через которое браузер начинает отрисовывать страницы на экране пользователя. Чем лучше написан код, тем быстрее будет появляться контент. Это положительно влияет на SEO и конверсию, т.к. меньше пользователей будут уходить в ожидании загрузки сайта.
2. - Корректность отображения сайта. Если верстка сделана с ошибками, в некоторых браузерах дизайн может искажаться вплоть до того, что сайтом будет невозможно пользоваться.
3. - Простота поддержки. Качественный и структурированный код с комментариями проще понять другим разработчикам. Если вы привлечете к поддержке других специалистов, они быстрее смогут вносить изменения в верстку и возьмут за это меньше денег.

4. - Корректность работы сайта. Бывают случаи, когда из-за некачественной верстки ряд элементов вообще не работают или ими невозможно пользоваться. Например, мне встречался сайт, у которого при определенном разрешении экрана у важной формы исчезала кнопка отправки данных, на нее находил другой элемент. В результате клиенты не могли пользоваться функцией.

Какой должна быть качественная верстка?

1. - Соответствовать PSD-макету. Внешний вид меню, форм, кнопок и других элементов, размеры шрифтов, отступы и т.д. должны быть такими же, как в макете или очень близки к нему. Например, если в макете у кнопки закругленные края, на сайте они должны быть тоже закругленными.
2. - Код должен быть компактным и хорошо структурированным. В нем должны быть комментарии, которые помогут другим разработчикам разобраться в верстке и вносить в нее изменения.
3. - Таблицы стилей должны выноситься в отдельные CSS-файлы.
4. - Блочной, адаптивной и кроссбраузерной (одинаково отображаться в разных браузерах).
5. - Название стилей должно быть логичным и продуманным.
6. - Все элементы, которые можно сверстать текстом, должны быть сверстаны текстом, а не картинками.

7. - Учитывать требования со стороны SEO.  Например, нельзя оформлять элементы в шаблоне страницы тегами H1…H7. Они должны использоваться только для разметки заголовков и подзаголовков в основном контенте страницы.