Как проверять верстку сайта?

В этой статье мы разберём, как правильно проверять верстку сайта на примере нашей веб-студии, которая работает с 2010 года и реализовала более 500 проектов различной сложности.

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

Зачем вообще проверять верстку сайта?

На первый взгляд может возникнуть вопрос: зачем уделять внимание верстке, если сайт работает и приносит заявки?

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

Почему стоит проверять верстку:

• корректное отображение сайта на всех устройствах;

• повышение удобства для пользователей и, как следствие, конверсии;

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

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

Основные этапы проверки верстки

Мы используем три основных способа проверки верстки:

1. Визуальная проверка на браузерах

2. Тестирование на различных устройствах

3. Техническая проверка через валидаторы

1. Визуальная проверка

Визуальная проверка помогает обнаружить явные проблемы: «поехавшие» блоки, некорректные шрифты, наложение элементов.

Пример плохой верстки на сайте

Что нужно делать:

• открыть сайт в режиме инкогнито (чтобы сбросить кэш);

• использовать браузеры по умолчанию: Safari (macOS) и Chrome (Windows);

• при желании — дополнительно проверять в Opera, Mozilla и Microsoft Edge;

• постепенно изменять размеры окна браузера, чтобы увидеть, как верстка адаптируется к разным разрешениям;

• проверить визуально все ключевые страницы: главная, каталог, карточки товаров, страницы о компании и контактов.

Совет: фиксируйте все выявленные баги в документе и отправляйте программистам для исправления.

2. Проверка на различных устройствах

Следующий этап — тестирование на реальных устройствах:

• смартфоны iOS и Android;

• планшеты;

• ориентация экранов: альбомная и портретная.

Зачем: эмуляторы браузеров иногда «врут», и некоторые проблемы видны только на реальных устройствах.

Практический лайфхак: попросите друзей или коллег протестировать сайт на их устройствах и дать обратную связь.

3. Техническая проверка

Техническая проверка выявляет ошибки, которые не заметны визуально.

Инструмент: validator.w3.org (или любой другой HTML/CSS валидатор).

Как использовать:

• проверяйте каждую страницу отдельно;

• зеленые и желтые уведомления (Info и Warning) можно пропускать;

• первоочередное внимание — красные ошибки (Fatal / Error);

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

• достаточно минимизировать количество критических ошибок.

Старайтесь, чтобы были записи в основном статуса “Info”

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

Итог

Проверка верстки включает три уровня:

1. визуальный контроль на браузерах,

2. тестирование на устройствах,

3. техническая проверка через валидаторы.

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