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

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

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

В среднем, такое тестирование занимает от 15 до 30 минут на одну страницу.

Картинка в браузере должна соответствовать макету.

Проверка может быть сделана с помощью расширения PerfectPixel для Chrome:

Допустимое расхождение с макетом расстояний между объектами на странице — 1pt. Допустимы незначительные отличия, связанные с ошибками в макете (различные отступы или размеры у однотипных элементов, погрешности в цветах).

Сайт должен проверяться с включенным блокировщиком рекламы. Элементы сайта не должны блокироваться.

Проверка осуществляется внутренним продуктом студии Stress Test. Работа продукта заключается в подмене всех видимых текстов на случайные:

Страница должна быть готова для отправки в соц. сети: должны быть правильно прописаны все элементы Opengraph: заголовок, описание, изображение, ссылка и прочее.

Для проверки можно использовать дебагер Meta:

На сайте должны корректно работать переходы между страницами с помощью истории браузера (стрелки влево и вправо рядом с адресной строкой).

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

Браузеры для проверки

Текущая и предыдущая версия следующих браузеров:

Устройства для проверки

⚠ Пользоваться с осторожностью. Использовать в случае незначительных обновлений в ранее сверстанных страницах.

В среднем, такое тестирование занимает от 5 до 10 минут на одну страницу.

Дизайн

Картинка в браузере должна соответствовать макету.

Проверка может быть сделана с помощью расширения PerfectPixel для Chrome:

Допустимое расхождение с макетом расстояний между объектами на странице — 1pt. Допустимы незначительные отличия, связанные с ошибками в макете (различные отступы или размеры у однотипных элементов, погрешности в цветах).

Текущая и предыдущая версия следующих браузеров: