Адаптивность — это не «сайт ужимается на телефоне», а набор осознанных правил перестроения: что переносится вниз, что скрывается, что меняет форму, а что остаётся на месте в любом случае. Когда таких правил нет, мобильная версия получается случайной: где-то блок растянулся, где-то текст наехал на картинку, где-то появилась горизонтальная прокрутка из-за одной таблицы. При этом больше половины посетителей коммерческих сайтов приходят именно с телефона, а заявки и звонки чаще всего оставляют оттуда же. Разберём, как проектировать перестроение осмысленно и что проверять перед запуском.
Начинать с узкого экрана
Проектировать удобнее от телефона к десктопу, а не наоборот. Причина не в моде, а в дисциплине: на узком экране физически помещается мало, и приходится оставить только то, что действительно нужно. Дальше выясняется полезная вещь — блок, который не влез в мобильную версию, чаще всего лишний и на большом экране тоже.
Обратный порядок работает хуже. Когда десктопный макет уже согласован, мобильную версию делают методом вычитания: прячут блоки, уменьшают шрифты, складывают колонки. Получается урезанная копия, в которой важное иногда оказывается скрытым, а второстепенное занимает первый экран.
Точки перестроения
| Ширина экрана | Что обычно меняется | На что смотреть |
|---|---|---|
| до 767 px | Одна колонка, меню в бургер, кнопки во всю ширину, фиксированная шапка | Не спрятаны ли цена, контакты и кнопка заказа |
| 768-1023 px | Две колонки, боковая панель уходит вниз, меню всё ещё свёрнуто | Планшет в вертикальной ориентации, самый забываемый случай |
| 1024-1279 px | Три колонки, появляется горизонтальное меню | Не переполняется ли меню при длинных названиях разделов |
| от 1280 px | Четыре колонки, ограничение максимальной ширины контента | Не растягивается ли текст в строки, которые тяжело читать |
| от 1600 px | Ширина контента зафиксирована, растут только поля по краям | Не выглядит ли страница пустой по центру |
Точки перестроения лучше выбирать по содержимому, а не по моделям устройств. Правильный вопрос — не «какая ширина у популярного телефона», а «при какой ширине этот конкретный блок начинает выглядеть плохо». У карточек каталога одна такая ширина, у таблицы другая, у формы третья, и это нормально.
Как ведут себя типовые блоки
- Каталог карточек. Четыре колонки, затем три, две и одна. Пропорции самой карточки лучше сохранять на всех ширинах, иначе каталог выглядит рваным. Переход на одну колонку не всегда нужен: две узкие карточки на телефоне часто удобнее одной широкой.
- Таблица. Два рабочих варианта. Первый — горизонтальная прокрутка внутри самой таблицы, с зафиксированной первой колонкой. Второй — перестроение каждой строки в карточку, где у значений появляются подписи. Первый проще, второй читается лучше.
- Форма. Поля в одну колонку, подписи над полями, кнопка на всю ширину. Двухколоночные формы на телефоне не работают.
- Шапка. Логотип, телефон или кнопка связи, кнопка меню. Всё остальное уходит внутрь меню. Шапку на мобильном обычно закрепляют сверху, но она не должна занимать треть экрана.
- Изображения. Для широкого и узкого экрана часто нужны разные кадры, а не просто разный размер: горизонтальная панорама, сжатая до ширины телефона, превращается в нечитаемую полоску.
- Длинные тексты. На широком экране ограничиваем ширину строки, иначе глазу трудно возвращаться к началу следующей строки.
Частые проблемы
- Горизонтальная прокрутка из-за одного блока с фиксированной шириной: широкой таблицы, встроенной карты, баннера или длинного адреса без переносов. Ищется методом сужения окна и просмотра, какой элемент выходит за границу.
- Мелкие зоны нажатия. Кнопка или ссылка высотой меньше примерно 44 пикселей — это промахи и раздражение. Особенно страдают ссылки, стоящие вплотную друг к другу в подвале.
- Скрытое важное. Цена, контакты, кнопка заказа спрятаны в меню «чтобы было компактнее». На телефоне это ровно то, за чем пришли.
- Одинаковый кегль заголовка на всех экранах. Крупный заголовок, рассчитанный на десктоп, занимает на телефоне половину высоты первого экрана.
- Ховер вместо нажатия. Меню или карточка, которые раскрываются при наведении, на сенсорном экране либо не работают, либо срабатывают с первого касания вместо перехода.
- Клавиатура закрывает поле. При заполнении формы поле уезжает под всплывающую клавиатуру, и человек не видит, что вводит.
- Скачки вёрстки. Картинки без заданных размеров подгружаются и сдвигают содержимое, когда посетитель уже целится в кнопку.
Что стоит зафиксировать до вёрстки
Чтобы не разбирать каждый блок отдельно на этапе сдачи, полезно договориться о нескольких вещах заранее:
- Список точек перестроения и правило для каждого типового блока.
- Минимальный размер шрифта основного текста на мобильном.
- Шаг отступов: один набор значений вместо произвольных чисел в каждом блоке.
- Поведение шапки: закреплена или прокручивается, что в ней остаётся на узком экране.
- Что происходит с длинными названиями: обрезаются, переносятся или уменьшаются.
- Как выглядят пустые состояния: каталог без товаров, поиск без результатов.
Как проверять
Порядок, которым мы пользуемся перед сдачей:
- Плавно меняем ширину окна от 320 до 1920 пикселей и смотрим, где вёрстка ломается. Это надёжнее, чем проверка на трёх фиксированных размерах: проблемы обычно живут между ними.
- Проверяем на реальном телефоне, а не только в эмуляторе. Эмулятор не показывает поведение клавиатуры, инерцию прокрутки и реальную скорость загрузки.
- Проверяем горизонтальную ориентацию телефона и планшет в вертикальной.
- Заполняем форму пальцем от начала до конца, включая отправку и получение подтверждения.
- Открываем страницы с длинными названиями, без фотографий и с пустым каталогом.
- Увеличиваем размер шрифта в настройках браузера и смотрим, не разваливается ли вёрстка.
- Смотрим страницу при медленном соединении: что видно в первую секунду.
Адаптивность и скорость связаны
Мобильная версия, которая внешне складывается в одну колонку, но грузит те же тяжёлые изображения и те же скрипты, что и десктопная, остаётся медленной. Поэтому вместе с правилами перестроения стоит проверять, что телефону отдаются облегчённые картинки, что скрытые блоки действительно не загружаются, и что на первом экране нет того, что можно отложить. Иначе аккуратная вёрстка сведётся на нет ожиданием загрузки.
Если нужен сайт, который одинаково уверенно работает на телефоне и на большом экране, мы разработаем сайт под ключ: спроектируем структуру, сверстаем по правилам перестроения и проверим на реальных устройствах перед запуском.
