Далее следует самый важный этап — корректная работа ресурса на разных экранах с разным разрешением. Проверяем сохранение форм и функциональность при уменьшении или увеличении рабочего поля. Такую проверку можно сделать на живых устройствах и на эмуляторах. В Firefox воспользуйтесь “Меню” – “Веб-разработка” – ”Адаптивный дизайн” или же просто нажмите F12, после чего появится консоль, где также можно будет выбрать варианты адаптивного дизайна.
Пробуем основные варианты, следим за корректным выводом и функциональностью блоков. Нежелательно появление горизонтального скроллинга при уменьшении размеров устройства:
Переходим к проверке доступности элементов ресурса.
Элементы на странице должны выполнять функции, для которых они предназначены. Все, что реагирует на наши действия, должно корректно работать в соответствии с требованиями к блоку (что значит – не должно просто существовать и заполнять пространство 🙂 ). Таким образом, формы (поля ввода), ссылки, картинки и другие элементы должны заполняться, быть кликабельными — то есть доступными!
Оперируя мышкой, вы точно можете определить, что работает, а что “поломано”. Появилась лапка вместо стрелки, значит можно кликнуть. Появился курсор — можно заполнить или скопировать текст. Навели на сомнительную иконку — выскочила подсказка. Работает! Идем дальше 🙂
На сайте не должно быть страниц с ошибкой 404!
Архиважно для любого сайта – быть по-максимуму кроссбраузерным, так как на поле деятельности появилось множество всевозможных ресурсов, которые требуют от наших сайтов универсальности. Ниже приведен список ныне действующих браузеров со сравнительной характеристикой востребованности каждого. Эта информация поможет верстальщику понять, что важно при верстке продукта, чтобы заказчик и конечный потребитель были довольны 🙂
В этой статье мы рассмотрим основные критерии тестирования верстки сайта, которую сможет провести любой пользователь сайта.
Для начала вспомним определение главного термина. Верстка сайта – это html-код, написанный в соответствии с заданными параметрами, макетом. Элементы кода — текстовые, графические и прочие — должны сохранять корректный вывод и функциональность на современных устройствах, то есть кроссбраузерность, адаптивность, доступность.
Существует весьма длинный чек-лист для тестирования верстки ресурсов, состоящий почти из 40 пунктов, но сегодня рассмотрим те, которые не требуют специальных знаний.
В процессе тестирования используем браузер, которым чаще всего пользуемся сами — львиная доля приходится на Firefox и Chrome. Открываем наш тестируемый ресурс и наблюдаем визуально, нет ли сломанных блоков на странице, поплывших линий. Если есть исходный макет, то сравниваем с исходной версией и находим десять отличий, если таковые имеются 🙂
23 Окт 2024
220