Что такое вёрстка веб-страниц
Изначально понятие вёрстки было применимо к издательской деятельности. Книги, газеты, журналы содержат структурированную информацию. В них есть чёткая сетка, блоки, в которых текст и графические материалы упорядочены таким образом, чтобы максимально облегчить читателю процесс потребления информации и заинтересовать его.
Сейчас актуальность вёрстки для издательств сохраняется, но к ним также примкнула и сфера веб-дизайна.
В разработке сайтов вёрсткой называется перевод дизайн-макетов в интерактивный, читаемый браузерами вид. То есть, верстальщик пишет код, который формирует из предоставленного графического шаблона «живую» веб-страницу, с элементами которой может работать пользователь.
В контексте создания сайтов есть два вида разработки:
- Back-end — программирование функционала сайта;
- Front-end — программирование внешнего отображения и интерактивных элементов сайта.
Вёрстка относится к front-end. Она не отвечает за базовые возможности сайта, например, за регистрацию пользователей, товарную корзину или прочие операции, связанные с вычислениями, внешними и внутренними запросами, хранением и загрузкой данных.
Вёрстка правильно располагает все элементы на странице и делает так, чтобы с ними было удобно работать.
К вёрстке предъявляются особые требования и она бывает нескольких видов.
Виды вёрстки
Выделяют два наиболее распространённых вида:
- Табличная вёрстка;
- Блочная вёрстка.
Табличная вёрстка
С неё начинался веб — первые простейшие страницы на одном только HTML в содержали набор таблиц, внутри которых располагался контент.
При табличной вёрстке страница поделена на соседствующие друг с другом ячейки. Напоминает стандартную работу с таблицами в Excel.
Побочный эффект использования такого подхода состоит в том, что придётся создавать дополнительные таблицы, которые, возможно, останутся пустыми.
Например, когда необходимо разместить небольшое изображение и зафиксировать его положение, потребуется создать новую строку и разделить её на два или три столбца, если изображение располагается посреди страницы. Один из них будет содержать изображение, а другие служить «фиксаторами» для него, при этом не имея собственного контента.
Есть и положительный момент: табличная вёрстка хорошо подходит для резиновой вёрстки, так как при растягивании окна бразуера таблица меняется вместе с ним и автоматически подгоняет положение внутренних элементов.
Табличная вёрстка создаётся с помощью тега <table>. Он задаёт основные параметры таблицы — длину, ширину и другие. Ниже в иерархии идёт тег <tr>, создающий новую строку, а под ним уже располагаются теги <td>, задающие столбцы.
Блочная вёрстка
Более современный тип вёрстки — блочный.
В нём нет необходимости создавать лишние поддерживающие строки или столбцы. Контейнеры с содержимым задаются единственным тегом <div>, точные параметры размеров и расположения которых определяются сразу.
Блоки выглядят чище, делают код более лёгким и быстрее читаются браузером. Вдобавок поисковые системы лучше распознают блочную вёрстку, что положительно влияет на ранжирование сайта.
<div> обеспечивает адаптивный дизайн — это ценится в современных стандартах разработки и юзабилити.
Валидная вёрстка
Валидность вёрстки — широкое понятие, означающее соответствие кода стандарту W3C и корректное отображение сайта на пользовательских устройствах.
Валидность обеспечивается соблюдением правил построения кода, его оптимизации, минимизации.
Верстальщик должен быть знаком с методологией разработки, чтобы потом не приходилось за ним переделывать.
Валидная вёрстка помогает сайту занять более высокие позиции SERM благодаря соответствия алгоритмам чтения сайтов поисковыми роботами.
Как минимум, в HTML-коде элементы должны содержаться в соответствующих разделах.
Должен быть прописан <!Doctype html>, теги:
- <html>;
- <head>;
- <body>
Признаки правильной вёрстки
- Структура страницы составлена в HTML, в то время как стили вынесены в style.css. В HTML остаются только наименования стилей, присвоенных элементам, но параметры стилям присваиваются в отдельном css.
- У хорошего сайта при просмотре кода отображается только вёрстка. Функциональный код, например, <?php> и часть javascript вынесена также в отдельные классы, недоступные пользователю.
- Чистота кода необходима для быстрой проверки ошибок и доработки. Выносите стили и функционал во внешние классы, соблюдайте отступы, не плодите сущности.
- Правильная вёрстка сохраняет размеры макета. Часто неопытные веб-дизайнеры сильно выходят за заданные ограничения шаблона, и внешний вид страницы отличается от дизайна. Более того, лишние пиксели могут привести к проблемам с адаптивностью, «поехавшей» вёрстке.
- Используйте методологию Яндекса БЭМ. Она позволяет оптимизировать код.
- Обязательно соблюдайте кроссбраузерность. Современная вёрстка должна корректно отображаться в популярных браузерах при всех разрешениях: Chrome, Firefox, Opera, Safari. Это требование всегда есть в технических заданиях.
- Используйте заголовки H1, H2, …, H6.
- Заполняйте атрибуты элементов: <title>, <alt>, <description>.
- Сведите к минимуму изображения — всё, что возможно, должно прописываться текстом или кодом, и в последнюю очередь представлено в виде растровых картинок.
Инструменты верстальщика
Чаще верстальщик работает только с кодом. Хотя многие советуют верстальщику освоить графические редакторы — Photoshop и другие, это не принципиально. В качественных проектах графика изготавливается дизайнерами и передаётся в готовом для интеграции виде верстальщикам, которым остаётся её разместить в нужных местах.
То же касается и прототипов. Хорошо, когда верстальщик может сам покрутить схему в инструменте прототипирования и заглянуть внутрь графики через Photoshop, но серьёзные студии строго разделяют обязанности сотрудников.
Наиболее релевантное ПО для верстальщика — редакторы кода, такие как:
- Notepad++ (наименее предпочтительный вариант, хотя и временами использующийся).
- SublimeText.
- Webstorm — пожалуй, лучший из существующих.
Проверка вёрстки
Базовое тестирование включает в себя ручные прогоны сценариев в нескольких браузерах и устройствах.
Боле фундаментальную информацию дают сервисы jigsaw.w3.org/css-validator и validator.w3.org.
Сквозная аналитика
- Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
- Анализируйте воронку продаж от показов до ROI
- Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
- Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
- Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды
