logo

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

  1. Точки излома соответствуют типу устройства (телефон, планшет). Сайт корректно перестраивается под заданные разрешения:
    1. Элемент ненумерованного списка. Элементы не накладываются друг на друга, перестраиваются друг под друга в том же порядке, что и на десктопе (например, фильтр не уходит под список элементов).
    2. Элемент нумерованного списка. Элемент ненумерованного списка для планшетов - в ширине 2 колонки из трех (8 из 12).
    3. Элемент нумерованного списка. Элемент ненумерованного списка для мобильных - в ширине 1 колонка (4 из 12).
  2. Верстка не ломается на точках излома. Адаптивные стили описываются для интервалов ширины / высоты экрана в пикселях. Иногда эти интервалы с наложением, например, от 320px до 768px и от 768px до 1024px. В этом случае при попадании на точку в 768px верстка может развалиться.
    1. Элемент нумерованного списка. Элемент ненумерованного списка Включить режим эмуляции: нажать F12 и выбрать режим эмуляции мобильных устройств [http://joxi.ru/Vm6v4j6SDjEDnm].
    2. Элемент нумерованного списка. Включаем отображение точек излома: кликаем по иконке меню в правом верхнем углу и выбираем ««Show media queries»». [http://joxi.ru/8AnGb1xij7gjLr].
    3. Элемент нумерованного списка. Проверяем все точки излома [http://joxi.ru/gmv3lM8CLvJqw2]. Страница не должна разваливаться, ломаться ни в одной точке излома.
  3. Проверка на наличие неоптимизированных и битых изображений.
    1. Открыть браузер в режиме эмуляции устройства, выставить нужное разрешение http://joxi.ru/Vm6v4j6SDjE30m
    2. В панели разработчика выбрать вкладку Network, отфильтровать изображения http://joxi.ru/vAWV643S138Bb2
    3. Загрузить нужную страницу (предварительно очистив кеш!!!)
    4. Посмотреть загруженные картинки http://joxi.ru/Y2L8gyXF9xaMK2 , проверить, что их ширина соответствует ширине устройства, а размер не превышает 400Kb
    5. Провести ресайз к более высокому разрешению, посмотреть, что подгрузились новые картинки.
  4. Шрифты должны адаптироваться под размер экрана. Любой текст должен помещаться в экран (не выходить за пределы) и быть легко читаемым на данном устройстве.
  5. Валидация форм. Ошибки валидации не должны перекрывать текущие поля или выходить за пределы экрана.
  6. Всплывающие элементы скрываются по tap'у мимо. Меню и формы скрываются, если сделан tap мимо области всплывающего элемента.
  7. Пролистывание слайдера. Слайдер должен реагировать на swipe на тач-экране.
  8. Табличное представление информации. Таблицы должны быть удобно читаемы на устройстве любого размера. Есть три основных направления работы с таблицами данных в адаптивном интерфейсе:
    1. Фиксированный размер таблицы, горизонтальный скролл для нее. В зависимости от типа таблицы, первый столбец может фиксироваться.
    2. Уменьшается количество данных для вывода (только основное). Часть данных скрывается спойлером и/или компонуется построчно.
    3. Горизонтальная таблица компонуется для вертикального просмотра: строка заголовков становится первым столбцом. В такой реализации таблица может быть со скроллом или сплошной вниз, в зависимости от необходимости сравнивать данные. Решение для каждой конкретной таблицы может быть уникальным. Примеры:
      1. http://habrahabr.ru/post/149742/
      2. https://css-tricks.com/responsive-data-tables/
      3. http://helix.su/jquery/838-footable-adaptivnye-html-tablicy.html
      4. http://elvery.net/demo/responsive-tables/
      5. http://codepen.io/SitePoint/pen/raXdwZ
      6. http://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions/
  9. Встроенное содержимое (iframe). Встроенное содержимое должно адаптироваться под размер экрана. Например: на десктопе встроенное видео может иметь фиксированный размер 800х600, но на адаптиве уменьшаться под размер экрана устройства. Пример http://webformyself.com/zastavte-vstroennyj-kontent-rabotat-v-adaptivnom-dizajne/
  10. Баннеры. Если на странице используются баннеры или всплывающие окна с предупреждениями, рекомендуется выводить их в компактном виде в верхней или нижней части экрана https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes/avoid-interstitials?hl=r

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