Тестирование верстки: как проверить – кроссбраузерность и не только

Тестирование верстки: как проверить – кроссбраузерность и не только

Узнаем, как протестировать вёрстку любого сайта…

Вы думаете, что вёрстка это только кроссбраузерность? Как бы не так! Вёрстка включает множество других элементов страницы, а не только кроссбраузерность.

Разберем, как проверить вёрстку и протестировать её работоспособность при помощи нескольких инструментов. Поехали!

Обязательно проверьте следующие моменты:

  • Нестандартные шрифты. Как ваш сайт выводит шрифты на Windows, Linux и MacOS? Если сайт использует редкие шрифты, обязательно проверьте, чтобы у всех пользователей даже без этих шрифтов сайт отображался корректно.
  • Отсутствие атрибута target на ссылках. Все URL на другие сайты желательно начинать с атрибута target со значением blank. То есть ссылка должна принять вид: target=»_blank».
  • Нарушен принцип Pixel Perfect-верстки. Допустимая погрешность – 5 пикселей. Этот момент удобнее всего проверять через PerfectPixel by WellDoneCode. Инструмент позволяет накладывать полупрозрачное изображение поверх HTML и выполнять сравнение между ними с точностью до пикселя. Очень удобно. 
  • Текстовое поле (оно же поле ввода текста с тегом textarea) должно сохранять настроенную вёрстку.
  • Кроссбраузерность. Проверяйте тем, чем умеете. Я люблю Browsershots.

Также нужно проверить следующие аспекты вёрстки:

  • Элементы на странице. Проверяйте, как они реагируют на наведение курсора и клик.
  • Логотип не слинкован. Если логотип кликабелен, проверяйте, что он ведёт на главную.
  • Разрешение. Проверяйте вёрстку даже на редких разрешениях. Особенно это актуально, если на главной присутствует большое изображение: оно не должно выводиться криво и на очень больших, и на маленьких экранах. Даже если сайт рассчитан только на десктоп, обязательно проверьте, как он выглядит на экране смартфона в стандартных разрешениях. Контент на странице должен быть читабельным.
  • Тег Label + элементы форм input и select должны быть обязательно связаны друг с другом
  • Формы. Оцените, как ведет себя переключение по клавише табуляции. Всё должно работать корректно.

Leave a Comment

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Ad Blocker Detected!

Advertisements fund this website. Please disable your adblocking software or whitelist our website.
Thank You!
МирДоступа
Яндекс.Метрика