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