Сайт открывают с телефона, планшета, ноутбука и большого монитора, и везде он должен быть удобным. Этот чек-лист помогает поймать типичные ошибки до того, как их увидят клиенты.
Сетка и размеры
- Проверены промежуточные ширины, а не только «айфон» и «ноутбук»: узкий телефон, планшет в обеих ориентациях, небольшой ноутбук, широкий монитор.
- Ни на одной странице нет горизонтальной прокрутки. Частые виновники — широкие таблицы, длинные ссылки, встроенные видео и карты.
- Широкие таблицы прокручиваются внутри своего блока или перестраиваются в карточки.
- Контент не прилипает к краям экрана, по бокам есть поля.
Текст
- Основной текст читается без увеличения.
- Длинные заголовки аккуратно переносятся и не вылезают за край.
- На широком экране строки не растягиваются во всю ширину: такой текст неудобно читать.
Управление пальцем
- Кнопки и ссылки достаточно крупные, между ними есть расстояние.
- Всё, что на компьютере раскрывается при наведении мыши, на телефоне работает по нажатию.
- У полей форм правильный тип: для телефона открывается цифровая клавиатура, для почты клавиатура с символом @.
- Меню открывается и закрывается предсказуемо и не перекрывает содержимое без возможности его закрыть.
Картинки и медиа
- Изображения масштабируются и не обрезаются там, где важна их часть: лица, товар, текст на баннере.
- На телефон уходят картинки меньшего размера, а не те же, что для большого экрана.
- Видео не включается само со звуком.
Особенности устройств
- Учтены вырезы экрана и системные панели: кнопки внизу не прячутся под полосой жестов.
- Блоки высотой «на весь экран» учитывают меняющуюся адресную строку мобильных браузеров.
- Закреплённые шапки и плашки не занимают половину экрана телефона.
- Всплывающие окна можно закрыть на маленьком экране: крестик не уезжает за край.
Как проверять
Режим устройств в браузере на компьютере — хорошее начало, но не замена настоящим телефонам. Откройте сайт на iPhone и на Android, в разных браузерах, через мобильный интернет, а не только через офисный Wi-Fi. Пройдите ключевые сценарии целиком: найти товар, оставить заявку, оплатить. Именно там всплывают ошибки, которых не видно в эмуляторе.
Примеры адаптивных сайтов, которые мы сделали, есть в портфолио.