Почему мобильный трафик - это половина ваших клиентов
Когда мы запускаем проект, первым делом смотрим статистику клиента в Яндекс Метрике или Google Analytics. У большинства малого и среднего бизнеса доля мобильного трафика - 50-70%. У кого-то больше: доставка еды, салоны красоты, такси - там до 80% заходов с телефона.
Это значит, что если ваш сайт не работает на мобильных, вы отрезаете половину потенциальных клиентов на входе. Они видят кашу из текста, не могут нажать кнопку «Заказать звонок» или просто закрывают вкладку, потому что проще позвонить конкуренту.
Мобильный пользователь не будет терпеть. На десктопе человек может поскроллить, поискать меню, увеличить текст. На телефоне времени нет: если через пару секунд не понятно, что делать - он уходит. И это не лень, это нормальное поведение: у него 10 вкладок открыто, он в маршрутке или на кассе стоит.
Что ломается без адаптивности: конкретные проблемы
Неадаптивный сайт - это не просто «выглядит некрасиво». Это конкретные технические проблемы, которые убивают конверсию.
Первое - текст нечитаем. Если шрифт меньше 16 пикселей на мобильном, пользователь вынужден зумить. Абзацы шире экрана - приходится скроллить по горизонтали. Это раздражает, и человек закрывает сайт.
Второе - кнопки и ссылки. Когда элемент меньше 44×44 пикселя, в него сложно попасть пальцем. Пользователь промахивается, тыкает три раза, злится и уходит. Мы видели сайты, где форма обратной связи вообще не помещалась на экран, и кнопку «Отправить» надо было искать свайпом.
Третье - изображения и медиа. Картинки, которые не сжаты под мобильный, грузятся долго и вылезают за край экрана. Видео без адаптивного плеера не открывается или зависает. Всё это добавляет секунды загрузки, а каждая лишняя секунда - это минус 7% конверсии.
Четвёртое - формы и поля ввода. Если поле ввода телефона не переключает клавиатуру на цифры, если капча не видна целиком, если после отправки формы нет подтверждения - заявка не приходит. Мы чиним это на каждом втором проекте.
Как Google и Яндекс наказывают неадаптивные сайты
С 2016 года Google использует mobile-first индексацию. Это значит, что поисковик оценивает сайт по мобильной версии, даже если вы продвигаетесь для десктопа. Если мобильная версия плохая - весь сайт падает в выдаче.
Яндекс делает то же самое. Если сайт не адаптивен, он получает метку «Не оптимизирован для мобильных» в результатах поиска. Это снижает кликабельность: пользователи видят пометку и переходят к конкурентам.
Кроме того, скорость загрузки на мобильных - прямой фактор ранжирования. Неадаптивный сайт весит больше, грузится дольше, и поисковик опускает его ниже. Вы можете вкладывать деньги в SEO и контекст, но если сайт тормозит на телефоне - трафик не пойдёт.
Проверить, как поисковик видит ваш сайт, можно бесплатно: в Google Search Console есть отчёт «Удобство для мобильных», в Яндекс Вебмастере - «Мобильные страницы». Если там красные строчки - у вас проблемы.
Как проверить мобильную версию своего сайта
Не нужно быть разработчиком, чтобы увидеть проблемы. Откройте сайт на своём телефоне - не в десктопном браузере с эмуляцией, а реально на смартфоне, через 4G.
Пройдите по сайту как клиент: найдите услугу, откройте форму заявки, попробуйте заполнить и отправить. Если что-то вылезает, тормозит, промахивается - это нужно чинить.
Обратите внимание на скорость. Если страница грузится дольше трёх секунд - это плохо. Проверить можно через Google PageSpeed Insights: вбиваете адрес сайта, смотрите оценку для мобильных. Если меньше 50 - критично.
Проверьте размер шрифта: если текст читается без зума - нормально. Если приходится увеличивать - шрифт мелкий. Проверьте кнопки: если попадаете с первого раза пальцем - хорошо, если промахиваетесь - элементы слишком мелкие.
И последнее: откройте сайт на разных устройствах. iPhone, Android, планшет. Бывает, что на одном всё ок, а на другом едет вёрстка. Если у вас нет под рукой десятка гаджетов - попросите знакомых или воспользуйтесь BrowserStack.
Адаптивная вёрстка, отдельная мобильная версия или приложение: что выбрать
Адаптивная вёрстка - это когда один сайт подстраивается под любой экран. Это стандарт сейчас, и в 90% случаев это правильный выбор. Дешевле в разработке и поддержке, удобнее для SEO, работает везде.
Отдельная мобильная версия (m.site.ru) - устаревший вариант. Раньше так делали, потому что адаптивная вёрстка была сложнее. Сейчас это лишний геморрой: нужно поддерживать два сайта, контент дублируется, поисковики путаются. Не советуем.
Мобильное приложение имеет смысл, если у вас сложный сервис с частым использованием: доставка, такси, банк, соцсеть. Для обычного сайта или интернет-магазина приложение избыточно. Оно дорого стоит, требует постоянной поддержки, и пользователи не будут его устанавливать ради одной покупки.
Мы в EFIMOV DEV делаем адаптивные сайты по умолчанию: на React, с нормальной вёрсткой под все экраны. Если проект сложнее - например, социальная платформа или сервис с личным кабинетом - пишем веб-приложение и, если нужно, мобильные приложения. Но для малого бизнеса адаптивный сайт закрывает задачу полностью.
Сколько стоит сделать сайт адаптивным
Если сайт делается с нуля, адаптивность включена в стоимость. Нормальная студия не сдаст проект без мобильной версии - это базовое требование.
Если у вас уже есть сайт, и нужно добавить адаптивность - зависит от того, как он сделан. Старый сайт на таблицах или конструкторе 10-летней давности проще переделать полностью, чем латать. Современный сайт на React или WordPress с нормальной темой можно доработать: это от пары дней работы до недели, в зависимости от объёма.
На нашем сайте опубликована вилка по услугам: лендинги, корпоративные сайты, интернет-магазины. Все цены - за адаптивную версию. Если нужна доработка существующего сайта - напишите нам, пришлём смету после брифа.
Важно: не ведитесь на «сделаем мобильную версию за 5 тысяч». Адаптивность - это не галочка, это проработка всех страниц, форм, меню, взаимодействий. Дешёвая работа означает, что на телефоне будет криво, и вы потеряете клиентов.
Чек-лист: что должно работать в мобильной версии
Когда принимаете сайт у подрядчика или проверяете свой, пройдитесь по этому списку. Если хоть один пункт не выполнен - возвращайте на доработку.
- Текст читается без зума, шрифт не меньше 16px
- Все кнопки и ссылки кликабельны с первого раза, размер элемента не меньше 44×44 пикселя
- Меню открывается и закрывается, все разделы доступны
- Формы заполняются без проблем: клавиатура переключается на нужный тип (цифры для телефона, email для почты)
- Картинки и видео помещаются на экран, не вылезают за край
- Страница грузится за 3 секунды или быстрее на 4G
- Нет горизонтального скролла
- Все модальные окна, попапы, формы видны целиком
- После отправки формы приходит подтверждение (на экране или на почту)
- Сайт нормально выглядит на iPhone, Android и планшете
Когда адаптивность не спасёт: другие проблемы мобильного трафика
Бывает, что сайт адаптивный, но заявок с мобильных всё равно нет. Тогда проблема не в вёрстке, а в контенте или логике.
Первое - длинные формы. На мобильном заполнять 10 полей никто не будет. Оставьте имя, телефон, максимум комментарий. Остальное спросите потом.
Второе - нет явного действия. На десктопе пользователь может изучить весь сайт, на мобильном ему нужна одна кнопка: «Заказать», «Позвонить», «Записаться». Если её нет в первом экране - он уходит.
Третье - тяжёлый контент. Видео на главной, которое весит 50 мегабайт, или слайдер с десятью фотками. На 4G это грузится вечность. Оптимизируйте медиа или уберите лишнее.
Четвёртое - нет контактов. На мобильном пользователь хочет позвонить сразу. Если номер телефона спрятан в подвале или не кликабелен - вы теряете звонки.
Половина ваших посетителей заходит с телефона, и если сайт на мобильном не работает - вы теряете заявки, звонки и заказы. Проверьте сайт на своём смартфоне: читается ли текст, кликаются ли кнопки, грузится ли страница за 3 секунды. Если нет - чините. Адаптивность - это не дизайнерская прихоть, это половина вашего трафика и выручки.
Частые вопросы
Можно ли проверить, сколько я теряю клиентов из-за плохой мобильной версии?
Да. Зайдите в Яндекс Метрику или Google Analytics, постройте отчёт по устройствам (десктоп/мобильные) и сравните показатель отказов. Если на мобильных отказов больше 60%, а на десктопе 30-40% - проблема в мобильной версии. Ещё посмотрите на конверсию в заявки: если с телефонов заявок в разы меньше, чем с компьютеров, при том что трафика поровну - сайт не работает на мобильных.
Мой сайт сделан на Tilda/Wix - там же адаптивность по умолчанию?
В конструкторах адаптивность есть, но как она реализована - зависит от шаблона и от того, как вы его настроили. Часто блоки едут, текст наползает на картинки, кнопки слипаются. Откройте сайт на телефоне и проверьте каждую страницу. Если что-то криво - правьте в редакторе мобильной версии (он есть в Tilda и Wix).
Сколько времени занимает сделать сайт адаптивным, если он уже есть?
Если сайт современный (последние 3-5 лет), на нормальной CMS или фреймворке - от недели до двух. Если старый, на самописном движке или таблицах - быстрее переделать с нуля. Точный срок зависит от количества страниц, сложности вёрстки и интерактива. Пришлите ссылку на сайт - посмотрим и скажем.
Что лучше: переделать старый сайт или сделать новый?
Если сайту больше 5 лет, он на устаревшем движке, и вы планируете его развивать - дешевле и быстрее сделать новый. Вы получите современный стек, нормальную адаптивность, быструю загрузку и возможность легко добавлять функции. Латать старый код - это бесконечные костыли, которые всё равно рано или поздно сломаются.