Человек видит рекламу в соцсети, переходит по ссылке, листает страницу большим пальцем и решает, звонить или закрыть вкладку. Всё это происходит на телефоне. Для большинства коммерческих сайтов мобильные посетители давно не исключение, а основной поток, поэтому мобильная версия сайта — это не «уменьшенная копия», а главный экран, с которого приходят заявки.
Разберём, чем отличаются адаптивный дизайн сайта, отдельная мобильная версия и подход mobile first, как к ним относятся поисковики и что конкретно меняется в интерфейсе, когда сайт открывают с телефона.
Почему сайт под телефон важнее, чем кажется
Смартфон стал основным устройством для поиска и покупок: с него ищут услуги по дороге, сравнивают цены, переходят из мессенджеров и рекламы в соцсетях. Особенно это заметно в рознице, услугах для частных клиентов и всём, что продвигается через таргетированную рекламу. В B2B доля компьютеров обычно выше, но и там первое знакомство с сайтом часто происходит с телефона.
Вместо общих цифр рынка лучше посмотреть на свои. В Яндекс Метрике отчёт «Устройства» покажет, какая часть посетителей приходит со смартфонов, а сравнение конверсии по устройствам — где теряются заявки. Если с телефона приходит много людей, а оставляют заявку в основном с компьютера, проблема почти наверняка в мобильной версии.
Адаптив, отдельная мобильная версия или mobile first
Эти три понятия часто ставят в один ряд, хотя они из разных плоскостей. Адаптив и отдельная версия — способы технически сделать сайт для телефона. Mobile first — способ думать о дизайне, и его можно сочетать с адаптивом.
| Адаптив | Отдельная версия (m.) | Mobile first | |
|---|---|---|---|
| Что это | Один сайт, который перестраивается под ширину экрана | Второй сайт на поддомене для телефонов | Подход: проектировать сначала для телефона |
| Адрес страниц | Один для всех устройств | Два: основной и m. | Не влияет |
| Поддержка | Один код и один контент | Два шаблона, контент надо синхронизировать | Не добавляет работы, меняет порядок |
| SEO | Самый простой вариант | Нужны связи между версиями и редиректы | Помогает: мобильная версия полноценная |
| Когда подходит | Почти всегда | Редко, при особом мобильном сценарии | Когда основной трафик с телефона |
Адаптивная вёрстка
Адаптивный сайт — это одна страница с одним адресом, у которой вёрстка меняется в зависимости от ширины экрана: колонки складываются в одну, меню прячется в кнопку, картинки подгружаются нужного размера. Google прямо рекомендует такой вариант как самый простой в поддержке, и для корпоративных сайтов, лендингов и интернет-магазинов он стал стандартом.
Отдельная мобильная версия
Отдельная мобильная версия живёт на поддомене вроде m.site.ru, и сервер отправляет туда пользователей с телефонов. Раньше так делали крупные порталы, потому что переверстать старый сайт было дороже, чем сделать второй. Сегодня у этого подхода больше минусов: два шаблона, риск, что на мобильной версии окажется меньше текста и товаров, и отдельная настройка для поисковиков, чтобы они понимали, какая страница чему соответствует.
Mobile first как подход к проектированию
Mobile first означает, что дизайнер начинает с самого узкого экрана. На телефоне нет места для второстепенного, поэтому приходится сразу решить, что человеку нужно в первую очередь и в каком порядке. Потом макет расширяют для планшета и компьютера, добавляя то, что там уместно. Обратный путь, когда десктопный макет «ужимают» под телефон, обычно даёт длинную ленту блоков, которые на маленьком экране никто не дочитает.
Mobile first — это не про ширину экрана, а про порядок решений: сначала главное, потом всё остальное.
Mobile-first индексация: как поисковики смотрят на мобильную версию
Google перешёл на mobile-first индексацию: для оценки и ранжирования он использует то, что видит его мобильный робот. Если на мобильной версии урезан текст, нет части товаров, отзывов или структурированных данных, для поиска их как будто не существует. Это ещё один аргумент против отдельной «облегчённой» версии.
Яндекс тоже учитывает удобство сайта на смартфоне при ранжировании в мобильном поиске, а в Яндекс Вебмастере есть проверка мобильных страниц. На практике требования у поисковиков сходятся: на телефоне должен быть тот же контент, что на компьютере, страница должна быстро загружаться, текст читаться без масштабирования, а элементы не должны вылезать за край экрана.
Что меняется в дизайне на телефоне
Адаптивный дизайн сайта — это не только перестройка колонок. Каждый тип блока на маленьком экране требует своего решения, и именно здесь разница между аккуратным адаптивом и формальным.
- Навигация. Меню прячется за кнопку, но самые важные разделы, поиск и контакты лучше держать на виду. Шапка, которая закрепляется при прокрутке, должна быть низкой, иначе съедает треть экрана.
- Формы. Минимум полей, крупные поля ввода, правильная клавиатура: цифровая для телефона, с «@» для почты. Если шрифт в поле меньше 16 пикселей, iPhone при фокусе увеличивает страницу, и форма уезжает.
- Таблицы. Широкую таблицу с ценами или характеристиками нельзя просто сжать. Её превращают в карточки, оставляют горизонтальную прокрутку с закреплённой первой колонкой или показывают только главные столбцы.
- Каталоги и фильтры. Фильтры уходят в отдельную панель, которая открывается кнопкой, а результаты видно сразу. Карточка товара в списке показывает фото, цену и кнопку, остальное — внутри.
- Кнопки звонка и мессенджеров. На телефоне номер должен быть ссылкой, по которой сразу открывается звонок, а кнопки мессенджеров — вести в нужный чат. Для многих услуг это главный способ связаться.
- Тач-зоны. Палец не курсор. Кнопки и ссылки должны быть достаточно крупными и не стоять вплотную: в рекомендациях Apple и Google ориентир — около 44–48 пикселей. Эффекты при наведении на телефоне не работают, поэтому важное нельзя прятать в них.
- Скорость и вес картинок. Телефон часто работает на мобильном интернете. Изображения отдают в нужном размере и современных форматах, первый экран загружается в первую очередь, а тяжёлые видео на фоне на мобильной версии лучше заменить статичной картинкой.
Отдельно стоит подумать о том, что на телефоне главное действие должно быть доступно в любой момент. Кнопка «Позвонить» или «Оставить заявку», закреплённая внизу экрана, в зоне большого пальца, часто работает лучше, чем форма в самом конце страницы.
Брейкпоинты и макеты: что рисовать и что согласовывать
Брейкпоинт — это ширина экрана, на которой вёрстка перестраивается: меняется число колонок, размер шрифтов, вид меню. Универсального набора нет, но чаще всего выделяют телефон, планшет и компьютер, а для широких мониторов задают максимальную ширину контента. Привязываться к конкретным моделям устройств не стоит: их слишком много, и правильнее ставить брейкпоинты там, где ломается сам дизайн.
Для заказчика важно договориться о составе макетов заранее:
- ключевые страницы — главная, каталог, карточка, услуга, контакты — рисуются минимум в мобильной и десктопной версиях;
- для сложных страниц с таблицами и фильтрами добавляют планшет, адаптив под планшеты часто оказывается самым слабым местом;
- типовые блоки описываются как компоненты с правилами поведения на разных ширинах, а не рисуются заново для каждого экрана;
- состояния, которые есть только на телефоне — открытое меню, панель фильтров, закреплённая кнопка — тоже должны быть в макетах.
Проверять мобильный сценарий удобнее всего ещё до дизайна, на прототипе: порядок блоков на телефоне — это решение о приоритетах, и его дешевле поменять в схеме, чем в готовой вёрстке.
Чек-лист: как проверить мобильную версию сайта перед запуском
Перед запуском мобильную версию стоит пройти руками на нескольких реальных телефонах, на iPhone и Android, с узким и широким экраном. Эмулятор в браузере полезен, но не заменяет живого устройства.
- на любой ширине нет горизонтальной прокрутки страницы, ничего не вылезает за край;
- текст читается без увеличения, у абзацев нормальная длина строки и межстрочный интервал;
- меню открывается и закрывается, из любого места можно попасть в главные разделы;
- номер телефона кликабелен, кнопки мессенджеров открывают нужный чат;
- формы заполняются без увеличения страницы, открывается правильная клавиатура, ошибки видны рядом с полем;
- кнопки и ссылки легко нажать пальцем, соседние элементы не перекрываются;
- таблицы, фильтры и галереи работают на телефоне и на планшете;
- всплывающие окна и баннеры cookie не закрывают контент и легко закрываются;
- на мобильной версии тот же текст, товары и данные, что на десктопе;
- страница проходит проверку в PageSpeed Insights и в инструменте проверки мобильных страниц Яндекс Вебмастера;
- цели в Метрике срабатывают и с телефона: звонки, отправка форм, клики по мессенджерам.
Типичные ошибки мобильной версии сайта
Большинство проблем мобильной версии возникает не из-за сложности, а из-за того, что о телефоне вспомнили в конце проекта, когда десктоп уже согласован.
- Адаптив «по умолчанию». Дизайнер рисует только десктоп, а разработчик сам решает, как всё ляжет на телефоне. В итоге порядок блоков случайный, а важные кнопки оказываются внизу.
- Всплывающие окна на весь экран. Попап с подпиской или скидкой, который появляется сразу и плохо закрывается, на телефоне просто выгоняет человека со страницы.
- Тяжёлый первый экран. Большое видео, слайдер и несколько шрифтов делают загрузку долгой, особенно на мобильном интернете.
- Мелкие и тесные элементы. Ссылки в подвале и иконки соцсетей стоят так близко, что попасть в нужную трудно.
- Нет проверки на реальных устройствах. Сайт выглядит хорошо в эмуляторе, а на конкретном телефоне ломается шапка или не работает форма.
Если сайт делается с нуля, все эти вопросы решаются на этапе структуры и прототипа, а не после запуска. Так мы и работаем: сначала аналитика и сценарии, в том числе мобильные, потом дизайн и адаптив. Примеры проектов есть на странице с нашими работами.
Частые вопросы
Что лучше для бизнеса: адаптивный сайт или отдельная мобильная версия?
Для большинства коммерческих сайтов — адаптив. Один адрес и один код проще поддерживать, у поисковиков нет вопросов, какую страницу индексировать, а контент на телефоне и компьютере не расходится. Отдельная мобильная версия оправдана редко: когда мобильный сценарий принципиально другой и под него есть отдельная команда.
Чем mobile first отличается от адаптивного дизайна?
Адаптивный дизайн — это техническое решение: один сайт, который перестраивается под ширину экрана. Mobile first — подход к проектированию: сначала решают, что и в каком порядке нужно человеку на телефоне, а затем расширяют макет для планшета и компьютера. Обычно они работают вместе: проектируют от мобильного экрана, а верстают адаптивно.
Сколько макетов нужно для адаптивного сайта?
Как правило, ключевые страницы рисуют минимум в двух вариантах — для телефона и для компьютера, а для сложных страниц добавляют планшет. Промежуточные ширины описывают правилами: как ведут себя сетка, колонки и изображения между брейкпоинтами. Для типовых блоков отдельные макеты не нужны, если они собраны из компонентов с описанным поведением.
Как узнать, сколько посетителей заходит на сайт с телефона?
В Яндекс Метрике откройте отчёт «Технологии» → «Устройства» и посмотрите долю смартфонов, планшетов и компьютеров. Полезно сравнить по устройствам конверсию в заявку: если с телефона приходит много людей, а заявок от них мало, мобильная версия, скорее всего, мешает.
Можно ли сделать адаптив для уже работающего сайта?
Можно, но результат зависит от вёрстки. Если сайт свёрстан фиксированной шириной на таблицах, адаптив сводится к переделке шаблонов, и иногда разумнее совместить его с редизайном. Если вёрстка современная, часто хватает доработки сетки, навигации, форм и таблиц.
