Современная верстка должна быть:
- Блочной, а не табличной.
- Кроссбраузерной, т.е. сайт должен одинаково отображаться в разных браузерах (Google Chrome, Яндекс.Браузер, Opera, Mozilla, Internet Explorer, Safari и других).
Адаптивной, т.е. дизайн сайта должен адаптироваться под экран пользователя и выглядеть приемлемо на больших и маленьких экранах.
На входе вы отдаете верстальщику PSD-макеты, полученные от дизайнера. На выходе получаете файл с версткой и CSS-файлы со стилями. Некоторые верстальщики могут интегрировать верстку в систему управления сайтом (CMS). Иногда это входит в услугу, иногда делается за доплату. Стоит уточнить у специалиста до начала работы, будет он интегрировать макет в CMS или нет, и сколько стоит данная услуга.
Стоимость верстки сайта напрямую зависит от объема работы и сложности проекта. Прежде, чем мы перейдем к вопросу, сколько стоит верстка, давайте разберемся – на что она влияет и каким требованиям должна соответствовать?
На что влияет верстка и почему она важна?
Вот несколько параметров, которые зависят от качества верстки на сайте или в интернет-магазине:
- Скорость загрузки сайта и время, через которое браузер начинает отрисовывать страницы на экране пользователя. Чем лучше написан код, тем быстрее будет появляться контент. Это положительно влияет на SEO и конверсию, т.к. меньше пользователей будут уходить в ожидании загрузки сайта.
- Корректность отображения сайта. Если верстка сделана с ошибками, в некоторых браузерах дизайн может искажаться вплоть до того, что сайтом будет невозможно пользоваться.
- Простота поддержки. Качественный и структурированный код с комментариями проще понять другим разработчикам. Если вы привлечете к поддержке других специалистов, они быстрее смогут вносить изменения в верстку и возьмут за это меньше денег.
Корректность работы сайта. Бывают случаи, когда из-за некачественной верстки ряд элементов вообще не работают или ими невозможно пользоваться. Например, мне встречался сайт, у которого при определенном разрешении экрана у важной формы исчезала кнопка отправки данных, на нее находил другой элемент. В результате клиенты не могли пользоваться функцией.
Какой должна быть качественная верстка?
- Соответствовать PSD-макету. Внешний вид меню, форм, кнопок и других элементов, размеры шрифтов, отступы и т.д. должны быть такими же, как в макете или очень близки к нему. Например, если в макете у кнопки закругленные края, на сайте они должны быть тоже закругленными.
- Код должен быть компактным и хорошо структурированным. В нем должны быть комментарии, которые помогут другим разработчикам разобраться в верстке и вносить в нее изменения.
- Таблицы стилей должны выноситься в отдельные CSS-файлы.
- Блочной, адаптивной и кроссбраузерной (одинаково отображаться в разных браузерах).
- Название стилей должно быть логичным и продуманным.
- Все элементы, которые можно сверстать текстом, должны быть сверстаны текстом, а не картинками.
Учитывать требования со стороны SEO. Часть этих требований можно найти в статье про технический аудит. Например, нельзя оформлять элементы в шаблоне страницы тегами H1…H7. Они должны использоваться только для разметки заголовков и подзаголовков в основном контенте страницы.
Дополнительная вкладка, для размещения информации об услугах, доставке или любого другого важного контента. Поможет вам ответить на интересующие покупателя вопросы и развеять его сомнения в покупке. Используйте её по своему усмотрению.
Вы можете убрать её или вернуть обратно, изменив одну галочку в настройках компонента. Очень удобно.
