Чек-лист тестирования адаптивной вёрстки

Навигация

Точки излома соответствуют типу устройства (телефон, планшет). Сайт корректно перестраивается под заданные разрешения:
1. Элемент ненумерованного списка. Элементы не накладываются друг на друга, перестраиваются друг под друга в том же порядке, что и на десктопе (например, фильтр не уходит под список элементов).
2. Элемент нумерованного списка. Элемент ненумерованного списка для планшетов - в ширине 2 колонки из трех (8 из 12).
3. Элемент нумерованного списка. Элемент ненумерованного списка для мобильных - в ширине 1 колонка (4 из 12).
Верстка не ломается на точках излома. Адаптивные стили описываются для интервалов ширины / высоты экрана в пикселях. Иногда эти интервалы с наложением, например, от 320px до 768px и от 768px до 1024px. В этом случае при попадании на точку в 768px верстка может развалиться.
1. Элемент нумерованного списка. Элемент ненумерованного списка Включить режим эмуляции: нажать F12 и выбрать режим эмуляции мобильных устройств [http://joxi.ru/Vm6v4j6SDjEDnm].
2. Элемент нумерованного списка. Включаем отображение точек излома: кликаем по иконке меню в правом верхнем углу и выбираем ««Show media queries»». [http://joxi.ru/8AnGb1xij7gjLr].
3. Элемент нумерованного списка. Проверяем все точки излома [http://joxi.ru/gmv3lM8CLvJqw2]. Страница не должна разваливаться, ломаться ни в одной точке излома.
Проверка на наличие неоптимизированных и битых изображений.
1. Открыть браузер в режиме эмуляции устройства, выставить нужное разрешение http://joxi.ru/Vm6v4j6SDjE30m
2. В панели разработчика выбрать вкладку Network, отфильтровать изображения http://joxi.ru/vAWV643S138Bb2
3. Загрузить нужную страницу (предварительно очистив кеш!!!)
4. Посмотреть загруженные картинки http://joxi.ru/Y2L8gyXF9xaMK2 , проверить, что их ширина соответствует ширине устройства, а размер не превышает 400Kb
5. Провести ресайз к более высокому разрешению, посмотреть, что подгрузились новые картинки.
Шрифты должны адаптироваться под размер экрана. Любой текст должен помещаться в экран (не выходить за пределы) и быть легко читаемым на данном устройстве.
Валидация форм. Ошибки валидации не должны перекрывать текущие поля или выходить за пределы экрана.
Всплывающие элементы скрываются по tap'у мимо. Меню и формы скрываются, если сделан tap мимо области всплывающего элемента.
Пролистывание слайдера. Слайдер должен реагировать на swipe на тач-экране.
Табличное представление информации. Таблицы должны быть удобно читаемы на устройстве любого размера. Есть три основных направления работы с таблицами данных в адаптивном интерфейсе:
1. Фиксированный размер таблицы, горизонтальный скролл для нее. В зависимости от типа таблицы, первый столбец может фиксироваться.
2. Уменьшается количество данных для вывода (только основное). Часть данных скрывается спойлером и/или компонуется построчно.
3. Горизонтальная таблица компонуется для вертикального просмотра: строка заголовков становится первым столбцом. В такой реализации таблица может быть со скроллом или сплошной вниз, в зависимости от необходимости сравнивать данные. Решение для каждой конкретной таблицы может быть уникальным. Примеры:
Встроенное содержимое (iframe). Встроенное содержимое должно адаптироваться под размер экрана. Например: на десктопе встроенное видео может иметь фиксированный размер 800х600, но на адаптиве уменьшаться под размер экрана устройства. Пример http://webformyself.com/zastavte-vstroennyj-kontent-rabotat-v-adaptivnom-dizajne/
Баннеры. Если на странице используются баннеры или всплывающие окна с предупреждениями, рекомендуется выводить их в компактном виде в верхней или нижней части экрана https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes/avoid-interstitials?hl=r

Поделиться в соц. сетях: