Что такое вёрстка сайта
Вёрстка – это структура всех элементов на странице документа, сайта или другого информационного носителя. Такими элементами могут быть изображения, заголовки, подзаголовки, таблицы, инфографика и сам текст.
Изначально понятие вёрстки было применимо к издательской деятельности. Книги, газеты, журналы содержат структурированную информацию. В них есть чёткая сетка, блоки, в которых текст и графические материалы упорядочены таким образом, чтобы максимально облегчить читателю процесс потребления информации и заинтересовать его.
Сейчас актуальность вёрстки для издательств сохраняется, но к ним также примкнула и сфера веб-дизайна.
В разработке сайтов вёрсткой называется перевод дизайн-макетов в интерактивный, читаемый браузерами вид. То есть, верстальщик пишет код, который формирует из предоставленного графического шаблона «живую» веб-страницу, с элементами которой может работать пользователь.
В контексте создания сайтов есть два вида разработки:
- Back-end — программирование функционала сайта;
- Front-end — программирование внешнего отображения и интерактивных элементов сайта.
Вёрстка относится к front-end. Она не отвечает за базовые возможности сайта, например, за регистрацию пользователей, товарную корзину или прочие операции, связанные с вычислениями, внешними и внутренними запросами, хранением и загрузкой данных.
Вёрстка правильно располагает все элементы на странице и делает так, чтобы с ними было удобно работать. Поэтому вёрстка сайта – это ответственная задача, требующая внимательности, терпения и постоянного тестирования.
Вёрстку веб-страниц невозможно представить без HTML. Если говорить простыми словами, то HTML — это единый стандарт отображения всех элементов веб-страницы. Это язык разметки, с помощью которого браузеры показывают нам порядок, размер, формы и шрифт текста. С его тегами знакомы все, кто занимался созданием сайтов, например:
- <body> </body> — все содержимое страницы;
- <h1> </h1> — это обозначение заголовка;
- <h2> </h2> — подзаголовок;
- <img> — изображение;
- <strong> </strong> — жирный шрифт;
- <a> </a> — ссылка на другой ресурс, но между ними надо поставить атрибут href, который содержит адрес этой ссылки и так далее.
К вёрстке предъявляются особые требования и она бывает нескольких видов.
Виды вёрстки
Выделяют два наиболее распространённых вида:
- Табличная вёрстка;
- Блочная вёрстка.
Табличная вёрстка
С неё начинался веб — первые простейшие страницы на одном только HTML в содержали набор таблиц, внутри которых располагался контент.
При табличной вёрстке страница поделена на соседствующие друг с другом ячейки. Напоминает стандартную работу с таблицами в Excel.
Побочный эффект использования такого подхода состоит в том, что придётся создавать дополнительные таблицы, которые, возможно, останутся пустыми.
Например, когда необходимо разместить небольшое изображение и зафиксировать его положение, потребуется создать новую строку и разделить её на два или три столбца, если изображение располагается посреди страницы. Один из них будет содержать изображение, а другие служить «фиксаторами» для него, при этом не имея собственного контента. Из-за этого страница сайта может получиться «тяжелой». А как известно, поисковые системы не любят перегруженные сайты и не так охотно их ранжируют в итоговой выдаче.
Однако есть и положительный момент: табличная вёрстка хорошо подходит для резиновой вёрстки, так как при растягивании окна браузера таблица меняется вместе с ним и автоматически подгоняет положение внутренних элементов.
Табличная вёрстка создаётся с помощью тега <table>. Он задаёт основные параметры таблицы — длину, ширину и другие. Ниже в иерархии идёт тег <tr>, создающий новую строку, а под ним уже располагаются теги <td>, задающие столбцы.
Блочная вёрстка
Более современный тип вёрстки — блочный.
В нём нет необходимости создавать лишние поддерживающие строки или столбцы. Контейнеры с содержимым задаются единственным тегом <div>, точные параметры размеров и расположения которых определяются сразу.
Именно поэтому тег <div> — это номер №1 в такой верстке, потому что на его основе можно выделить шапку сайта, категории, отдельные текстовые элементы, логотип и так далее. При этом отдельный блок <div> может содержать в себе отдельные HTML-элементы. Например, <blockquote> служит для выделения цитаты. Если в этом блоке нужны заголовки, то в помощь <h1> </h1> и так далее — важно лишь, чтобы это выглядело удобно для потенциального пользователя.
Блочная верстка идет бок о бок с так называемым CSS. С помощью CSS можно менять размеры, цвет, границы, расположение и другие свойства блоков <div>. Например, в HTML-редакторе прописывается <div class=»one»></div>, а его фоновый цвет задаётся background: red. В итоге получится красный блок. А если мы хотим ограничить его размеры 200 пикселями, то напишем так: width: 200px и height: 200px.
Блоки выглядят чище, делают код более лёгким и быстрее читаются браузером. Вдобавок поисковые системы лучше распознают блочную вёрстку, что положительно влияет на ранжирование сайта.
<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.
Любая вёрстка должна соответствовать макету. Нередко случается, что финальный вариант вёрстки не выглядит так, как задумывалось. Чтобы это проверить, надо воспользоваться сервисом welldonecode.com/perfectpixel/.
А сервис Page Ruler нужен как линейка, чтобы в пикселях измерить свёрстанные блоки и прочие элементы страниц. Пригодится, чтобы оценить размеры логотипов, шапок, форм, контактных данных, рубрик, карточек, виджетов и так далее.
Window Raizer — расширение браузера Google и must have для верстальщика и дизайнера. С его помощью можно узнать, насколько страница сайта адаптирована под разные размеры экраны и разрешения.
Что еще стоит проверить в вёрстке веб-страницы:
- Код не должен содержать ошибок, например, все теги закрыты: за открытым <strong> всегда следует закрытый </strong>;
- doctype полностью прописан;
- Страница функциональна, даже если отключены изображения (атрибут alt в помощь) и заблокированы javascript-коды;
- Правильная семантическая разметка для поисковых систем;
- Страница одинаково корректно отображается во всех браузерах.
Сквозная аналитика
- Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
- Анализируйте воронку продаж от показов до ROI
- Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
- Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
- Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды
