Чек-лист тестирования адаптивной вёрстки

Верстка

Тестирование верстки нужно проводить в статике после завершения задачи по верстке и на готовом сайте после завершения разработки.

Если в ТЗ не оговорено обратное, то вся верстка тестируется в двух последних версиях всех популярных браузеров, а также на мобильных устройствах(телефон, планшет). Желательно и iOS, и Android, хотя допускается, что единомоментно будет сложно найти и то, и другое. Допустимо тестировать адаптивность с помощью инструментов разработчика в десктопных версиях браузеров.

• Должен быть исполнен стандарт верстки сайтов.
• Открыть верстку во всех оговоренных браузерах, и удостовериться, что работают все динамические элементы и нет явных ошибок отображения. В том случае, если верстка делалась по макету, проверить на соответствие без «ловли пикселей».
• Тестировать адаптивность, искать ошибки отображения, проверять доступность навигации и всех видимых элементов управления для пользователя с мобильного устройства.
• Отсутствие горизонтального скролла.
• Установлен DOCTYPE.
• Проверить наличие и правильность meta viewport(минимально width=device-width, initial-scale=1.0, но в отдельных случаях могут быть дополнения).
• Google Page Speed — на верстке не должно быть ошибок совсем, на готовом сайте допускаются небольшие ошибки, но сайт должен оставаться в зеленой зоне и для мобильных, и для десктопов.
• HTML-валидация, но без фанатизма. Оправданные ошибки допускаются.
• https://validator.w3.org/i18n-checker/.
• Нет ошибок JS в консоли браузера.
• Корректная работа при вбивании реального текста в любые текстовые блоки, заголовки, списки, таблицы.
• Все ссылки легко различимы и имеют заметное focus-состояние.
• Отсутствие ошибок отображения при увеличенном шрифте.
• HTML5 формы.
• Удаление необязательных блоков не приводит к ошибкам отображения. Например, в дизайне предусмотрено промо-изображение на главной на всю ширину экрана, удаление такого изображения не должно сломать верстку.
• Элементы, реагирующие на нажатие, реагируют и на наведение курсора.
• Наличие версии для печати. Она должна быть корректна, читабельна и информативна.
• Готовый сайт показать дизайнеру для тестирования красоты, что в процессе ничего не испортили и не потеряли. (Важно!!! делается только на этапе открытия нового сайта)

---