Почему адаптив ломается не в макете
Адаптивность — это не «сжатая версия десктопа». Это отдельный набор решений: что показать, что скрыть, в каком порядке идти, чем заменить наведение мышью. Если эти решения не приняты, вёрстка формально подстраивается под ширину экрана, а пользоваться сайтом всё равно неудобно.
Ошибки почти всегда одни и те же, потому что возникают из привычки смотреть на макет в широком окне. Ниже девять из них — с объяснением, почему это ошибка, а не вкусовщина, и как проверить свою версию сайта.
Ошибки 1–3: размеры и касания
Первая группа ошибок — про физику. Палец не курсор: он закрывает область вокруг точки нажатия, и промах стоит дороже, чем на десктопе. Элемент, который мышью нажимается без усилий, пальцем требует прицеливания.
Мелкие цели нажатия — самая частая из них. Ссылка в подвале или кнопка «показать телефон» высотой в строку текста нажимается с промахом, и человек попадает в соседний элемент. Ориентир, на который опираются при проектировании, — примерно 44 px по меньшей мере в одном измерении. Если элемент меньше, увеличивают область нажатия, а не только видимый размер.
Вторая ошибка — поля ввода со шрифтом меньше 16 px. В этом случае мобильный браузер увеличивает страницу при фокусе, и человек теряет ориентацию: часть интерфейса уезжает за край, кнопка отправки исчезает, масштаб приходится возвращать вручную. Лечится это не запретом масштабирования, а нормальным размером шрифта в поле.
Третья — попытка уместить в один экран всё, что есть на широком макете. Уменьшают шрифт, отступы и иконки, и страница становится нечитаемой, хотя формально ничего не сломалось. На телефоне полезнее пожертвовать частью блоков и оставить один понятный следующий шаг, чем показать всё мелким шрифтом.
Ошибки 4–6: навигация и состояния
На телефоне навигация обычно сжата в одно меню, которое открывается кнопкой. Ломается здесь не внешний вид, а предсказуемость: непонятно, как закрыть меню, куда вернуться и что было выбрано.
Четвёртая ошибка — меню, которое нечем закрыть. Если единственный способ выйти из открытого меню — кнопка «назад» в браузере, человек теряет страницу, на которой был, и начинает путь заново. Кнопка закрытия должна быть на виду, а нажатие вне области меню — тоже закрывать его.
Пятая — действия, доступные только при наведении курсора. На сенсорном экране наведения не существует: подсказка, кнопка «в избранное» или увеличение фото, которые появляются при hover, просто не появляются. Всё нужное должно быть видно без наведения или открываться по нажатию.
Шестая — попапы выше экрана. Модальное окно с фиксированной высотой и кнопкой закрытия внизу на небольшом экране обрезается: закрыть нельзя, прокрутить нельзя. Высоту окна привязывают к видимой области, а содержимое делают прокручиваемым внутри.
Ошибки 7–9: контент, который не помещается
Третья группа ошибок проявляется не на демо-данных, а на реальных: длинное название товара, цена с копейками, таблица характеристик, длинный адрес доставки. На макете с коротким текстом всё сходится, поэтому проверять нужно не «как выглядит красиво», а «что будет, если текст станет втрое длиннее».
Седьмая ошибка — горизонтальная прокрутка. Появляется она из-за фиксированной ширины блоков, широких таблиц, изображений без ограничения по ширине и длинных слов без переноса. Признак простой: страница «гуляет» вбок, и часть содержимого уходит за край экрана.
Восьмая — обрезка текста там, где смысл в последнем слове. Многоточие уместно в анонсе, но не в названии товара, цене и условиях доставки: именно там спрятанная часть и содержит ответ. Если текст не помещается, лучше перенести его на вторую строку, чем обрезать.
Девятая — таблицы характеристик и сравнения, перенесённые с десктопа как есть. На телефоне их либо невозможно прочитать, либо приходится масштабировать всю страницу. Рабочие варианты: превратить строки в пары «характеристика — значение» или дать прокрутку внутри самой таблицы, не растягивая страницу.
Как проверить адаптив самому
Для проверки не нужно специальное оборудование. Откройте сайт в браузере, включите режим адаптивного просмотра и пройдите основные сценарии на ширине 360, 768, 1280 и 1920 px. Не ограничивайтесь главной: важнее формы, каталог, корзина и страница с длинным текстом.
Отдельно проверьте увеличение шрифта до 200% и поворот экрана. Так проявляются блоки с фиксированной высотой и текст, который ломает сетку при нехватке места.
- Нет горизонтальной прокрутки ни на одной проверяемой ширине
- Все кнопки и ссылки нажимаются без увеличения масштаба
- Формы: клавиатура не перекрывает поле, тип клавиатуры соответствует данным
- Длинный текст и длинные слова не выходят за границы блоков
- Меню открывается, закрывается и не мешает читать страницу
- Изображения не растянуты и не обрезаны по смысловой части
- Отступы достаточные, чтобы не нажать соседний элемент случайно
Что зафиксировать в приёмке
Адаптив принимают не по картинке в макете, а по поведению на устройствах. Формулировка «адаптивная вёрстка» в договоре ничего не значит: под неё подходит и сайт, который на телефоне формально открывается, но пользоваться им нельзя.
Попросите показать сайт на реальном телефоне, а не только в эмуляторе. Эмулятор не воспроизводит поведение клавиатуры, инерционную прокрутку и особенности мобильных браузеров — а проблемы чаще всего обнаруживаются именно там.
- Перечень ширин экрана, на которых проверяется каждая страница
- Требование отсутствия горизонтальной прокрутки
- Минимальный размер интерактивных элементов
- Проверка на реальных устройствах с iOS и Android
- Проверка пустых состояний и ошибок форм на телефоне