Программирование  •  14 ноября  2022  •  5 мин чтения

Вёрстка сайта: что нужно знать, чтобы её освоить

Разберём на примерах, с чего начать вёрстку сайта, как сделать, чтобы всё работало, и зачем верстальщику работать в паре с дизайнером.
Михаил Воробьёв
Яндекс Практикум
Фронтенд-разработчик, Growth NM
Елена Савчук
Яндекс Практикум
Редактор

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

Вёрстка web-сайтов — разработка интерфейсной части сайта и перенос макета в веб. Этим занимается верстальщик. Умение верстать может стать первым шагом в карьере фронтенд-разработчика.

Для работы верстальщику нужно изучить:

● язык разметки: HTML, HTML5,

● CSS,

основы JavaScript,

● принципы работы визуальных редакторов,

● инструменты проверки валидности кода.

Виды вёрстки

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

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

Материал по теме:
Сайты делают не только программисты: кто такие верстальщики, зачем нужны и что умеют

Что такое валидная вёрстка сайта

Валидная вёрстка — это HTML-код, который написан по определённым стандартам. Их разработал Консорциум Всемирной Паутины — World Wide Web Consortium (W3C).

Валидность — соответствие HTML-кода стандартам, которые позволяют сайту работать в разных браузерах и программах так, как было задумано.

Валидность определяет, как на сайт будут реагировать поисковые системы и как его будут воспринимать пользователи. Проверить вёрстку сайта можно и вручную, и с помощью специальных сервисов или расширений в браузере. Например, с помощью сервиса Markup Validation Service, плагина Web Developer для Chrome или в валидаторе W3С.

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

Валидатор оценивает синтаксис, находит синтаксические ошибки и ошибки вложенности тегов, показывает структуру заголовков. Например, элементы можно вкладывать друг в друга по определённым правилам ― так внутрь списков можно вкладывать только специальные элементы списка.

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

На сайте google.com валидатор обнаружил 119 ошибок, тем не менее ежедневно им пользуются до 4 миллиардов людей

Как отличить правильную вёрстку

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

Например, на сайте есть пять карточек товара. Что произойдёт, если понадобится добавить шестую? Решение лучше сразу обсудить с дизайнером. Возможно, новую карточку лучше перенести на новую строку или сжать остальные и уместить шесть карточек в пять колонок.

Чтобы сделать вёрстку макета сайта качественно, нужно учитывать следующие параметры:

1. Доступность

Содержимое сайта должно хорошо считываться с любого устройства пользователем с любыми особенностями здоровья.

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

Вот несколько плагинов для работы с контрастностью:

Contrast
проверяет доступность цветового контраста любых элементов в макете.

Adee Comprehensive Accessibility Tool
проверяет цветовой контраст и моделирует несколько режимов того, как будут видеть дизайн люди с различными формами дальтонизма.

HCL Easy
позволяет быстро подобрать цветовые палитры, которые соответствуют требованиям контрастности и особенностям цветовосприятия человека.

Low Vision
тестирует пользовательский интерфейс на соответствие различным типам нарушений зрения.

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

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

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

Расположение элементов на сайте и взаимодействие с ними пользователя подчиняется Закону Фиттса:

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

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

4. Pixel perfect вёрстка

Это кроссбраузерная вёрстка, которая практически идентична макету: шрифты на месте, расстояние между строками и буквами совпадает, иконки одинакового размера. Чтобы этого добиться, используют специальные плагины в браузере:

● Pixel Perfect для Firefox;

● Pixel Perfect для Google Chrome;

● Кроссбраузерный WellDoneCode.

Они позволяют накладывать картинку дизайнера на вёрстку, чтобы увидеть разницу с макетом, и подогнать сайт под него.

5. Переполнение
Переполнение возникает, когда контент внутри контейнера больше его размера. Поэтому лучше не использовать контейнер с фиксированными значениями высоты и ширины. Чтобы контент не выходил за пределы поля и не «залезал» на другие абзацы, ширина или высота должны определяться содержимым.
Часто дизайнеры уменьшают размер шрифта в мобильной версии. Лучшее решение ― перенос и обтекаемые блоки, которые зависят от содержимого и занимают доступное для этой ширины место
Начать верстать сайты с нуля, делать их адаптивными и полезными для пользователей можно на курсе «Веб-разработчик». Студенты учатся писать код на HTML, CSS и JavaScript, работать с фронтендом, создавать и улучшать сервисы по современным стандартам.
Каждый может стать веб-разработчиком
Освойте навыки востребованной профессии в IT меньше чем за год: научитесь писать чистый код, разрабатывать сайты и веб-приложения. Начните с бесплатной вводной части курса «Веб-разработчик».

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

Инструмент
Какие задачи решает

Дока — документация для разработчиков

Изучить языки: HTML, CSS, JavaScript, а также теги, атрибуты, CSS-свойства

DevTools — плагин для отладки сайтов

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

Figma — графический редактор для совместного проектирования сайтов

Смотреть размеры элементов и копировать свойства

Редакторы кода:

VS Code
Sublime Text
Atom

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

Emmet — плагин с сокращениями

Создать базовую структуру HTML-разметки за несколько секунд

Проверка вёрстки

Проверить, всё ли работает, можно по шагам:

1. Прогнать вёрстку макета сайта через валидатор.

2. Проверить вёрстку с помощью DevTools:

● Открыть сайт на разных размерах экрана и убедиться, что все элементы на своих местах.

● Включить и выключить тёмную тему, уменьшить анимации, высокую контрастность, выставить минимальный размер шрифта.

● Добавить больше текста в разные места в интерфейсе и смотреть, как он подстраивается под изменения, потому что чаще всего текст из макета и наполнение сайта на этапе вёрстки далеки от финальных.

● Добавить и убрать пункты списков, карточки товаров и другие перечисляемые элементы.

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

Советы эксперта: что важно знать и уметь начинающему верстальщику

  1. Знать языки: HTML и CSS, JavaScript, их теги и атрибуты.

  2. Уметь отличать контентные изображения от декоративных, чтобы знать, какие сверстать тегом, а какие можно сделать фоном через CSS.

  3. Учиться верстать с помощью относительных единиц em и rem вместо пикселей — так интерфейс будет правильно реагировать на настройки размера шрифта в браузере.

  4. Заводить при работе над макетом сайта базовую палитру цветов и использовать их в компонентах. Если заранее задать переменные с цветами и использовать их в вёрстке, при разработке это сильно облегчит работу.

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

Поделиться
Mon Feb 06 2023 20:51:59 GMT+0300 (Moscow Standard Time)