Чек-лист интернет-магазина

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

Верстка

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

Если в ТЗ не оговорено обратное, то вся верстка тестируется в двух последних версиях всех популярных браузеров, а также на мобильных устройствах(телефон, планшет). Желательно и 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 формы.
  • Удаление необязательных блоков не приводит к ошибкам отображения. Например, в дизайне предусмотрено промо-изображение на главной на всю ширину экрана, удаление такого изображения не должно сломать верстку.
  • Элементы, реагирующие на нажатие, реагируют и на наведение курсора.
  • Наличие версии для печати. Она должна быть корректна, читабельна и информативна.
  • Готовый сайт показать дизайнеру для тестирования красоты, что в процессе ничего не испортили и не потеряли. (Важно!!! делается только на этапе открытия нового сайта)