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

1. Точки излома соответствуют типу устройства (телефон, планшет). Сайт корректно перестраивается под заданные разрешения:
   1. Элемент ненумерованного списка. Элементы не накладываются друг на друга, перестраиваются друг под друга в том же порядке, что и на десктопе (например, фильтр не уходит под список элементов).
   2. Элемент нумерованного списка. Элемент ненумерованного списка для планшетов — в ширине 2 колонки из трех (8 из 12).
   3. Элемент нумерованного списка. Элемент ненумерованного списка для мобильных — в ширине 1 колонка (4 из 12).
2. Верстка не ломается на точках излома. Адаптивные стили описываются для интервалов ширины / высоты экрана в пикселях. Иногда эти интервалы с наложением, например, от 320px до 768px и от 768px до 1024px. В этом случае при попадании на точку в 768px верстка может развалиться.
   1. Элемент нумерованного списка. Элемент ненумерованного списка Включить режим эмуляции: нажать F12 и выбрать режим эмуляции мобильных устройств.
   2. Элемент нумерованного списка. Включаем отображение точек излома: кликаем по иконке меню в правом верхнем углу и выбираем «Show media queries».
   3. Элемент нумерованного списка. Проверяем все точки излома. Страница не должна разваливаться, ломаться ни в одной точке излома.
3. Проверка на наличие неоптимизированных и битых изображений.
   1. Открыть браузер в режиме эмуляции устройства, выставить нужное разрешение.
   2. В панели разработчика выбрать вкладку Network, отфильтровать изображения.
   3. Загрузить нужную страницу (предварительно очистив кеш!!!)
   4. Посмотреть загруженные картинки, проверить, что их ширина соответствует ширине устройства, а размер не превышает 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/search/mobile-sites/mobile-seo/common-mistakes

Макет всех страниц сайта (вёрстка)

---