Перевод утверждённого дизайна в формат, понятный системе управления сайтом и браузерам.
Поскольку дизайн сайта утверждается по статическим картинкам, требуется его перевод в вид, понятный браузеру.
Процесс создания HTML-файла по утвержденному дизайну и есть вёрстка. Сюда входит разметка страницы, настройка стилей, подготовка графических элементов дизайна для интеграции их в шаблон и т. д.
Вёрстка сайта — очень ответственный процесс, качество которго влияет не только на скорость загрузки страниц, но и на поисковые показатели сайта. Опытный верстальщик должен не просто владеть HTML и CSS, но и иметь представление о поисковой оптимизации кода, поскольку небрежная верстка, неправильная семантика и степени вложенности элементов, невалидный код плохо воспринимаются поисковыми роботами, что, в свою очередь ведёт к ухудшению представления сайта в результатах поиска.
Различают три типа верстки:
Фиксированная — верстка сайта, когда его ширина всегда одинакова вне зависимости от экрана посетителя. Обычно используется ширина 980px, которая адаптирована к планшетам и мониторам, от 1024px.
«Резиновая» — верстка, не имеющая постоянной ширины. Адаптируется к ширине экрана посетителя и как правило задается в процентах.
Адаптивная — в соответствии с названием, адаптируется к экрану, однако не только в части ширины, но и его ориентации (вертикаль/горизонталь) и даже подстраивается под конкретный тип устройства. Позволяет полностью перестраивать дизайн сайта для просмотра на различных мониторах и мобильных гаджетах, что благотворно сказывается на поисковой выдаче.