Адаптивный сайт: почему без мобильной версии бизнес теряет клиентов

Посмотрите на статистику любого коммерческого сайта, и почти наверняка окажется, что большинство посетителей приходят со смартфонов. Человек увидел рекламу в Instagram, нашёл компанию на карте, получил ссылку в WhatsApp — и открыл сайт на телефоне. Если сайт неудобен на маленьком экране, он закрывает вкладку и идёт к конкуренту. Адаптивный сайт — не дополнительная опция, а базовое требование.

Что такое адаптивный сайт

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

Адаптивный сайт или отдельная мобильная версия

Раньше часто делали отдельную мобильную версию на поддомене вида m.example.com. Это устаревший подход:

• нужно поддерживать два сайта;
• мобильная версия часто «урезана» и содержит меньше информации;
• сложнее с SEO: два набора адресов, риск дублей.

Адаптивная вёрстка решает задачу одним сайтом: всё содержимое доступно на любом устройстве, а изменения вносятся один раз.

Почему это важно для бизнеса

Заявки

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

SEO

Google индексирует и оценивает сайты в первую очередь по мобильной версии. Неудобная мобильная версия — минус в ранжировании. Подробнее — в статье о мобильной версии и SEO.

Реклама

Трафик из соцсетей почти полностью мобильный. Платить за переходы на сайт, который неудобен на телефоне, — выбрасывать бюджет.

Доверие

Сайт, который «разъезжается» на смартфоне, выглядит заброшенным и вызывает сомнения в компании.

Что значит «удобно на телефоне»

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

Как проверить свой сайт

1. Откройте сайт на своём смартфоне и пройдите путь клиента: найти услугу, цену, примеры работ, отправить заявку.
2. Попросите кого-то с другим телефоном сделать то же самое.
3. В браузере Chrome включите режим устройства в инструментах разработчика и посмотрите разные размеры экранов.
4. Проверьте скорость мобильной версии в PageSpeed Insights.
5. Сравните в аналитике конверсию с мобильных и компьютеров — большая разница указывает на проблемы.

Mobile-first: проектирование от телефона

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

Адаптивность не только вёрстки

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

Планшеты и большие экраны

Адаптивность — это не только телефоны. На планшетах сайт должен корректно перестраиваться в промежуточный вид, а на больших мониторах — не растягиваться на всю ширину так, что строки текста становятся нечитаемо длинными. Хорошая вёрстка ограничивает ширину содержимого и выглядит аккуратно на любом экране — от небольшого смартфона до широкого монитора.

Админ-панель тоже должна быть адаптивной

Владельцу бизнеса удобно проверить новую заявку, поменять цену или опубликовать акцию с телефона. Админ-панели на моих проектах работают и на смартфонах.

Частые ошибки

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

Как я делаю адаптивные сайты

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

Частые вопросы

Можно ли сделать адаптивным существующий сайт? Иногда да, если вёрстка позволяет. Часто, если сайт старый, переверстать его с нуля проще и дешевле, чем исправлять.

Нужно ли отдельное мобильное приложение? Для большинства компаний — нет. Адаптивный сайт решает задачи клиентов на телефоне без установки приложения.

Входит ли адаптивность в стоимость сайта? В моих проектах — всегда, это не дополнительная опция.

Итог

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