«Чек-лист верстки»:
как избавить себя
от правок
и угодить заказчику

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

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

1. Целостность верстки, соответствие техническому заданию.

Должны быть сверстаны все страницы, которые есть в макете и все скрытые слои, модальные окна, формы.

2. Внешне сайт выглядит как макет.

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

3. Все интерактивные элементы работают в соответствии с техническим заданием:

ссылки ведут куда надо, модальные окна всплывают, форма отправляется. Конечно, в том случае, если это была ваша работа, а не программиста. В противном случае убедитесь, что у модалок прописаны стили класса, отвечающего за его появление, а у формы есть атрибуты method и action.

4. Интерактивные элементы имеют состояния при наведении, клике и выделении (:hover, :active и :focus).

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

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

Сайт должен одинаково выглядеть и одинаково работать в разных браузерах. В каких именно — обычно обговаривается в техзадании. Иногда заказчик требует поддержку старых версий IE, иногда не требует IE и Edge вообще. Но обычный набор: последние версии Google Chrome, Mozilla Firefox, Opera, Safari, Microsoft Edge, Internet Explorer.

6. Адаптивность верстки.

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

Теперь проверим те детали, которые не видно невооруженным взглядом.

1. Валидность.

Верстка должна проходить проверку валидатора (https://validator.w3.org/) Валидатор не должен показывать критических ошибок, но предупреждения допустимы.

2. Семантичность верстки.

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

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

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

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

4. Единообразие и аккуратность кода.

Код должен быть написан или отформатирован так, чтобы его было легко читать и понимать. Возможно, ваш проект когда-нибудь будет дорабатывать другой разработчик. Надо писать так, чтобы ему было легко разобраться в коде. Структура проекта — дело вкуса и привычки. Но хороший тон - давать понятные названия папкам и файлам. Также хорошая практика - оставлять комментарии в html, css и javascript файлах с указаниями, за что отвечает то или иной кусок кода.Также в вёрстке не должны оставаться закомментированные и неиспользуемые куски кода, лишние файлы, старые версии файлов.

5. Сайт должен корректно работать при добавлении текстового контента. Верстка должна быть надежна.

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

6. Базовая работоспособность сайта должна сохраняться при выключенном javascript.

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

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

Убедитесь, что:

• скрипты css подключены в <head>, а javascript - в конце html файла, перед закрывающим тегом </body>
  
  
• для картинок выбран верный формат, и они сжаты. Если изображений много, и они должны быть в хорошем качестве, целесообразно использовать для их загрузки библиотеку LazyLoad.
  
  
• css и javascript файлы, если их было несколько при разработке, объединены в файл и сжаты. Если javascript используется не на каждой странице, то к этим страницам его подключать не надо.
  

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

1. В <head> прописан DOCTYPE: HTML5 и кодировка UTF-8.

2. Логотип компании должен быть в формате SVG и в виде ссылки.

3. Изображения должны масштабироваться в зависимости от размера окна (max-width:100%; height:auto;).

4. Телефон размечен с помощью ссылки с атрибутом tel

5. Все внешние ссылки должны открываться в новом окне.

6. В формах label и input/select/checkbox должны быть связаны между собой. По клику на описание поля формы курсор должен становиться внутрь поля для ввода. Также должны быть указаны правильные типы для инпутов: type=«email/url/tel». При работе с формой с телефона, в зависимости от типа инпута, должна показываться разная клавиатура: обычная или цифровая.

7. Должна быть предусмотрена валидация формы: при попытке отправить пустую или неверно заполненную форму должны появляться уведомления о необходимости заполнить поля.