Mobile-first дизайн: почему сайт делают сначала для телефона
Что такое mobile-first дизайн, почему Google и клиенты судят о сайте по мобильной версии и как продумать структуру, контент, скорость и формы.
Mobile-first дизайн — это подход, при котором сайт сначала проектируют и делают для самого маленького экрана, а потом расширяют для планшетов и компьютеров, а не наоборот. Это важно, потому что большинство людей знакомится с вашим бизнесом через телефон, а Google для индексации и ранжирования в первую очередь использует мобильную версию страницы. Если мобильная версия сделана «по остаточному принципу», именно по ней вас и оценивают — и клиенты, и поисковик.
В статье разберём, что mobile-first означает на практике, почему это больше, чем «сайт красиво сжимается», и что проверить на своём сайте уже сегодня.
Mobile-first и «адаптивный сайт»: в чём разница
Почти любой современный сайт адаптивный — он подстраивается под ширину экрана. Но прийти к этому можно двумя путями:
| Сначала десктоп | Сначала мобильный (mobile-first) | |
|---|---|---|
| Отправная точка | Широкий макет для компьютера | Узкий макет для телефона |
| Дальше | Сжимаем, прячем и переставляем для телефона | Добавляем колонки и детали для больших экранов |
| Типичный результат на телефоне | Тесное меню, мелкий текст, спрятанный контент, тяжёлые страницы | Сфокусированный контент, крупные кнопки, лёгкие страницы |
| Приоритеты | Решаются под большой экран | Решаются под самое жёсткое ограничение |
Ключевое слово — приоритеты. На телефоне нельзя показать всё сразу, поэтому mobile-first заставляет решить, что важнее всего. И это решение делает чище и десктопную версию.
Почему mobile-first важен для бизнеса
Ваши клиенты — в телефонах
Ресторан, стоматологию, доставку или отзывы о товаре люди ищут с телефона — часто на ходу, одной рукой, через мобильный интернет. В Молдове и Румынии, как и в большей части Европы, телефон — основной способ сидеть в интернете, писать компаниям в Viber или Telegram и платить. Если на телефоне сайт неудобен, многие просто возвращаются в поиск и нажимают на следующий результат.
Google смотрит на мобильную версию
Google использует mobile-first индексацию: он в первую очередь сканирует и оценивает мобильную версию страниц. Контент, который есть только на десктопе, может фактически не учитываться. Данные Core Web Vitals — метрик Google для оценки удобства страницы — тоже собираются с устройств реальных посетителей, и многие из них телефоны. Поэтому мы написали отдельный гайд о скорости сайта и Core Web Vitals.
Добавлять дешевле, чем убирать
Спроектировать мобильную версию первой проще: одна колонка, главный контент, главное действие. Добавить потом боковую панель или колонки для десктопа легко. А вот втиснуть перегруженный десктопный макет в экран телефона — это обычно компромиссы и лишние часы разработки.
Принципы mobile-first дизайна
Сначала контент, потом украшения
Начните с вопроса: что нужно человеку с телефоном на первом экране? Обычно это чем вы занимаетесь, для кого и главное действие — позвонить, записаться, заказать, узнать цену. Большие слайдеры и видео с автозапуском выталкивают всё это вниз и замедляют страницу.
Проектируйте под большой палец
Ключевые действия должны быть там, куда палец дотягивается легко. Кнопки должны быть достаточно крупными — Apple рекомендует минимум 44×44 pt, Material Design от Google — 48×48 dp, а WCAG 2.2 называет абсолютным минимумом 24×24 CSS-пикселя — и стоять с промежутками, чтобы по ним не промахивались. Для локального бизнеса часто хорошо работает закреплённая внизу кнопка «Позвонить» или «Заказать».
Читается без зума
Основной текст около 16px, комфортный межстрочный интервал, короткие абзацы и хороший контраст. Если цены приходится увеличивать пальцами, дизайн не справился.
Простая навигация
Понятное меню с несколькими пунктами лучше мега-меню. Оставьте на виду логотип, кнопку меню и одно самое важное действие (телефон, корзина, запись). Используйте подписи, а не только иконки.
Формы, которые уважают клавиатуру
Именно на формах мобильные пользователи сдаются. Спрашивайте только нужное, используйте правильные типы полей, чтобы телефон показывал подходящую клавиатуру, и разрешите браузеру автозаполнение:
<input type="tel" name="phone" autocomplete="tel" inputmode="tel">
<input type="email" name="email" autocomplete="email">Показывайте ошибки прямо рядом с полем и никогда не стирайте то, что человек уже ввёл.
Скорость — часть дизайна
Телефон в мобильной сети прощает меньше, чем ноутбук на офисном Wi-Fi. Сжимайте и уменьшайте изображения, используйте современные форматы, загружайте только нужный странице код и избегайте тяжёлых сторонних виджетов. Быстрая мобильная страница — часто самое большое улучшение UX, которое можно сделать.
Процесс mobile-first по шагам
- Составьте список задач, которые люди решают на сайте, и отметьте, какие из них решаются на ходу.
- Сначала набросайте мобильный макет — одну колонку с блоками по приоритету. В конструкторе проекта на этом сайте есть мобильный предпросмотр: можно собрать блоки и посмотреть, как страница читается на телефоне.
- Пишите тексты под маленький экран: короткие заголовки, списки, понятные кнопки.
- Проектируйте компоненты с состояниями: кнопки, формы, меню, карточки — под касание, а не под наведение мышью.
- Масштабируйте: добавьте колонки, крупные изображения и второстепенный контент для планшетов и десктопа.
- Тестируйте на реальных телефонах — недорогом Android и iPhone, через мобильный интернет, при дневном свете.
Чек-лист mobile-first для вашего сайта
- Главное действие видно на телефоне без прокрутки.
- Ни на одной странице нет горизонтальной прокрутки.
- Текст читается без зума, по кнопкам легко попасть.
- Меню простое и работает одной рукой.
- Номера телефонов кликабельны, адреса открываются в картах.
- Формы вызывают правильную клавиатуру и поддерживают автозаполнение.
- Изображения сжаты, страница быстро грузится через мобильный интернет.
- Всплывающие окна не закрывают контент на маленьких экранах.
- Всё важное, что есть на десктопе, есть и на мобильном.
- Сайтом могут пользоваться люди с инвалидностью, в том числе с экранным чтецом.
Последнему пункту посвящена отдельная статья — основы веб-доступности.
Значит ли mobile-first, что нужно приложение?
Не обязательно. Хорошо сделанный mobile-first сайт — или прогрессивное веб-приложение (PWA) — закрывает большинство задач малого и среднего бизнеса: каталог, запись, заказы, связь. Нативное приложение на React Native / Expo имеет смысл, когда сервисом пользуются каждый день или нужны глубокие возможности устройства. Оба варианта можно сравнить на странице разработки приложений.
FAQ
Mobile-first и адаптивный дизайн — это одно и то же?
Не совсем. Адаптивный дизайн означает, что макет подстраивается под любой экран. Mobile-first — это порядок работы: сначала телефон, потом большие экраны. Mobile-first сайт всегда адаптивный, но адаптивный сайт не всегда mobile-first.
Будет ли mobile-first сайт хуже выглядеть на компьютере?
Нет — обычно он выглядит чище. Полноценный десктопный макет всё равно проектируется, просто работа начинается с ясных приоритетов, а не с обрезания перегруженной страницы.
Как проверить, удобен ли мой сайт на телефоне?
Откройте его на своём телефоне через мобильный интернет и попробуйте выполнить главную задачу: найти цену, позвонить, заказать. Затем проверьте страницу в PageSpeed Insights — скорость и Core Web Vitals. Для быстрой проверки вёрстки пригодится режим устройств в Chrome DevTools.
Можно ли сделать существующий сайт mobile-first без полного редизайна?
Иногда да. Исправление навигации, размеров кнопок, форм, изображений и скорости может сильно помочь. Но если сама структура делалась только под десктоп, переделка часто выходит быстрее и дешевле в долгосрочной перспективе.
Делайте сайт для телефона в руке клиента
Ваш следующий клиент, скорее всего, прямо сейчас держит в руке телефон. Соберите структуру сайта с мобильным предпросмотром в конструкторе — и сделаем сайт, которым удобно пользоваться на любом экране. Подробнее о том, что входит в разработку сайтов.
