- анализ дизайна (представляющего собой изображение, «картинку»);
- выделение графических и текстовых элементов;
- «нарезка» шаблона. При этом часто шаблон условно разделяется на блоки: «шапку» или «хедер» (header - верхнюю, заглавную часть), содержательную часть сайта, «футер» (footer - нижнюю часть, например, содержающую контактные данные) и т.п.;
- оптимизация изображений, уменьшение их объема с целью ускорения загрузки и т.д.
Задачи, возникающие при верстке сайта:
- минимизация объема файлов (как изображений, так и «кода» страниц) с целью ускорения их загрузки на компьютер Пользователя;
- «кроссбраузерность» - единообразность отображения сайта в разных браузерах (программах для просмотра веб-страниц);
- корректность отображения сайта при разных разрешениях экрана, разных настройках браузера и т.д.;
- SEO-оптимизация - получение страниц, «хороших» с точки зрения поисковых систем и удобных для дальнейшего продвижения.
«Современная оптимизационная верстка направлена на увеличение привлекательности Web-страницы для поисковых машин».
Евдокимов Н.В., Основы контентной оптимизации. Эффективная Интернет-коммерция и продвижение сайтов в Интернет, М., «Вильямс», 2007, с. 107.
Верстка текстов для веб (html-верстка) в узком смысле – создание и редактирование текстовой, содержательной части сайта – новостей, статей, пресс-релизов и т.п.
В отличие от верстки дизайна, шаблона – осуществляемой при создании сайта, верстка текстов – регулярная, порой ежедневная рутинная работа. И если верстка шаблона (в идеальном случае) осуществляется специалистом-верстальщиком, то версткой текстов в дальнейшем может заниматься сотрудник фирмы – владельца сайта: пресс-секретарь, PR-менеджер либо, в небольших фирмах, даже сам руководитель.
Как правило, современный веб-сайт снабжен системой управления контентом (CMS), в которую входит визуальный - «Вордо-подобный» - редактор (так называемый WYSYWIG). Такой редактор имеет удобный интерфейс и позволяет верстать тексты на сайте человеку без специальных знаний.
Проблемы, которые могут возникать в этом случае:
- избыточный, «грязный» код страниц и, как следствие, увеличение их объема и ухудшение показателей с точки зрения продвижения сайта. (особенно часто эта проблема возникает при переносе текстов путем копирования из редактора MS Word);
- неучет при верстке особенностей поисковых систем (например, отсутствие на странице заголовков 1-го уровня, злоупотребление жирным шрифтом и т.п.);
- эклектика, отсутствие единого стиля на разных страницах сайта и даже в рамках одной страницы (злоупотребление большим количеством цветов, шрифтов и т.п.);
- ухудшение визуального восприятия страницы, снижение юзабилити, удобства для пользователя (например, размещение больших неструктурированных текстов и т.п.)