Адаптивный дизайн сайта: правила Mobile First

Адаптивный дизайн сайта помогает одной странице оставаться понятной и удобной при разных размерах окна: на телефоне, планшете и компьютере. Меняются не только ширина блоков и количество колонок, но и расположение навигации, размеры изображений, отступы и способ взаимодействия.

Mobile First — подход, при котором базовый интерфейс проектируют для компактного экрана, а затем постепенно используют дополнительное пространство. Это не означает, что пользователям компьютеров достанется упрощённый сайт: цель — сохранить важное содержание и удобство на каждом размере. Ниже разберём принципы, рабочий пример CSS и проверку перед запуском.

Адаптивный дизайн и Mobile First: в чём разница

Адаптивность описывает результат: интерфейс приспосабливается к доступному пространству. Mobile First описывает порядок работы: сначала определяют содержание и компоновку для узкого экрана, затем добавляют изменения для более широких окон. Проект можно сделать адаптивным и в обратном порядке, но при Mobile First проще заранее решить, что посетителю действительно нужно в первую очередь.

На телефоне пространство ограничено. Длинные горизонтальные меню, широкие таблицы и несколько колонок могут перестать помещаться. Вместо механического уменьшения всей страницы продумайте последовательность: заголовок, объяснение предложения, основное действие и детали. Сохраняйте смысл и доступ к функциям независимо от размера экрана.

Визуальную основу можно изучить на странице тем Morlix, а инструменты работы с композицией — в разделе Дизайн-студия. Конкретное поведение готовой страницы всегда проверяйте в используемой теме и браузере.

Сначала содержание и сценарий

Прежде чем выбирать точки перехода, опишите главную задачу посетителя: прочитать статью, сравнить товары, отправить заявку или найти контакт. Определите, какую информацию он должен увидеть до действия, а что можно расположить ниже. Например, на странице услуги это могут быть название, понятное описание результата, условия и способ связи; декоративная композиция не должна заслонять их.

Проверьте порядок блоков без расчёта на два параллельных столбца. Если на широком экране иллюстрация стоит слева от текста, в узком варианте текст и изображение должны идти в понятной последовательности. Учитывайте порядок элементов в HTML: визуальное переставление с помощью CSS может отличаться от последовательности при навигации клавиатурой и чтении вспомогательными технологиями.

Гибкая сетка вместо фиксированного макета

Контейнеру полезно задавать максимальную ширину и боковые отступы, позволяя ему занимать доступное место. Карточки можно размещать в одной колонке на узком экране и в нескольких — когда для этого достаточно места. Не закрепляйте ширину всей страницы в пикселях: при небольшом окне это часто приводит к горизонтальной прокрутке.

Пример показывает идею Mobile First. Значение 48rem здесь — иллюстративная точка перехода, а не универсальный размер для всех планшетов. Подберите её по моменту, когда конкретному содержимому становится тесно или появляется место для второй колонки.

<meta name="viewport" content="width=device-width, initial-scale=1">

<section class="cards" aria-label="Возможности">
  <article class="card">
    <h2>Первая возможность</h2>
    <p>Краткое описание для посетителя.</p>
  </article>
  <article class="card">
    <h2>Вторая возможность</h2>
    <p>Ещё одно описание.</p>
  </article>
</section>

*, *::before, *::after { box-sizing: border-box; }
.cards {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.card { min-width: 0; padding: 1.25rem; }
.card img { display: block; max-width: 100%; height: auto; }
@media (min-width: 48rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

Метаэлемент viewport размещают в head документа; он сообщает мобильному браузеру, как использовать ширину области просмотра. В примере minmax(0, 1fr) позволяет колонкам сжиматься, а max-width: 100% ограничивает ширину изображения. Длинные адреса, таблицы и встроенные элементы всё равно нужно проверять отдельно: одна строка CSS не исправит любой случай переполнения.

Точки перехода выбирайте по содержимому

Точка перехода, или breakpoint, — условие, при котором меняется компоновка. Вместо набора чисел «под популярные модели» постепенно изменяйте ширину окна и отмечайте, где строки меню перестают помещаться, карточки становятся слишком узкими или расстояния выглядят неестественно. Именно там может понадобиться переход.

Проверяйте не только значения точно до и после перехода, но и промежуточные размеры. Страница должна работать непрерывно, а не только на трёх заранее выбранных ширинах. Для отдельных компонентов иногда удобнее учитывать размер их контейнера, однако конкретную реализацию выбирайте с учётом требований проекта и браузеров, которые поддерживает аудитория.

Навигация и действия на мобильном экране

В компактной шапке сохраняйте заметный доступ к основным разделам. Если меню сворачивается, у управляющей кнопки должно быть понятное название, а открытое меню — возможность закрытия. Проверьте работу клавиатурой, видимость фокуса и то, что состояние раскрытия корректно сообщается вспомогательным технологиям.

Нажимаемые элементы не должны стоять вплотную друг к другу. Для ссылок, кнопок, фильтров и полей оставьте достаточную область касания и пространство между соседними действиями. Не полагайтесь только на hover: на сенсорном устройстве пользователю нужен доступ к тем же возможностям через касание. Кнопка отправки формы должна оставаться видимой и понятной после появления ошибок.

Текст, изображения и медиа

Следите за читаемостью на узком экране: ограничивайте длину строк на широком, используйте достаточный контраст и не задавайте тексту фиксированную высоту, которая обрежет его при увеличении. Проверьте страницу при увеличении масштаба и с более длинным заголовком: реальный контент редко совпадает с длиной макетного.

Изображения должны вписываться в контейнер без искажения. Для содержательных изображений добавляйте осмысленный alt; чисто декоративные элементы не обязаны повторять текст рядом. Если кадрирование необходимо, проверьте, что ключевой объект остаётся видимым при разных пропорциях. Используйте подходящие размеры файлов и форматы, чтобы не загружать изображение больше необходимого, сохраняя приемлемое качество.

Видео и сложные анимации проверяйте на реальном устройстве: могут отличаться условия автозапуска, скорость загрузки и поведение при прокрутке. Предусмотрите управление, когда оно нужно пользователю, и не делайте единственный способ понять содержание зависящим от анимации или звука.

Формы, таблицы и сложные блоки

На телефоне поля формы обычно удобнее располагать последовательно, с видимыми подписями и понятными сообщениями об ошибках. Используйте подходящий тип поля там, где он уместен, но проверяйте не только клавиатуру телефона: значения должны корректно обрабатываться и на сервере.

Широкая таблица требует отдельного решения. Можно разрешить горизонтальную прокрутку её контейнера и явно подсказать, что таблицу можно сдвинуть, либо переработать представление, сохранив связь между заголовками и данными. Нельзя просто спрятать столбцы, необходимые для выбора. Встроенные карты, графики и блоки сторонних сервисов также проверяйте на переполнение.

Производительность — часть удобства

На мобильной сети тяжёлые изображения, шрифты и скрипты могут замедлять отображение. Начните с измерения на собственных страницах, затем уменьшайте реальный вес и количество ресурсов там, где это оправдано. Проверяйте результат после каждого существенного изменения: эффект зависит от устройства, сети и содержимого страницы.

Не прячьте важный текст только ради визуального впечатления от первого экрана. Сначала убедитесь, что посетитель видит смысл страницы и может выполнить основной сценарий; затем улучшайте декоративные эффекты. О связи композиции и внимания подробнее рассказывает материал о визуальной иерархии.

Как проверять адаптивность перед запуском

1. Откройте страницу на узком телефоне, широком телефоне, планшете и компьютере. Меняйте размер окна между контрольными точками.
2. Проверьте портретную и альбомную ориентацию, длинные заголовки, пустые и заполненные состояния.
3. Найдите горизонтальную прокрутку всей страницы, обрезанные блоки и перекрывающие друг друга элементы.
4. Пройдите основной сценарий: меню, ссылки, форма, ошибки и повторная отправка. Проверьте касание и клавиатуру.
5. Увеличьте масштаб текста, проверьте контраст, видимость фокуса и порядок содержимого.
6. Проверьте изображения, видео и загрузку при ограниченной скорости сети. По возможности используйте реальные устройства и браузеры аудитории.

Инструменты разработчика помогают быстро проверить много размеров, но не заменяют полностью проверку на реальном устройстве: клавиатура, жесты и браузерные панели могут вести себя иначе. Исправляйте проблемы по важности для сценария, а после изменений повторно проверяйте соседние размеры.

Хороший Mobile First начинается с содержания и заканчивается проверкой действий пользователя. Возьмите одну важную страницу, соберите её компактную версию, расширьте сетку по потребности содержимого и пройдите чек-лист на разных устройствах. Так адаптивность станет частью процесса, а не последней косметической правкой.