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

После завершение создания проекта необходима обязательная проверка на наличие ошибок, соответствие со стандартами и кроссбраузерности. Все это очень важно, поэтому этот процесс необходимо систематизировать и упорядочить. Когда такая шпаргалка под рукой — трудно упускать какие-либо детали. Для удобности разделим алгоритм проверки на несколько этапов.

Шаг 1. Визуальная оценка

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

1. Сразу ищем явные косяки: не отображается картинка, едет верстка, потеря состыковки цветов и прочее.
2. Далее следует проверить совпадение конечного продукта с макетом — все ли нюансы дизайна были учтены.
3. После чего необходимо проверять выравнивание, все отступы должны быть одинаковы или пропорциональны. Это придает аккуратность и привлекательность сайту. Особое внимание нужно уделить формам.
4. Следующая проверка заключается в поведении ресурса при разных разрешениях — показатель адаптивной верстки. Разрешение можно изменять через масштабирование экрана браузера или с помощью инструментов веб-панели браузера:
   • не должно быть никаких изломов;
   • отсутствие скроллов при изменении разрешения;
   • фон должен быть цельным при больших размерах экрана.
5. Далее идет проверка ресайза текстового поля для сообщений (тег textarea). Изменение его размеров не должно кардинально изменять расположение элементов на странице.
6. Проверка подсветки полей при определении для них фокуса.
7. Должна быть обязательная подсветка полей при неправильном их заполнении.

Шаг 2. Взаимодействие ресурса с пользователем.

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

1. Возможность выделения и копирования контента.
2. Проверка кликабельности активных элементов и правильность их работы (кнопки и ссылки).
3. Можно ли переопределить фокус для поля при клике мышкой в нем (или при использовании горячих клавиш).
4. Проверка внешнего вида курсора при наведении на разные элементы по типу и назначению. Внешний вид курсора управляется через свойство cursor. При наведении на текст или поля формы указатель мыши должен выглядеть как курсор, при ресайзе или наведении на кнопки/ссылки в форме руки, а для остальных случаев — в стандартном виде.
5. Для всех активных элементов должна быть предусмотрена ответная реакция на наведение.
6. Нажатие на содержимое тега label должен присваивать фокус соответствующему полю.
7. Обязательное наличие атрибутов title у элементов с не явным назначением или если объект несет какой-либо логический смысл.
8. Обязательное наличие кликабельного логотипа, который переносит пользователя на главную страницу.
9. Проверка особенности распечатки страницы, если это было предусмотрено в техническом задании.

Шаг 3. Реакция контейнеров на добавление разного объема контента

Браузер изменять не рекомендуется.

1. Используя рыбный текст, проверяем, как растягиваются разные блоки, в которых будет размещаться контент. Количество контента не должно ломать верстку.
2. Проводится обязательная проверка по шаблону с использованием реальной информации.

Шаг 4. Согласование со спецификациями

Самый надежный способ проверки кода на соответствие с общепринятыми стандартами — официальный ресурс W3C.

1. После проверки не должно быть никаких сообщений об ошибках в окне валидатора. Исключением могут послужить те случаи, когда на ошибку верстальщик идет осознанно и у него есть на это весомые причины.
2. Для кода CSS важно, чтобы правильно использовался синтаксис обращений.
3. Нужно проверить таблицу стилей на наличие хаков — их нужно выносить отдельными документами.
4. Наладить корректную микроразметку.

Шаг 5. Ошибка 404

Нужно удостоверится, что на сайте не возникает ошибок 404.

Шаг 6. Javascript

1. Проверка кода на наличие ошибок, что приводит к некорректному коду.
2. Проверить работу Javascript на соответствие с поставленными задачами, его функциональность.
3. В коде скрипта не допускается наличие console.log().

Шаг 7. Проверка кода

1. Соблюдение требований технического задания для кода.
2. Устранить закомментированный код из всех его носителей.

Шаг 8. Показатели кроссбраузерности

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

• Визуализация кода.
• Взаимодействие ресурса с пользователем.
• Функциональные возможности в соответствии с требованиями заказчика.

В дополнение к этим пунктам для IE нужно проверить:

• Масштабируемость.
• Реакция на разные разрешения.
• Фокусирование необходимых блоков.
• Отсутствие ошибок при использовании js-кода.

Отдельно для работы ресурса на планшетах нужно изучить:

• Работу при альбомной ориентации
• Взаимодействие ресурса с пользователем в условиях работы планшета.