Checklist для тестирования верстки
  1. Кроссбраузерность (Crossbrowser)
  2. Адаптивность (Adaptability)
  3. Поведение элементов: кликабельность, открытие / закрытие, hover эффект, фокус в поле, ввод и удаление данных.
  4. Фавикон (favicon)
  5. Контент и его локализация
  6. Курсоры (Cursor)
  7. Ошибки js в консоли.
  8. Валидация html кода с помощью W3C.
  9. Speed insight.
Кроссбраузерность
Кроссбраузерное тестирование - проверка корректного отображения веб-приложения в различных браузерах.
На сегодняшний день существует большое количество разных браузеров и устройств, при помощи которых посетитель просматривает сайты. Проблема в том, что в них один и тот же сайт может отображаться по-разному. Одно и то же свойство CSS может поддерживаться одним браузером и не работать в другом, особенно это касается новейшей спецификации.
Основные пункты тестирования: цвет, шрифты, макет, графические изображения и динамические элементы и JavaScript.
Основные браузеры: Chrome, Opera, Safari, Internet Explorer, IE, Mozilla Firefox.
Адаптивность. Сервисы для тестирования адаптивности
Адаптивность сайта — это возможность сайта правильно отображаться на разных устройствах с различными характеристиками. Адаптивный веб-сайт создан с использованием верстки с гибким макетом, который подстраивается под размеры экрана устройства. Благодаря адаптивной верстке, веб-сайт будет отлично выглядеть и хорошо работать как на настольном компьютере (или ноутбуке), так и на планшете, и в браузере мобильного телефона.

Преимущества мобильного адаптивного дизайна
  • любой пользователь на любом устройстве будет иметь наилучшие возможности взаимодействия с контентом на сайте.
  • улучшение контента. Как представитель бизнеса ,вы сможете убедиться, что те, кто использует мобильное устройство, видят всю важную информацию.
  • благодаря особенностям алгоритма Google, адаптивный веб-дизайн повышает видимость сайта в поисковых системах, поскольку он удобен для просмотра на мобильных устройствах. Сайт с качественным представлением контента на мобильном устройстве будет находиться в результатах поиска выше, чем сайт, хорошо отображающий контент только на десктопах.
Самые важные разрешения экрана, при проверке адаптивности

  • 320 px — Мобильные устройства (портретная ориентация);
  • 480 px — Мобильные устройства (альбомная ориентация);
  • 600 px — Небольшие планшеты;
  • 768 px — Планшеты (портретная ориентация);
  • 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
  • 1200 px и более — PC.


Сервисы, которые можно использовать для проверки адаптивности:
WEB

  • https://bluetree.ai/ - возможность посмотреть отображение сайта на разлизных устройствах
  • http://www.responsinator.com/ - этот сервис показывает как выглядит сайт на разных разрешениях
  • http://iloveadaptive.com/ - этот сервис показывает как выглядит сайт на разных разрешениях

Dev tools:elements
Расширения для браузера
  • Responsive Web Design Tester
  • Window Resizer
Поведение элементов: кликабельность, открытие закрытие, hover эффект
Кликабельность элементов сайта
Элементы, на которые интуитивно можно/нужно кликнуть, являются кликабельными.
Кликабельные элементы:
  • кнопка (button)
  • бургер меню (burger menu)
  • лупа (loupe)
  • переключатели (switch)
  • checkbox / radiobutton
  • якорь (anchor)
  • ползунок
  • иконки (icons)
  • ссылки

Размер кликабельной области должен быть не менее 44*44 пикселя.

Открытие и закрытие элементов: если есть возможность открыть какой-то элемент (форму, модальное окно, slider etc.) то для него обязательно должна быть реализована возможность для закрытия элемента.

Hover эффект - изменение состояния элемента, при наведение на нее курсором мыши.

Фокус в поле- сам фокус часто используется в качестве сигнала пользователю, что элемент готов к работе.

Ввод и удаление данных - любой вводимый текст должен быть удален при удалении различными способами.


Фавиконы - это в дословном переводе с англ. «значок для избранного» (FAVoritesICON). Обычно фавикон для сайта содержит логотип, первую букву названия компании или же любое другое изображение, которое соответствует особенностям бизнеса. Главное — чтобы эти элементы органично вписывались в квадратную форму.
Классический размер фавикона составляет 16х16 пикселей. Поэтому стоит обязательно проверить, как ваш значок выглядит в таком маленьком разрешении.
Контент и его локализация
Локализация подразумевает поиск эквивалентных терминов, идиом или выражений на замену тем, которые используются на сайте. Часто также приходится менять некоторые ссылки, изображения или другой контент, который может показаться локально неактуальным, а в некоторых случаях и оскорбительным. Контент страницы, должен соответствовать стране на рынке которого будет работать ваш продукт.
Курсоры
Какие бывают курсоры
default
move - движение элемента
text - редактирование текста
wait - ожидание
pointer - курсор в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку
Ошибки js в консоли
Ошибка - обычно это синтаксическая ошибка, препятствующая компиляции программы.
Предупреждение - обычно позволяет программе скомпилироваться, но предупреждает о плохом коде и указывает на недостатки проектирования.
Сообщение - очень похоже на предупреждение, используется гораздо реже.
Валидация html кода с помощью W3C
Валидный HTML-код, валидная разметка — это HTML-код, который написан в соответствии с определёнными стандартами. Их разработал Консорциум Всемирной Паутины — World Wide Web Consortium (W3C).
Валидность кода определяет то, как будет выглядеть страница или веб-приложение в разных браузерах и на различных операционных платформах. Валидный код по большей части во многих браузерах отображается предсказуемо. Он загружается быстрее невалидного. Валидность так же влияет на восприятие страниц и сайтов поисковыми системами.
Самым распростарненным валидатором для проверки HTML-кода является W3C (World Wide Web Consortium).  Почему стои использовать именно єтот валидатор? W3C (World Wide Web Consortium) – это группа, которая разрабатывает все стандарты для веб-технологий, поэтому имеет смысл использовать только данный валидатор для проверки правильности вашего HTML.

Данный валидатор призван проверить, насколько сайт соответствует единым стандартам напсиания HTML-кода и, при обнаружении неточностей, указывает на них. Если игнорировать данный анализ, то может оказаться, что плохой трафик, проблемы с продвижением возникают из-за банальных неточностей кода. Бывает достаточно одной опечатки, неправильно закрытой скобки, чтобы сайт неверно погружался в браузере. А, как известно, проблемы с загрузкой сайта или неправильным его отображением приводят к тому, что пользователи быстро покидают эту веб-страницу.
Существует ряд причин, по которым следует проверить страницу.
Во-первых, это помогает при определении браузерной совместимости.
Да, можно создать страницу, которая идеально отображается на любимом браузере даже при наличии грубых ошибок. Но вот эти самые недочеты не позволят ей нормально отобразиться на другом браузере. Также более поздние, усовершенствованные версии все того же любимого браузера могут исказить картину и привести к тому, что сайт уже будет отображаться некорректно. Сегодня разработчики браузеров ориентируются на единые стандарты HTML и CSS, поэтому валидатор W3C – это своеобразная страховка от будущих версий браузеров, которые могут находить ошибки и вступать с ними в конфликт. При наличии ошибок браузеры пытаются компенсировать это различными способами. Одни стараются игнорировать, другие пытаются как бы «доработать» недочеты, пытаясь представить, что именно хотел сказать разработчик. Как правило, это негативно сказывается на скорости загрузки и отображении ресурса. Это касается и работы алгоритмов поисковиков при индексации страницы .При обнаружении недочетов в коде, одни поисковики пытаются обойти их стороной, другие полностью останавливают работу.В результате, целые страницы остаются непроиндексированными. Самый безопасный способ убедиться, что поисковые системы видят страницу в том виде, в котором она была задумана — это представить им страницу без ошибок. И помочь добиться такого совершенства призваны различные сервисы по онлайн-проверке html-кода
Speed insight
Скорость загрузки сайта относится к признакам его успешной работы - чем быстрее загружаются страницы веб-ресурса, тем ниже будет показатель отказов. Хотя прямой зависимости позиций от этого фактора нет, косвенно он влияет на положение ресурса в поисковой выдаче, его посещаемость и конверсию. Если сайт работает медленно, у пользователей может не хватить терпения для просмотра большого количества страниц, соответственно и конверсия на таком ресурсе будет ниже.
Инструмент PageSpeed Insights, представленный компанией Google в 2011 году, анализирует скорость загрузки сайта и предлагает рекомендации для ускорения этого процесса. Очень важно понимать, что это всего лишь рекомендации! 
Как работает Google PageSpeed Insights?
По результатам анализа Google PageSpeed Insights дает характеристику параметров скорости сайта при загрузке на компьютерах и на мобильных устройствах. Для оценки скорости отображения веб-страницы сервис использует 100-балльную шкалу:
  • 90 баллов или выше означает быструю загрузку,
  • от 50 до 90 - среднюю,
  • ниже 50 - медленную.
В процессе анализа Google PageSpeed Insights выявляет причины низкой скорости загрузки страниц ресурса и подсказывает, что нужно сделать для устранения этих проблем

Домашнее задание:

  • Выполнить все проверки которые указаны в checklist для сайта https://kungfuqa.com/html
  • Составить bug report по найденным ошибкам.
Пример чек листа и баг репортаж можно найти во View files

Домашнее задание поместить в файл и положить в папку с вашим именем, нажав на Upload file ниже.