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


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

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

Внешний вид и работоспособность сайта

1. Целостность верстки, соответствие техническому заданию. Должны быть сверстаны все страницы, которые есть в макете и все скрытые слои, модальные окна, формы.
2. Внешне сайт выглядит как макет. Присутствуют все картинки. Размеры элементов и блоков соответствуют макету. Если это обсуждалось с заказчиком, то сайт должен соответствовать макету с точностью до нескольких пикселей.
3. Подключены необходимые шрифты. Размеры, толщина и начертания шрифтов соответствуют макету. Также указаны правильные межстрочные расстояния.
4. Все интерактивные элементы работают в соответствии с техническим заданием: ссылки ведут куда надо, модальные окна всплывают, форма отправляется. Конечно, в том случае, если это была ваша работа, а не программиста. В противном случае убедитесь, что у модалок прописаны стили класса, отвечающего за его появление, а у формы есть атрибуты method и action.
5. Интерактивные элементы имеют состояния при наведении, клике и выделении (:hover, :active и :focus). У всех ссылок, кроме пунктов меню, должна быть реакция на :visited. Если состояния прописаны в макете или стайлгайде, они должны соответствовать замыслу дизайнера. Если они не были предусмотрены в дизайне, состояния остаются на усмотрение верстальщика. При взаимодействии с интерактивными элементами ни сам элемент, ни окружающие его блоки не меняют своего положения, если это не было предусмотрено в техническом задании.
6. Кроссбраузерность. Сайт должен одинаково выглядеть и одинаково работать в разных браузерах. В каких именно — обычно обговаривается в техзадании. Иногда заказчик требует поддержку старых версий IE, иногда не требует IE и Edge вообще. Но обычный набор: последние версии Google Chrome, Mozilla Firefox, Opera, Safari, Microsoft Edge, Internet Explorer.
7. Адаптивность верстки. Сайт должен нормально смотреться на самой разной ширине экрана: от самого маленького мобильного до широкоформатного десктопа. Внешний вид сайта при настолько отличающихся размерах может сильно различаться. Эти различия дизайнер отображает в макете. Работа верстальщика — сверстать так, чтобы сайт точно соответствовал дизайну в определенных промежутках размеров экрана. И не разваливался при любой ширине экрана.

Качество кода

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

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

Ещё больше о верстке можно узнать на нашем шестимесячном курсе «Профессия: Программист» Узнать подробности!