Mobile-first дизайн сайта: практическое руководство
Что означает mobile-first-дизайн, чем он отличается от адаптивного и как спроектировать такой сайт: порядок контента, сенсорные элементы, CSS-брейкпоинты min-width, изображения и тестирование, а также советы для компаний с несколькими локациями.
Частые вопросы
Чем mobile-first отличается от адаптивного дизайна?
Адаптивный дизайн — один сайт, который перестраивается под размер экрана. Mobile-first описывает порядок проектирования и написания кода: сначала маленький экран, затем варианты для больших. Mobile-first-сайт адаптивен, но сайт, изначально созданный для компьютера, часто получает тесную и второстепенную мобильную версию.
Почему mobile-first важен для SEO?
Google использует mobile-first-индексацию: для индексации и ранжирования он в первую очередь обращается к мобильной версии страницы. Если на мобильных устройствах нет контента, заголовков, структурированных данных или ссылок, Google может их не увидеть.
Какие брейкпоинты использовать для mobile-first-сайта?
Пусть точку перехода подскажет контент: расширяйте окно браузера, пока макет не начнёт выглядеть растянутым, и добавьте там брейкпоинт. Частые начальные значения — около 640px, 768px, 1024px и 1280px; многие CSS-фреймворки используют их в медиазапросах min-width.
Какого размера должны быть кнопки на телефоне?
WCAG 2.2 устанавливает минимальную область нажатия 24 на 24 CSS-пикселя (уровень AA) и рекомендует 44 на 44 (уровень AAA). Рекомендации Apple используют 44 пункта, а Material от Google — 48dp. Для главных кнопок и ссылок в меню ориентируйтесь примерно на 44–48 пикселей.
Как франшизам проектировать сайты с приоритетом мобильных устройств?
Используйте общий шаблон со страницей каждой локации. На первом экране разместите вызов по нажатию, маршрут, часы работы и запись или заказ для конкретного филиала. Посетители, которые ищут «рядом со мной» на телефоне, хотят сразу действовать, поэтому поиск локации и главное действие должны работать одним пальцем.
Краткий ответ: mobile-first веб-дизайн означает, что сначала вы проектируете и создаёте версию страницы для телефона, а по мере расширения экрана добавляете макеты для планшетов и компьютеров. В коде базовый CSS задаёт мобильный вариант, а медиазапросы min-width расширяют его. Это помогает определить главное для каждой страницы и соответствует тому, как Google сегодня индексирует сайты.
Mobile-first и адаптивный дизайн: в чём настоящая разница
Эти термины используют как синонимы, хотя они отвечают на разные вопросы.
Адаптивный дизайн
Mobile-first-дизайн
Что это
Один сайт, макет которого подстраивается под размер экрана
Процесс: начать с малого экрана и расширять
Стиль CSS
Может использовать max-width (сжимать компьютерную версию) или min-width
min-width (расширять мобильный вариант)
Приоритет контента
Часто определён для компьютера, затем сжат
Определён для самого маленького экрана
Частая проблема
Скрытый контент, крошечные области нажатия, тяжёлые страницы
Макет компьютера выглядит пустым, если его не расширить
Лучший вариант сочетает оба подхода: адаптивный сайт, созданный по принципу mobile-first.
Шаг 1. Определите порядок контента на телефоне
На узком экране все блоки идут в один столбец, поэтому порядок и есть весь макет. Для каждой страницы пронумеруйте разделы в порядке, удобном посетителю с телефона.
Например, главная страница местной сервисной компании может выглядеть так:
Чем вы занимаетесь и где (одна строка).
Главное действие: позвонить или записаться.
Доказательства: рейтинг, отзывы или известные клиенты.
Услуги в виде коротких карточек, на которые удобно нажимать.
Зона обслуживания или адреса.
Дополнительные доказательства: фотографии, до и после.
FAQ.
Нижняя часть страницы с часами, адресом и контактами.
Если раздел не заслуживает места в этом списке, возможно, он не нужен и на компьютере.
Шаг 2. Проектируйте для пальцев
Области нажатия: кнопки и пункты меню должны быть высотой не менее 44–48 пикселей, с промежутками между ними. Минимум WCAG 2.2 — 24 на 24 CSS-пикселя; это нижняя граница, а не цель.
Главное действие должно быть под рукой: закреплённая нижняя панель с кнопками «Позвонить» и «Записаться» подходит местному бизнесу. Сделайте её короткой, чтобы не перекрывать контент.
Навигация: кнопка, открывающая меню на весь экран, подходит. Оставьте в списке пять–семь пунктов, а главное действие разместите вне меню.
Формы: один столбец, подписи над полями и правильные типы ввода (tel, email, number), чтобы открывалась подходящая клавиатура. Добавьте autocomplete, чтобы браузер заполнял имена и адреса.
Текст: обычный размер шрифта — не менее 16px; это также предотвращает увеличение полей формы в iOS Safari. Удобная длина строки и контраст основного текста не менее 4.5:1 (WCAG AA).
Шаг 3. Создайте сайт по mobile-first-принципу в коде
Резиновая типографика и интервалы с clamp(), например font-size: clamp(1.75rem, 5vw, 3rem) для заголовка: так нужно меньше брейкпоинтов.
Flexbox и Grid с auto-fit: grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) создаёт колонки, только когда хватает места.
Container queries (поддерживаются актуальными основными браузерами) позволяют карточке менять макет в зависимости от ширины контейнера, а не всего экрана. Это полезно для повторно используемых компонентов.
Утилитарные фреймворки, например Tailwind CSS, по умолчанию mobile-first: классы без префикса действуют для всех размеров, а префиксы вроде md: — начиная с указанной ширины.
Выбирайте брейкпоинты там, где ломается ваш контент, а не под конкретные модели телефонов.
Шаг 4. Обеспечьте быструю работу через мобильную сеть
У телефонов процессоры медленнее, а сеть менее надёжна, чем у ноутбука, на котором вы проектируете сайт. Это измеряют Core Web Vitals Google: Largest Contentful Paint (загрузка), Interaction to Next Paint (отзывчивость) и Cumulative Layout Shift (визуальная стабильность).
Адаптивные изображения: используйте srcset и sizes, чтобы телефон скачивал файлы меньшего размера, а также современные форматы WebP или AVIF.
Всегда задавайте width и height (или aspect-ratio) для изображений и встроенных элементов, чтобы избежать сдвига макета.
Отложенно загружайте изображения ниже первого экрана с loading="lazy", но не главное изображение.
Ограничьте шрифты одной-двумя гарнитурами и несколькими начертаниями.
Сократите сторонние скрипты: виджеты чата, трекеры и встраиваемые блоки часто замедляют телефоны. Загружайте их позже или только там, где они нужны.
Шаг 5. Расширьте макет для больших экранов
Когда мобильная версия работает, увеличивайте окно и добавляйте пользу, а не только ширину:
Сетки услуг и товаров в несколько колонок.
Полная панель навигации вместо кнопки меню.
Текст и изображения рядом.
Закреплённая боковая панель для длинных статей или сводки записи.
Состояния при наведении, но никакой информации, доступной только при наведении: сенсорный экран не поддерживает hover.
Шаг 6. Тестируйте как посетитель
Режим устройства в инструментах разработчика браузера для быстрых проверок ширины 360px, 390px и 414px, а также экранов планшетов.
Хотя бы один настоящий Android и один настоящий iPhone: эмуляторы не показывают проблемы прокрутки, клавиатуры, закрывающие поля, и медленные процессоры.
Lighthouse в Chrome DevTools и PageSpeed Insights, который при достаточном трафике также показывает полевые данные реальных пользователей Chrome.
Поверните телефон горизонтально и проверьте, что закреплённые панели не занимают половину экрана.
Выполните главное действие (запишитесь, купите, позвоните) одним пальцем через мобильную сеть.
Mobile-first для франшиз и компаний с несколькими филиалами
У франшиз и компаний с несколькими локациями есть особая мобильная задача: большинство посетителей приходит по запросу «рядом со мной» с телефона и сразу хочет узнать сведения о конкретном филиале.
Сначала поиск филиала: кнопка «Использовать моё местоположение» и поиск по индексу или городу, результаты в виде карточек, на которые удобно нажимать.
Отдельная страница каждой локации на общем шаблоне: адрес, часы работы, телефон, ссылка на карту, услуги, местная запись или заказ; кнопку звонка разместите вверху.
Отличающиеся местные данные: на каждой странице нужны собственные фотографии, сотрудники или отзывы, если возможно, а не только заменённое название города.
Общий бренд и контроль филиалов: франчайзи должны менять часы и предложения, не затрагивая макет.
Структурированные данные: разметка LocalBusiness на каждой странице с правильными названием, адресом и телефоном.
Чек-лист mobile-first
[ ] Тег viewport на каждой странице.
[ ] Порядок контента определён для одной колонки.
[ ] Главное действие видно на телефоне без прокрутки.
[ ] Области нажатия около 44–48px, между ними есть расстояние.
[ ] Основной текст от 16px, контраст 4.5:1.
[ ] Базовый CSS для мобильных устройств, медиазапросы min-width для больших экранов.
[ ] Адаптивные изображения с заданными размерами.
[ ] На мобильной и настольной версиях одинаковые контент и структурированные данные.
[ ] Проверка на настоящих устройствах iOS и Android.
Создайте сайт без разработки с нуля
Все сайты We.Inc адаптивны изначально. В редакторе можно просмотреть версию для телефона и изменить её визуально или в коде. Посмотрите шаблоны, чтобы увидеть, как макеты перестраиваются в одну колонку, или опишите бизнес и получите первый вариант для проверки на собственном телефоне.