WebValley Studio

20+ современных принципов верстки: что нужно знать, чтобы верстать сайты, которые не рассыпаются

В разработке сайтов большое внимание уделяется дизайну и смысловой нагрузке. Верстка незаслуженно отодвигается на второй план. В то время как от этого этапа зависит само существование сайта и его дальнейшее развитие.

Что такое верстка сайта

Разработку разделяют на 2 зоны ответственности:

● Backend — разработка внутреннего функционала сайта на сервере;
● Frontend — внешняя часть сайта, программирование пользовательского интерфейса.

За Frontend отвечают верстальщик (HTML+CSS) и Frontend-разработчик (JavaScript).

Верстка — это перевод дизайн-макетов на язык браузера при помощи кода. Верстальщик дает жизнь макетам, отрисованным дизайнером, воплощает все его задумки, превращая картинки в полноценный сайт. Для этого используются HTML, CSS и скрипты, написанные фронтенд‑разработчиком:

● HTML — разметка, определяющая содержимое — задет каркас, структуру страницы, местоположение объектов;
● CSS — отвечает за представление элементов (размер, цвет, форма);
● JavaScript — определяет поведение объектов (анимация, взаимодействие с интерфейсом).

У каждого верстальщика свой подход и лайфхаки. Это нормально, поскольку у верстки нет канона, все работают по-своему. Но чтобы верстка была надежной, сайт не рассыпался ни при каких условиях, а другой специалист мог потом разобраться с этим кодом — нужно соблюдать правила и принципы, о которых поговорим далее.

Почему верстка — один из самых важных этапов разработки сайта

Первое впечатление о сайте создают дизайн и верстка. Но пользователь никогда не увидит дизайн-макет, он взаимодействует с готовым сайтом, собранным верстальщиком. Поэтому, каким бы крутым ни был первоначальный дизайн, если он криво сверстан, впечатление пользователя будет испорчено с первых секунд.

Но чаще речь идет не только об эстетике. Сайт с поехавшей версткой становится нечитаемым, неудобным и неинформативным. Если 2 текстовых блока наложились друг на друга, или изображение ушло под срез верстки и стали не видны условия акции, даты проведения и другая важная информация на баннере — польза сайта снижается.

Кроме того, качественная верстка — это залог успешного SEO-продвижения, причем она отражается не только на технических, но и на поведенческих факторах ранжирования.

От правильности верстки зависит доступность сайта для поискового робота: сможет ли он проиндексировать всю информацию на странице? Поймет где контент, а где вспомогательные элементы дизайна? Сможет ли уловить иерархию и структуру страницы? Не споткнется ли на ошибках в коде?

Пользователь, зайдя на сайт и обнаружив, что он весь куда-то уплыл, тут же покинет его, добавив нам отказ в систему аналитики, и просадив поведенческие факторы.

Поэтому, кривая верстка — это не об эстетике. Она имеет далеко идущие последствия, так как от нее зависит возможность продвижения сайта.

Из чего складывается верстка сайта

Работа верстальщика складывается из таких этапов как:

● Работа с макетом — выделение изображений, иконок, их компоновка и сохранение в отдельную папку;
● Загрузка и подключение шрифтов;
● Разработка страниц — непосредственная верстка дизайн-макетов на HTML и CSS;
● Подключение готовых скриптов, анимация элементов;
● Проверка корректности верстки, тестирование готового сайта.

Подходы к верстке

Чтобы понять, какие есть подходы к верстке сайта, разберем простой пример: 2 блока на странице, стоящих рядом. Давайте посмотрим, как они будут вести себя по отношению друг к другу и к окну браузера при разных вариантах верстки.

Фиксированная верстка

При таком подходе, ширина обоих блоков зафиксирована, она не изменяется в зависимости от величины экрана. Если мы откроем страницу на мониторе с большим разрешением, то по бокам от блоков образуются «ушки» — пустое пространство. Если зайти на страницу с устройства с низким разрешением экрана, то внизу появится горизонтальная полоса прокрутки.

Резиновая верстка

Ширина блоков задается в процентах относительно ширины экрана. Например, если мы обозначим ширину каждого блока в 50% от экрана, то на больших мониторах блоки будут расширяться, а на маленьких — сужаться, но при этом они всегда будут занимать ровно половину экрана.

Адаптивная верстка

Сайт верстается под несколько разрешений экрана, например:

● Широкие мониторы: от 1920 px;
● Ноутбуки: от 1280 до 1919 px;
● Планшеты: от 768 до 1279 px;
● Мобильные устройства: от 320 до 767 px
верстка основные правила
То есть положение рассматриваемых двух блоков — для каждого брейкпоинта будет верстаться отдельно. А их размер будет изменяться «рывками» по мере того, как изменяется ширина экрана.

Отзывчивая верстка

Это комбинированный вариант адаптивной и резиновой верстки. Вернемся к примеру с двумя рядом стоящими блоками: в классической резиновой верстке, если мы задаем им ширину в 50% от экрана, они всегда будут занимать ровно половину монитора, но это не всегда будет хорошо выглядеть с точки зрения дизайна: на узких смартфонах контент этих блоков будет невозможно разобрать. При отзывчивой верстке блоки будут резиновыми для разных разрешений, но отличаться по расположению элементов, и на смартфоне 2 картинки не будут жаться до последнего, чтобы уместиться на узком экране, а поменяют свое расположение, например, встав друг под другом, как это происходит в адаптивной верстке:

Мобильная верстка

Мобильная версия сайта, в отличие от адаптивной, представляет собой верстку отдельного сайта, со своим URL (обычно на поддомене вида m.web-valley.ru) для мобильных устройств. То есть верстается 2 отдельных сайта: один для десктопа, другой — для смартфонов.

Такой подход применяется для крупных порталов или интернет-магазинов, которые верстались десятки лет назад, когда в мобильной версии сайта не было необходимости. Сейчас она нужна, но переработать такие крупные проекты в адаптив, сделать редизайн — дорого и долго. Проще сверстать отдельный сайт для мобильных устройств.

Еще один случай, когда уместна мобильная верстка — проекты, изначально заточенные под мобильный трафик, которым вообще не нужен десктоп.

Техники верстки

Один и тот же макет можно сверстать, используя разные техники. Каждая имеет свои преимущества и недостатки, поэтому верстальщик, в зависимости от ситуации решает, каким путем пойти.

Табличная верстка

Табличный метод верстки напоминает работу в Excel: страница делится на строки, а они, в свою очередь, на ячейки, которые наполняются контентом. Табличная верстка выполняется при помощи тега <table>, который задает основные параметры таблицы (ширину, длину), а также вложенным в него тегом <tr>, создающим строку и <td>, задающим столбцы.

Долгие годы таблицы были самым простым и надежным способом верстки, гарантирующим «резиновость» сайта: колонки таблицы масштабировались под любую ширину экрана. К тому же табличные сайты примерно одинаково выглядели в разных браузерах.

Но у этой техники есть ряд недостатков, которые делают ее бесперспективной:

● Сайт не прогружается при слабом интернете или перебоях связи: чтобы контент таблицы корректно отображался в браузере, он не показывается до тех пор, пока таблица не загрузится полностью. Если таблица большая, то это существенно сказывается на скорости сайта;

● Тяжелый код: чтобы разместить фотографию на сайте в середине страницы, нужно создать таблицу из 3 колонок, фото поместить в среднюю, а первую и последнюю оставить пустыми, они будут служить фиксаторами для изображения по центру. В процессе верстки сайта образуются десятки таких пустых таблиц, что утяжеляет код и снижает скорость загрузки;

● Плохая индексация: поисковый робот не любит сайты с табличной версткой, ему сложно понять структуру и иерархию страницы, тяжело воспринимать контент целостно, так как между небольшими кусочками контента находятся громоздкие части кода;

● Соотношение контента к HTML в пользу последнего: еще один фактор, плохо влияющий на SEO. Для нормальной индексации, контента на странице должно быть больше, чем кода.

В целом, табличная техника считается устаревшей. Ей все еще активно пользуются для HTML‑верстки электронных писем, но для разработки сайтов используют более современные методы.

Верстка слоями

Техника, построенная на использовании тега <layer>. В отличие от табличной верстки, послойная дает возможность накладывать элементы друг на друга и подгружать контент из файлов.

Блочная верстка

Блочная верстка на сегодня единственный валидный и адекватный способ верстки. Это усовершенствованное продолжение верстки слоями. Вместо слоев структурным элементом выступают блоки или контейнеры — прямоугольники разных размеров. Эта форма была выбрана, потому что прямоугольник может удобно делиться на неограниченное число других прямоугольников, что делает верстку более гибкой.

Формируется такой контейнер при помощи тега <div>, после чего в него помещается контент, причем в зависимости от задачи его можно по разному наполнять:

● Затолкать все содержимое страницы в один контейнер;

● Сверстать сайт поблочно, используя отдельный <div> контейнер для каждого блока — обложка, о компании, преимущества и т. д.;

● Расположить элементы дизайна одного смыслового блока (например, обложки) по отдельным контейнерам.

То есть, благодаря блочной верстке, мы получаем колоссальную гибкость, а в совокупности с CSS-стилями, которые можно применять к каждому блоку — безграничные возможности.

К преимуществам блочной верстки относятся:

● Небольшой объем кода, а следовательно высокая скорость загрузки и меньшая нагрузка на сервер. В отличие от табличной верстки, позиционирование контейнера можно задавать в любых координатах экрана, не используя для этого лишние пустые поддерживающие ячейки;

● Понятный читаемый код;

● Возможность реализации любых сложных дизайнерских решений;

● Идеален для SEO — робот хорошо считывает такой код, сразу четко видит контент и семантическую разметку, что положительно сказывается на индексации. Если у вас есть сайт на Тильде, наверняка вы видели эту фразу в справочном центре:
верстка макетов что это
На первый взгляд, такая формулировка кажется бредом: ну как последовательно расположенные блоки на странице могут влиять на SEO? Однако, если смотреть на это утверждение с точки зрения блочной верстки, то оно имеет смысл.

Наверное, единственный недостаток блочной верстки — плохая кроссбраузерность. Верстальщику бывает сложно добиться того, чтобы сайт одинаково хорошо выглядел в разных браузерах.

Верстка фреймами

Фрейм — это элемент, который отображает отдельную HTML-страницу. Фреймы не зависят друг от друга. Поэтому при таком подходе верстальщику нужно думать только об отображении «маленького» HTML-файла. Такой подход исключает повторяющиеся части кода, что уменьшает размер и сложность оригинального файла.

Но несмотря на кажущиеся преимущества, верстка фреймами имеет серьезный недостаток: эти сайты хуже всего индексируются поисковиками. Для робота часть таких страниц не имеет контента, а вторая часть — не содержит ссылок на другие страницы, не передает и не принимает внутренний вес сайта.

Кроме того, такая верстка неудобна для пользователя, например, внутренние страницы невозможно добавить в закладки, т.к. у них нет отдельного URL-адреса.

Принципы верстки 2021-2022

Современные принципы верстки построены на логике, здравом смысле, удобстве верстальщика и потребностях бизнеса. Верстальщик не обязан придерживаться этих принципов, но если он им следует — это уже совсем другой уровень качества сайтов.

Кроссбраузерность

Браузеры не имеют единого стандарта и могут по-разному отображать один и тот же элемент. Задача верстальщика — протестировать сайт во всех популярных браузерах: Google Chrome, Yandex, Opera, Safari, FireFox, Edge, чтобы верстка не рассыпалась ни в одном из них.

В некоторых случаях для этого используют вендорные префиксы перед новыми CSS-свойствами. Например, не все браузеры могут одинаково хорошо прочитать время срабатывания анимации. Чтобы решить этот вопрос, ставят префикс — приставку. Таким образом создается отдельное свойство под конкретный браузер, и вместо нормального transition-duration:0.76s, мы получаем:

-webkit-transition-duration:0.76s;
-moz-transition-duration:0.76s;
-o-transition-duration:0.76s;
-ms-transition-duration:0.76s;
где webkit, moz, o, ms — это префикс.

По сути — это зло и основная причина раздувания CSS-файлов. Ведь для каждого нестандартного и нового свойства нужно прописывать ещё дополнительные 4 строки со всеми префиксами.

Автоматизировать этот процесс можно через Autoprefixer — это программа, которая проставляет префиксы там, где необходимо. То есть в нее загружается файл без префиксов, а на выходе получается файл с префиксами.

Но бывают свойства, которые работают только в одном браузере. В таких ситуациях надо либо отказываться от них, либо использовать с максимальной осторожностью, и только если они не сильно изменяют внешний вид объектов.

Раньше обязательным пунктом ТЗ для верстальщика было корректное отображение сайта в старых версиях браузеров. Сейчас это требование неактуально, так как разработка под старые браузеры значительно удорожает проект, а пользуются ими единицы, и с каждым годом таких пользователей становится все меньше. Поэтому вкладываться в разработку под это старье — нецелесообразно, гораздо важнее, чтобы сайт корректно отображался в современных браузерах.

Лучший способ проверки кроссбраузерности — скачать все популярные браузеры, зайти на сайт и посмотреть, как ведет себя верстка. Но для ускорения процесса, верстальщики пользуются специальными сервисами. Некоторые из них работают по балльной системе, анализируя CSS и выставляя оценку каждому свойству в определенном браузере. Например, сервис Can I use показывает, какое свойство CSS, технология, расширение шрифта и картинок поддерживается на каких браузерах. Оценка выдаётся в процентах пользователей, в браузерах которых верстка не сломается. То есть при выборке в миллион человек и оценке 99% на Can I use, будет 10 000 человек со старыми версиями браузеров, которые не увидят нашу красоту.
тренды верстки
Но более современные платформы, как Browserstack, предлагают полную эмуляцию отображения сайта в браузере:
Удобство сервисов проверки кроссбраузерности еще и в том, что они помогают протестировать сайт на разных версиях одного и того же браузера, что довольно трудозатратно при ручной проверке.

Кроссплатформенность

Сайт должен корректно отображаться на разных операционных системах: Windows, Mac, Android, iOs, Linux. Каждая платформа по своему рендерит шрифты, поддерживает или не поддерживает определенные форматы изображений, по-разному воспринимает скрипты.

Валидность верстки

Валидность — широкое понятие, но если говорить простым языком — это отсутствие ошибок в коде. Все элементы кода должны находиться в соответствующих разделах, все открытые теги — закрыты, соблюден синтаксис — кавычки, пробелы. Большинство редакторов кода подсвечивают такие ошибки.

Для проверки валидности кода используются программы валидаторы, например, W3C Validator.

Сегодня браузеры научились исправлять (или скорее игнорировать) мелкие ошибки верстальщика, но валидность кода — это одно из важных требований для SEO-продвижения сайта. Ошибки в коде воспринимаются поисковым роботом как признак некачественности сайта, что понижает его в выдаче.

Pixel Perfect

Pixel Perfect — это техника, которая подразумевает 100% соответствие макету, пиксель‑в‑пиксель. Сверстанная страница должна полностью совпадать с дизайном: размеры шрифтов, изображений, отступы, межстрочное расстояние, цвета, радиусы скруглений и т. д.

Верстка на глаз приводит к тому, что страница выглядит неаккуратно. Кажется, что пользователь не заметит разницу в высоте элементов в 1−2 пикселя. Возможно, так оно и есть, но человека не будет покидать чувство, что сайт какой-то не такой: он не поймет, в чем конкретно дело, но общее впечатление будет испорчено. Кроме того, лишние пиксели могут привести к тому, что в адаптиве верстка поплывет.

Для тестирования сайта на соответствие макету используют специальные сервисы. Это могут быть программы с простым функционалом, по типу линейки, например, Page Ruler для Google Chrome:
современная верстка сайта
что значит сверстать страницу


И сервисы, способные наложить макет на готовый сайт, как кальку, для проверки совпадения, например, расширение для Google Chrome PerfectPixel от Well Done Code:
основы верстки это
На скрине видно, как сильно верстка расходится с макетом
Добиться 100% пиксельной точности бывает невозможно из-за технических ограничений. Но верстальщик должен четко осознавать: расхождение произошло по объективным причинам или по его небрежности.

Красивый код

Красивый отформатированный код — это хороший тон для верстальщика. Компьютеру не важно, будет код написан в одну строку или аккуратно разбит на смысловые блоки с правильными отступами, отражающими вложенность.

Но с этим кодом будут работать люди, поэтому оставлять борщ из атрибутов, стилей и тегов — непрофессионально.

Пример плохого форматирования кода:
<form><label>Номер телефона</label><input type="text" value="" /> <button 
class="button_red"><b>Заказать звонок</b></button></form>
Красиво написанный код:
<form>
  <label>Номер телефона</label>
  <input type="text" value="" />
  <button class="button_red">
    <b>Заказать звонок</b>
  </button>
</form>
Код сжимают в одну строчку при помощи специальных сервисов только для рабочих, боевых версий сайта, когда нужна максимальная скорость.
Закажите разработку сайта

Идеальный порядок

При работе над проектом файлы аккуратно раскладываются по папкам и понятно подписываются, чтобы их можно было быстро найти в 1−2 клика:
основные правила и понятия верстки

Правильная структура

Правильная структура сверстанного кода предполагает соблюдение иерархии макета: сначала прописываются элементы верхней части страницы (меню, шапка), затем контент, в конце подвал. Если верстальщик забыл описать правила для логотипа, расположенного в шапке, и спохватился на 2786 строке кода, где уже пишутся медиазапросы, то плохая идея дописывать код для лого здесь — в таком документе потом будет невозможно что-то найти и разобраться. Чтобы автоматизировать эту работу лучше использовать все возможности препроцессоров и сборщиков проекта, но об этих инструментах чуть позже.

Шаблонность

CSS свойства задаются по названиям классов, за счет чего можно указать свойства для целой группы объектов. Например, на странице 10 H2-тегов. Если они все одинаковы, шаблонны, то в CSS мы запишем:
.my_h2{
...какие-то CSS свойства
}
Но если все эти 10 заголовков разные, то начинается треш, ведь каждый такой заголовок нужно описать.

Но это тычек скорее не в сторону верстальщика, а в сторону дизайнеров: их задача делать одинаковые заголовки, чтобы верстальщикам не хотелось убивать.

CSS в отдельный документ

Встроенные в HTML скрипты и таблицы стилей — плохая история. Стандарты W3C требуют отделять код содержимого, представления и поведения (HTML, CSS и JavaScript) друг от друга. Во-первых, это позволяет быстро вносить изменения и не путаться в полотнах кода. Когда в HTML 1000+ строк кода, то дополнительные 1000+ строк CSS запутают картину ещё сильнее:
Во-вторых, код сайта становится короче и легче, если CSS вынести в отдельный файл.

Исключение инлайновых стилей

Когда у нас есть отдельно HTML и CSS, например:
<h2 class="my_h2">Заголовок</h2>
<style>
.my_h2{
font-size: 32px;
}
</style>
Мы можем создать HTML-файл, прописать в нем все, что выше, и оно будет работать. Но недостатки такого решения описаны в предыдущем пункте. Лучше создать отдельный CSS‑файлик и подключать его по относительной ссылке.

Но можно поступить по-другому:
<h2 style="font-size: 32px">
Заголовок</h2>
То есть внутри HTML-тега мы написали CSS. Это называется инлайновым стилем.

Такое решение неудачно по нескольким причинам:

● Код сложнее отследить: если нужно изменить стиль данного компонента, то необходимо лезть в HTML-код и что-то в нем менять. Это не очень удобно и нужно помнить, где что находится.

● Высокий приоритет инлайновых стилей, например:
<h2 class="my_h2" style="font-size: 48px">Заголовок</h2>
<style>
.my_h2{
font-size: 32px;
}
</style>
Размер заголовка будет 48 пикселей, а не 32, как прописано в CSS. И выкорчевывать, заменять это значение проблематично. А это может понадобиться, если, к примеру, нужно при наведении поменять размер. Это просто не сработает, так как у инлайнового стиля высокий приоритет.

Комментарии в HTML

Хорошая привычка — оставлять комментарии по ходу написания кода:
<!-- Открытое меню -->
<div class="menu-open">...</div>

<!-- Секция с партнерами -->
<section class="section" id="authority">...</section>

<!-- Секция с подвалом -->
<footer class="section">...</footer>
Благодаря комментариям, можно быстро найти нужный фрагмент кода на странице, либо облегчить работу программисту, который будет вести этот сайт в дальнейшем.

Важный момент: хороший код должен быть самодокументирующимся. То есть таким, чтобы его можно было прочитать и без комментариев. В представленном примере комментарии дублируют названия классов или тегов (menu-open, footer) — такие пояснения излишни. Они нужны только для особо сложных моментов — как уточнение про секцию с партнерами. Слишком много комментариев в разметке — тоже не очень хорошо.

Интуитивно понятные имена классов и идентификаторов

Присваивая имена классам и переменным, верстальщик продумывает их так, чтобы они были читаемыми и понятными, например, не d2, а radius, не веселая карусель, а slider.

Чтобы в коде потом мог разобраться сторонний программист, лучше использовать методологию верстки, например БЭМ. Но главное, чтобы среди разработчиков одного проекта было соглашение, как мы обозначаем те или иные элементы. Это важнее и выше всех рекомендаций левых людей.

Компактный код

Верстка должна быть компактной. Для реализации этого требования, верстальщик не прибегает к лишним классам, идентификаторам, использует свойства наследования, сокращенный CSS, продумывает, как можно уменьшить вложенность элемента.

Ниже пример «грязного» и «чистого» кода.

Грязнуля:
<div class="t396__elem tn-elem tn-elem__3486420931629654093447 t-animate t-animate_started" data-elem-id="1629654093447" data-elem-type="text" data-field-top-value="380" data-field-left-value="600" data-field-width-value="403" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-animate-style="fadeinup" data-animate-duration="1" data-animate-delay="0.9" data-animate-distance="25" data-fields="top,left,width,container,axisx,axisy,widthunits,leftunits,topunits" style="top: 380px; left: 951px; width: 403px; transform: translate3d(0px, 25px, 0px); transition-delay: 0.9s; transition-duration: 1s;"> <div class="tn-atom" field="tn_text_1629654093447">Position</div> </div>
Чистюля:
<div class="text">Position</div>
И это один и тот же код! В первом случае, его написала Тильда, во втором — ровные ручки прогера.

Актуальные теги

При верстке важно использовать актуальные теги. Если вы ориентируетесь на источники 2010 года, то нужно понимать, что часть тегов уже не используется, не поддерживается браузерами, вследствие чего будут возникать ошибки.

Основные теги актуальные на сегодня:

● <html> </html> - основной тег страницы, в котором размещаются другие теги;
● <head> </head> - тег, хранящий служебную информацию о странице: SEO, скрипты, счетчики аналитики и т. д. Первый тег, который, как правило, пишется сразу под <html> и перед <body>;
● <body> </body> - тег, содержащий контент страницы;
● <div> </div> - тег контейнера, в котором расположен блок контента;
● <h1> </h1> - тег заголовка первого уровня, один на странице;
● <h2> </h2> - тег заголовка второго уровня. Страница может также включать заголовки более глубокой вложенности — h3, h4, h5, h6;
● <p> </p> - тег, в котором прописывается текстовый контент;
● <strong> </strong> - тег, задающий жирность тексту;
● <i> </i> - тег, отображающий текст курсивом;
● <ul> </ul> - маркированный список;
● <ol> </ol> - нумерованный список;
● <li> </li> - текст под буллитом или цифрой в списке;
● <a> </a> - тег, позволяющий навесить ссылку на текст с помощью атрибута href. Так можно реализовать переход на другую страницу, открытие электронной почты, набор номера телефона;
● <button> </button> - тег кнопки;
● <img> - тег изображений;
● <table> </table> — тег таблицы.

Помимо того, что теги должны быть актуальными, их нужно использовать по назначению.

Например, распространенная ошибка верстальщиков, использование тега <aside> при верстке сайдбара с превью статей схожей тематики:
что такое верстка макета
На самом деле, тег <aside> нужен для размещения контента, не относящегося к теме страницы. То есть поисковый робот при индексации, не будет учитывать контент из этого блока, в то время как в сайдбаре могут находиться заголовки дополняющих статей, что сделало бы страницу более релевантной, и ссылки на связанные страницы, которые показали бы роботу линкбилдинг на сайте. Поэтому, тег <aside> правильнее использовать для размещения на странице рекламных блоков, содержание которых не относится к контенту страницы и не должно влиять на ее релевантность.

Еще один частый вопрос, с которым сталкиваются начинающие верстальщики — в каких случаях использовать ссылку <a>, а в каких кнопку <button>. Путаница возникает из-за того, что креативные веб-дизайнеры используют нестандартные решения и отрисовывают кнопки, похожие на ссылки, и ссылки, которые по факту работают как кнопки. Чтобы правильно выбрать тег, смотрите не на внешний вид объекта, а на его функцию. Что должно произойти при клике на элемент? Если переход на другую страницу или на определенный фрагмент текущей — создаем такой объект ссылкой <a>, и при помощи атрибута href прописываем URL‑адрес, куда нужно перенаправить пользователя. Кнопка не имеет атрибута href, поскольку она никуда не перенаправляет, а отвечает за JavaScript событие — например, отправку формы.

Оптимизация изображений

Тяжёлые картинки способны просадить скорость загрузки сайта, поэтому верстальщик оптимизирует изображения:

● Использует фото в точности подходящие к размеру фрейма — нет смысла брать картинку размером 3000*2000 px, если на сайте под нее отведен участок 400*600 px;

● Сжимает картинки без потери качества в программах-оптимизаторах веса — TinyImage Compressor, TinyPNG, Kraken, JPEGmini, I love IMG;

● Использует подходящие форматы изображений — если у картинки нет прозрачного фона, то правильнее загрузить ее в jpg, а не в png, т.к. этот формат меньше весит. Еще лучше для этих целей подходит WebP, но он читается не всеми браузерами;

● Подключает ленивую загрузку изображений — lazy loading, которая помогает не подгружать картинку до тех пор, пока пользователь не долистает до нее;

● Прописывает атрибут Alt изображениям, чтобы сохранить смысл контента, даже если фото не подгрузились.

Семантическая разметка

Используя SEO-теги, верстальщик может объяснить поисковому роботу, как проанализировать контент страницы. Робот не сканирует сразу всю страницу, сначала он проходит по специальным контрольным точкам — метатегам. В зависимости от содержимого метатегов, робот делает вывод о структуре страницы, вложенности заголовков, связанности частей контента между собой, понимает тематику страницы и определяет релевантные запросы. Для этого верстальщик оборачивает заголовки в теги H1-H6, прописывает внешний заголовок страницы — Title, ее описание — Description, в соответствии с таблицей релевантности, подготовленной SEO-специалистом.

CSS вместо JS

Все, что можно сделать с помощью CSS-стилей, нужно делать через них, не прибегая к JavaScript, поскольку CSS не так сильно грузит сайт во время исполнения анимации.

Разделение функций элементов

Любой объект может выполнять несколько функций на сайте. Например, пункт меню: он одновременно является и ссылкой, и навигационным элементом, который должен быть расположен в строго определенном месте в шапке сайта. Предположим, что пункт меню выглядит так же, как любая ссылка на сайте, тогда у нас есть 3 варианта, как спозиционировать его в шапке:

● Задать позицию самому пункту меню;
● Добавить к пункту меню оболочку и передать функцию позиционирования ей;
● Использовать БЭМ.

В первом случае, стили ссылки будут засоряться параметрами позиционирования:
<a href="/kontakty" class="menuLink">Контакты</a>
Во втором — функция элемента и оболочки — разделена:
<div class="menuItem">
  <a href="/kontakty">Контакты</a>
</div>
Это как если бы продукты в супермаркете продавались без упаковок. Представьте, что вы положили в корзину хлеб, сырое мясо, грязную картошку и фасоль в томатном соусе — и все это без пакетов, никак не отделено друг от друга. И чем больше продуктов вы подкладываете в тележку, тем тяжелее вам потом разлепить это все и привести в съедобный вид.

Поэтому второй подход имеет определенные преимущества: при усложнении элементов, они не нагружаются лишними функциями, за счет того, что изолированы.

Третий подход схож со вторым, так как при использовании БЭМ также происходит изоляция, но другим способом.

Скорость сайта

Сайт должен быть быстрым. Задача верстальщика собрать его так, чтобы ничего не мешало загрузке. Тяжелые скрипты, неоптимизированные изображения, необъединенные в спрайты иконки, отсутствие кеширования — тормозят сайт.

И дело не только в том, что пользователи не готовы ждать, пока сайт загрузится. Скорость — это один из факторов ранжирования в поисковых системах. Чтобы претендовать на высокие позиции в поиске, сайт не должен быть медленнее конкурентов.

Для проверки скорости загрузки используются сервисы PageSpeed Insights от Google, GTMetrix, а также ручная проверка с разных устройств и источников Интернета (проводной, мобильный, wi-fi).

Доступность при плохом интернете

Принцип, который вытекает из предыдущего. Всегда есть пользователи с низкоскоростным интернетом. Сайт должен быть сверстан так, чтобы он был доступен для них.

Для этого:

1. Оптимизируем изображения, подключаем lazy loading, прописываем атрибуты alt на случай, если картинки не подгрузились;

2. Правильно работаем со шрифтами:

● Используем современные форматы шрифтов — WOFF 2.0 и WOFF;

● Применяем link rel="preload" для ускорения загрузки шрифтов браузером. Без данной настройки браузер пойдет читать файл HTML, найдет там ссылку на CSS с упоминанием шрифта, и только потом начнёт грузить шрифт;

● Задаем CSS-свойство font-display, чтобы на время загрузки основного шрифта показывать текст со стандартным шрифтом;

● Проставляем атрибут src: local для снижения нагрузки на сервер для пользователей, у которых данный шрифт предустановлен на устройстве;

3. Оптимизируем критический путь рендеринга — откладываем все ресурсы, которые не нужны для отрисовки контента. Цель — отобразить пользователю хоть что-то в период загрузки как можно быстрее. Не так важно, насколько быстро загрузятся скрипты или все экраны целиком. И так как в этот момент не важна подгрузка скриптов, ссылки на JS‑файлы можно засунуть в самый конец документа.

Работа с типографикой

Верстка осуществляется с соблюдением отступов, интерлиньяжа, кернинга, с использованием «правильных» кавычек и тире/дефисов. Недопустимы висячие предлоги и пунктуация. Для автоматизации этой работы верстальщик использует встроенные инструменты платформы (например, инструмент типограф на Тильде), либо внешние сервисы (к примеру, типограф студии Артемия Лебедева).

Текст должен быть сверстан текстом, а не картинками

В большинстве случаев, текст должен быть сверстан текстом, а не картинками. Исключение составляют только те ситуации, когда это какой-то супер навороченный визуальный элемент на фоне, не имеющий SEOшной ценности.

Инструменты верстальщика

У каждого верстальщика свой набор программ, сервисов и инструментов. Условно их можно разделить на текстовые, визуальные и гибридные.

Визуальные: Figma, Gimp, Photoshop — графический редактор, в котором дизайнер отрисовал макет. Здесь верстальщик берет картинки, смотрит размеры, отступы, находит шрифты, читает комментарии для анимации.

Для работы с кодом могут использоваться:

● Блокнот;
● Notepad++;
● VS Code;
● PHP Storm;
● Adobe DreamViewer;
● Brackets;
● CSS3 Generator;
● CoffeeCup HTML Editor;
● Firebug;
● UltraEdit;
● Webstorm;
● SublimeText;
● Winless;
● Atom;
● WinMerge;
● Front Page;
● NetBeans.

Сейчас на рынке много гибридных продуктов, по типу WebFlow, в которых можно верстать не только при помощи кода, но и визуально создавая блоки. Часто их использование осуждается из-за низкого качества полученного кода, но будущее — за этими сервисами, так как работа с ними гораздо удобнее и быстрее, чем ручное кодирование.
Обсудить проект

Подводные камни в верстке сайтов

Сложности, с которыми верстальщики сталкиваются во время работы:

● Дизайн меняется во время верстки;

● Ошибки и недостаточная информация в макете (например, отсутствие комментариев о том, как должна вести себя анимация);

● Много модификаций одного и того же элемента;

● Не всегда возможно оценить объем работы: иногда оказывается, что сделать какую-то приколюху, гораздо дольше, чем было запланировано.

Лайфхаки для быстрой верстки

У верстальщика, как у любого digital-специалиста, есть дедлайны. Чтобы в них укладываться, приходится находить способы, как упростить и ускорить работу.

Сначала анализ макета, потом верстка

Не надо садиться верстать, как только получен макет. Первое, что нужно сделать — проанализировать дизайн и представить себе, как он будет выглядеть в HTML. Если не подумать об этом изначально, потом возникают сложности, ошибки и переделки, что замедляет скорость разработки.

Настройка редактора

Писать код можно даже в блокноте, но это долго и неэффективно. Сейчас есть редакторы для работы с кодом со встроенным проводником, подсветкой синтаксиса, форматированием кода. Некоторые из них поддерживают плагины, которые позволяют расширить стандартный функционал. Все это ускоряет разработку в разы.

Популярные плагины:

● Emmet — позволяет записывать код сокращенно, автоматически разворачивая его: если ввести bgc и нажать Tab, код превратится в background-color;

● eCSStractor — выделяет часть HTML-кода, с уже написанными классами, и по нажатию на кнопку в CSS вставляются готовые селекторы;

● AutoFileName — находит файлы в папке проекта через добавление пути файла в атрибут src.

Заготовки кода

Реализация некоторых объектов повторяется из проекта в проект. В таких случаях имеет смысл сохранять отдельно фрагменты кода (сниппеты). Для этой задачи используют хранилища по типу Github Gist, Codepen и прочие.

Переиспользование ранее написанного кода ускоряет верстку и помогает избежать опечаток.

Методология БЭМ

БЭМ — это методика разработки, построенная на 3 основных понятиях: блок, элемент, модификатор. Изучение БЭМ помогает сходу формировать правильные суждения о сущностях элементов, понимать, как они будут зависеть друг от друга, задавать верные имена классов. Чтобы научиться БЭМ нужно потратить время, но такая пробуксовка окупится в будущем, так как верстать вы начнете быстрее и правильнее.

Представим себе карточку товара. В ней есть фото и подпись. Подпись — это обычный текст. Его свойства, такие как цвет, размер и т. д. — повторяются. Этот тип текста встречается в обложке, в контентных блоках, в карточках товара — везде.

Но в обложке, к примеру, есть ограничение: текст должен быть шириной в 300 пикселей. Отступ от H1 заголовка — 80 пикселей.

В карточке — он должен быть на всю ширину карточки. А отступ от фотографии равен 20 пикселям.

То есть существует некая неизменная часть, и часть, связанная с позиционированием и размерами. БЭМ предлагает разделять эти сущности и свойства, связанные с ними.

Первая сущность — Блок. Это то, что связано с неизменной частью. В нашем примере это цвет, размер, межстрочка и т. д. Это описание того, каким является элемент.

Вторая сущность — Элемент (обозначается двойным нижним подчеркиванием, например, big‑text__first‑slider). Наш текст является элементом карточки, его составной частью. И он должен выполнять требования карточки. В нашем случае текст должен быть на всю ширину карточки и иметь отступ от фотографии в 20 пикселей.

То есть вместо кода по типу:
<section class=”обложка”>
  <p class=”текстОбложки”>Правда-правда обложки</p>
</section>

<section class=”карточка”>
  <p class=”текстКарточки”>Правда-правда карточки</p>
</section>

<style>
.текстОбложки{
color: #ffffff;
font-size: 42px;
font-family: 'FuturaPT',Arial,sans-serif;
line-height: 1.3;
font-weight: 600;

margin-top: 80px;
width: 300px;
}

.текстКарточки{
color: #ffffff;
font-size: 42px;
font-family: 'FuturaPT',Arial,sans-serif;
line-height: 1.3;
font-weight: 600;

margin-top: 20px;
width: 100%; 
}
</style>
Предлагается писать:
<section class=”обложка”>
  <p class=”текст текст__обложка”>Правда-правда обложки</p>
</section>

<section class=”карточка”>
  <p class=”текст текст__карточка”>Правда-правда карточки</p>
</section>

<style>

.текст{
color: #ffffff;
font-size: 42px;
font-family: 'FuturaPT',Arial,sans-serif;
line-height: 1.3;
font-weight: 600; 
}
.текст__обложка{
margin-top: 80px;
width: 300px;
}

.текст__карточка{
margin-top: 20px;
width: 100%; 
}
</style>
Есть ещё одна сущность — Модификатор (обозначается одним нижним подчеркиванием, например, big-text_grey-color). Это небольшое изменение, которое касается свойств Блока, но когда отдельный Блок создавать не хочется. К примеру, в обложке у текста может быть красный цвет. Тогда мы добавляем новое CSS-правило:
.текст_красный{
color: #ff0000; 
}

Препроцессоры

Препроцессор — это надстройка, которая упрощает работу с кодом. Например, популярный препроцессор Sass позволяет импортировать файл в файл, работать с вложенностью селекторов, что помогает в организации кода и экономит время.

Использование сборщиков проекта

Сборщики проектов — это программы, (например, Gulp) которые помогают минимизировать рутинную ручную работу. Они собирают все файлы в один, проставляют префиксы для кроссбраузерности, создают спрайты иконок и других SVG-элементов, помогают верстать в реальном времени с сохранением кода при обновлении браузера.


Верстка — сложная и ответственная часть разработки сайта. Несмотря на множество программ, которые упрощают и ускоряют работу, главным инструментом верстальщика все еще остаются умная голова и прямые руки.
Авторы статьи
Дмитрий Навалов
Full Stack Developer
17.09.2021
Вероника Юдина
Руководитель SEO
Доверьте разработку сайта профессионалам!
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!

Подпишись, чтобы быть в курсе!

Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.