Как провести простое тестирование верстки

Подпишись на нашу рассылку

Категории: , ,

testirovanie-verstki

В этой статье мы рассмотрим основные критерии тестирования верстки сайта, которую сможет провести любой пользователь сайта.

Для начала вспомним определение главного термина. Верстка сайта – это html-код, написанный  в соответствии с заданными параметрами, макетом. Элементы кода — текстовые, графические и прочие  — должны сохранять корректный вывод и функциональность на современных устройствах, то есть кроссбраузерность, адаптивность, доступность.

html-код

Существует весьма длинный чек-лист для тестирования верстки ресурсов, состоящий почти из 40 пунктов, но сегодня рассмотрим те, которые не требуют специальных знаний.

В процессе тестирования используем браузер, которым чаще всего пользуемся сами — львиная доля приходится на Firefox и Chrome. Открываем наш тестируемый ресурс и наблюдаем визуально, нет ли сломанных блоков на странице, поплывших линий. Если есть исходный макет, то сравниваем с исходной версией и находим десять отличий, если таковые имеются 🙂

Далее следует самый важный этап — корректная работа ресурса на разных экранах с разным разрешением. Проверяем сохранение форм и функциональность при уменьшении или увеличении рабочего поля. Такую проверку можно сделать на живых устройствах и на эмуляторах. В Firefox воспользуйтесь “Меню” – “Веб-разработка” – ”Адаптивный дизайн” или же просто нажмите F12, после чего появится консоль, где также можно будет выбрать варианты адаптивного дизайна.

Адаптивный дизайн

Пробуем основные варианты, следим за корректным выводом и функциональностью блоков. Нежелательно появление горизонтального скроллинга при уменьшении размеров устройства:

Тестирование на адаптивность

Меню сайта

Также рекомендуем прочитать статью про 5 простых шагов быстрой индексации сайта.

Переходим к проверке доступности элементов ресурса.

Элементы на странице должны выполнять функции, для которых они предназначены. Все, что реагирует на наши действия, должно корректно работать в соответствии с требованиями к блоку (что значит – не должно просто существовать и заполнять пространство 🙂 ). Таким образом, формы (поля ввода), ссылки, картинки и другие элементы должны заполняться, быть кликабельными  — то есть доступными!

Оперируя мышкой, вы точно можете определить, что работает, а что “поломано”. Появилась лапка вместо стрелки, значит можно кликнуть. Появился  курсор — можно заполнить или скопировать текст. Навели на сомнительную иконку — выскочила подсказка. Работает! Идем дальше 🙂

На сайте не должно быть страниц с ошибкой 404!

404 ошибка

Архиважно для любого сайта – быть по-максимуму кроссбраузерным, так как на поле деятельности появилось множество всевозможных ресурсов, которые требуют от наших сайтов универсальности. Ниже приведен список ныне действующих браузеров со сравнительной характеристикой востребованности каждого. Эта информация поможет верстальщику понять, что важно при верстке продукта, чтобы заказчик и конечный потребитель были довольны 🙂

Тестирование кроссбраузерности

Категории: , ,

Смотрите так же:

,,

Структура сайта – пример, как составить mindmap сайта

Всем привет! Сегодня расскажем, как правильно составить MindMap сайта. С помощью такой “карты разума” или интеллектуальной карты вы легко систематизируете в виде схемы какое угодно понятие. Что касается нас, мы используем mindmap для

Читать подробнее

,,,

10 практических советов: что реально увеличит продажи

О том, как увеличить продажи в интернете – писал каждый, и вы наверняка тоже: теория «ни о чём», просроченные рекомендации, неактуальные примеры, работающие для 1-2 сфер. А что делать нормальному бизнесу с понятным

Читать подробнее

Переходим на баннеры по технологии HTML5. Руководство к действию.

Главная задумка баннеров, созданных по технологии HTML5 – привлечь больше внимания пользователей к рекламе вашего продукта. За счет чего? За счет того, что такие рекламные баннеры – яркие, живые, интерактивные и вызывают неподдельный

Читать подробнее

Как с помощью простых рекомендаций можно повысить конверсию на вашем сайте

В данном материале мы решили описать несколько рекомендаций на примере реально существующего сайта, следуя которым можно существенно увеличить показатель конверсии, а также другие качественные метрики любого ресурса. Работа над дизайном (юзабилити составляющая) Поскольку

Читать подробнее

Комментарии:
telegram
Обратная связь
Свяжитесь с нами
Реквизиты

ИНН: 772578776588
ОГРН: 315774600103615
ОКПО: 0194004627
ОКТМО: 45914000000
ОКАТО: 45296559000
р/с: 40802810300310000244
в АКБ «БАНК МОСКВЫ» (ОАО) отделение «Перовское»
к/с: 30101810500000000219
БИК: 044525219

Фактический адрес: г. Москва, шоссе Энтузиастов, дом 56, строение 26, офис 304

Юридический адрес: 115191, г. Москва, 4-й Рощинский проезд д.7/16