Большая часть посетителей многих коммерческих сайтов приходит со смартфонов, и для некоторых ниш эта доля особенно высока: доставка еды, такси, бытовые услуги, развлечения. Если сайт неудобен на маленьком экране, бизнес теряет заявки, даже не догадываясь об этом. Разберем, какими способами сайт приспосабливают под мобильные устройства и как сделать это правильно.
Три подхода к мобильным устройствам
Существует несколько способов показать сайт на смартфоне. Они различаются стоимостью, сложностью поддержки и качеством результата.
Адаптивная верстка — один сайт с одним набором страниц и адресов, который перестраивает расположение элементов в зависимости от ширины экрана. На компьютере блоки стоят в три колонки, на планшете — в две, на телефоне — в одну. Меню сворачивается в кнопку, изображения уменьшаются, шрифты подстраиваются.
Читайте также: Как вести сообщество компании
Отдельная мобильная версия — второй сайт, обычно на поддомене, который открывается при заходе со смартфона. У него свои шаблоны, иногда свой контент и упрощенная функциональность.
Резиновая верстка — устаревший подход, при котором элементы просто растягиваются или сжимаются пропорционально экрану, не меняя расположения. На современных смартфонах такой сайт обычно выглядит мелким и неудобным.
Почему адаптивная верстка стала стандартом
Сегодня адаптивный подход — основной выбор для большинства проектов, и на то есть причины.
- один адрес для каждой страницы, что упрощает продвижение и обмен ссылками;
- единый контент: не нужно поддерживать две версии текстов и цен;
- поисковые системы ориентируются на мобильную версию страницы при оценке сайта, и адаптив избавляет от рассинхронизации;
- изменения в дизайне и функциональности вносятся один раз;
- корректное отображение на любых промежуточных размерах экранов, включая планшеты и складные телефоны.
Отдельная мобильная версия иногда оправдана для очень сложных сервисов, где мобильный сценарий принципиально отличается от десктопного. Но в типовых проектах она создает больше проблем, чем решает: двойная поддержка, ошибки перенаправления, разное содержание страниц.
Принцип mobile first
Mobile first — подход к проектированию, при котором интерфейс сначала разрабатывается для смартфона, а затем расширяется для больших экранов. Это не просто техническая деталь верстки, а способ мышления.
На маленьком экране помещается мало, поэтому приходится отвечать на вопрос: что действительно важно? Какой блок пользователь должен увидеть первым, какая кнопка главная, без какой информации он не примет решение? Ответы на эти вопросы улучшают и десктопную версию, потому что убирают лишнее.
Обратный подход — сначала нарисовать сложный дизайн для широкого монитора, а потом «как-нибудь ужать» — часто приводит к мобильной версии, где важное спрятано, а второстепенное занимает весь экран.
Если блок не нужен на телефоне, задайте себе вопрос, нужен ли он вообще.
Что важно в мобильном интерфейсе
Удобство на смартфоне определяется множеством деталей. Вот ключевые из них.
Размер и расположение кнопок
Палец — не курсор мыши. Кнопки и ссылки должны быть достаточно крупными, чтобы по ним можно было уверенно попасть, и стоять на расстоянии друг от друга. Мелкие ссылки, расположенные вплотную, приводят к случайным нажатиям и раздражению. Основные действия удобно размещать в нижней части экрана, куда легко дотянуться большим пальцем.
Читаемость текста
Шрифт основного текста не должен быть слишком мелким, а строки — слишком длинными или прижатыми к краям экрана. Нужны поля по бокам и достаточный межстрочный интервал. Контраст текста и фона особенно важен, потому что смартфоном часто пользуются на улице при ярком свете.
Формы
Заполнять формы на телефоне неудобно, поэтому каждое лишнее поле снижает конверсию. Оставьте минимум: часто достаточно имени и телефона. Используйте правильные типы полей, чтобы для номера открывалась цифровая клавиатура, а для почты — клавиатура с символом «@». Подсказки и сообщения об ошибках должны быть видны сразу, а не после прокрутки.
Контакты и связь
На мобильном устройстве телефон должен быть кликабельным, чтобы звонок начинался одним нажатием. Полезно добавить кнопки мессенджеров и построения маршрута, если у компании есть офис или магазин. Для многих услуг звонок со смартфона — основной сценарий обращения.
Скорость загрузки
Мобильный интернет бывает медленным и нестабильным. Тяжелые изображения, видео на фоне, большое количество скриптов превращают загрузку в ожидание, и часть посетителей уходит, не дождавшись. Изображения нужно сжимать и отдавать в размере, соответствующем экрану, а второстепенные элементы подгружать по мере прокрутки.
Навигация на маленьком экране
Меню из десяти пунктов не помещается в шапку смартфона, поэтому его прячут под иконку. Это нормально, но важно, чтобы ключевые действия оставались на виду: телефон, корзина, поиск, кнопка заявки.
Для каталогов особенно важны фильтры. На компьютере они обычно стоят в боковой колонке, а на телефоне их выносят в отдельную панель, которая открывается по кнопке. Пользователь должен видеть, какие фильтры применены, и легко сбрасывать их.
Длинные страницы стоит снабжать понятными заголовками разделов и, при необходимости, кнопкой возврата наверх. Аккордеоны, в которых раскрываются ответы на вопросы или характеристики, помогают сократить длину страницы, но не стоит прятать в них главное — например, цену.
Отдельного внимания заслуживает закрепленная шапка. Она удобна, когда содержит телефон и кнопку заявки, но если занимает четверть экрана, оставляя для контента лишь узкую полосу, пользователю становится тесно. Хороший компромисс — компактная шапка, которая скрывается при прокрутке вниз и появляется при движении вверх.
Пример влияния на заявки
Допустим, сайт получает 3000 мобильных посетителей в месяц, а конверсия на смартфонах составляет 1% против 3% на компьютерах. Это 30 заявок вместо возможных 90. Если после переработки форм и кнопок мобильная конверсия вырастет хотя бы до 2%, бизнес получит еще 30 обращений без увеличения рекламного бюджета. Именно поэтому доработка мобильной версии часто окупается быстрее, чем расширение рекламы.
Как проверить мобильную версию
Проверка на собственном телефоне — хорошее начало, но этого недостаточно. Устройства различаются размерами экранов, браузерами и производительностью.
- Откройте сайт на нескольких реальных устройствах: недорогом смартфоне, флагмане, планшете.
- Используйте режим эмуляции устройств в браузере на компьютере, чтобы быстро пройтись по разным разрешениям.
- Пройдите ключевые сценарии: найти услугу, узнать цену, оставить заявку, позвонить, оформить заказ.
- Проверьте горизонтальную ориентацию экрана — она часто ломает верстку.
- Посмотрите в Яндекс Метрике отчеты по устройствам: если конверсия на смартфонах в разы ниже, чем на компьютерах, проблема почти наверняка в интерфейсе.
- Используйте Вебвизор, чтобы увидеть, где мобильные пользователи застревают и бросают сайт.
Типичные ошибки
Даже на сайтах с адаптивной версткой встречаются однотипные проблемы.
- горизонтальная прокрутка из-за таблицы, изображения или блока, который не помещается по ширине;
- всплывающие окна, которые закрывают весь экран и не имеют заметной кнопки закрытия;
- мелкий текст и кнопки, по которым трудно попасть;
- скрытая на мобильных информация, которая важна для решения, например цены или условия доставки;
- телефон в виде текста без возможности позвонить нажатием;
- тяжелые слайдеры и анимации, которые замедляют загрузку;
- формы, в которых клавиатура перекрывает поле ввода или кнопку отправки.
Каждая из этих ошибок по отдельности может показаться мелочью, но вместе они заметно снижают количество обращений. Хорошая привычка — раз в квартал открывать сайт со своего телефона и проходить основные сценарии так, будто вы клиент, который впервые видит компанию.
Что заложить в задание на разработку
Чтобы мобильная версия не стала сюрпризом, о ней нужно договориться на старте.
- Требуйте мобильные макеты для ключевых страниц, а не только десктопные.
- Укажите в техническом задании список устройств и разрешений, на которых будет проверяться сайт.
- Опишите мобильные сценарии отдельно: что пользователь должен иметь возможность сделать со смартфона.
- Заложите требования к скорости загрузки на мобильном интернете.
- Включите проверку на реальных устройствах в порядок приемки.
Итоги
Мобильная версия сайта — не дополнительная опция, а основной канал общения с значительной частью клиентов. Адаптивная верстка с подходом mobile first позволяет поддерживать один сайт, который удобен на любом экране. Обращайте внимание на размер кнопок, читаемость, простоту форм, кликабельные контакты и скорость загрузки. Регулярно проверяйте сайт на реальных устройствах и сравнивайте конверсию по типам устройств — эти данные быстро покажут, где теряются заявки.
