Мобильная версия сайта: почему половина клиентов уходит с телефона
Сайт часто рисуют и утверждают на большом мониторе. А смотрит его человек с телефона в маршрутке, одной рукой, между делом. И вот на этом маленьком экране ваш красивый сайт может разваливаться: кнопка уезжает за край, текст мельчает до нечитаемого, форма не отправляется. Клиент не пишет вам «у вас неудобно» — он просто закрывает вкладку и идёт к следующему. Разбираем, почему так происходит и что с этим делать.
Мобильных уже большинство
Начнём с простого факта, который многие владельцы сайтов недооценивают: основная часть посетителей приходит к вам с телефона, а не с компьютера. Для большинства локальных бизнесов — услуги, товары, запись, заявки — доля мобильного трафика давно перевалила за половину, а в некоторых нишах доходит до трёх четвертей. Человек увидел вашу рекламу в ленте, услышал о вас в разговоре, нашёл в поиске — и в 99 случаях из 100 первое, что он делает, это открывает сайт на том экране, что под рукой. А под рукой — телефон.
Проблема в том, что делают сайт обычно наоборот — сначала под десктоп. Дизайнер рисует макет на широком мониторе, заказчик его смотрит и утверждает тоже на мониторе, всё выглядит стройно и дорого. Мобильную версию при этом либо оставляют «на потом», либо собирают в последний момент по остаточному принципу. В итоге до клиента приезжает та половина сайта, которую делали внимательнее всего, а видит он ту, которую собрали наспех.
Отсюда и разрыв, который мы регулярно встречаем, когда к нам приходят с жалобой «трафик есть, а заявок нет». Смотрим аналитику — и часто видно, что с компьютера люди доходят до формы и оставляют заявку нормально, а с телефона отваливаются на первом же экране. Сайт вроде работает, деньги на рекламу тратятся, а половина трафика утекает в никуда просто потому, что на маленьком экране им пользоваться неудобно.
Здесь важно не путать «сайт открывается на телефоне» и «сайтом удобно пользоваться с телефона». Открывается сегодня почти всё — браузер как-нибудь да покажет страницу. Вопрос в том, сможет ли человек за пять секунд понять, что вы предлагаете, и легко ли ему нажать на кнопку большим пальцем. Вот это и есть настоящая мобильная версия, а не просто «сайт, который технически грузится на смартфоне».
Что ломается на телефоне
Разберём по-человечески, что именно идёт не так на маленьком экране. Это не абстракция — это конкретные вещи, которые мы видим на чужих сайтах чуть ли не каждый день.
Мелкий текст и всё в кучу. Десктопный макет ужимается до ширины телефона, и то, что на мониторе читалось спокойно, превращается в мелкую простыню, которую приходится растягивать пальцами. Человек не будет вчитываться и зумить — он уйдёт. То же с картинками и блоками: то, что на широком экране стояло в три колонки красиво, на телефоне налезает друг на друга.
Кнопки, в которые не попасть. На компьютере есть точный курсор мыши, на телефоне — толстый палец. Если кнопки маленькие и стоят вплотную, человек промахивается, попадает не туда, раздражается. Особенно обидно, когда так ведёт себя главная кнопка — «оставить заявку», «позвонить», «в корзину». Каждый лишний промах — это шанс, что клиент передумает.
Формы, которые невозможно заполнить. Длинная форма на десять полей на десктопе выглядит солидно, а на телефоне превращается в пытку: поля крохотные, клавиатура закрывает половину экрана, при ошибке всё сбрасывается. До кнопки «отправить» доходит меньшинство. А ведь форма — это и есть точка, ради которой сайт вообще существует, момент, где трафик превращается в заявку.
Тяжёлые страницы и долгая загрузка. На телефоне часто не самый быстрый интернет, а сайт грузит гигантские неоптимизированные картинки и кучу скриптов. Пока страница собирается, человек уже закрыл её и вернулся в поиск. На мобильном терпения меньше, чем за компьютером — там ждать несколько секунд белого экрана почти никто не готов.
Вылезающие элементы и «липкие» баннеры. Всплывающее окно, которое на десктопе аккуратно висит сбоку, на телефоне занимает весь экран, а крестик закрытия уезжает за край, и его не нажать. Или снизу намертво прилипает баннер, перекрывающий контент. Человек пришёл прочитать про услугу, а вместо этого воюет с элементами интерфейса. Долго воевать он не станет.
Адаптив или отдельная версия
Когда речь заходит про мобильный сайт, всплывает вопрос: делать один сайт, который сам подстраивается под экран, или заводить отдельную мобильную версию. Разберём оба подхода честно, без религиозных войн.
Одна и та же страница сама перестраивается под ширину экрана: на мониторе три колонки, на телефоне одна, шрифты и отступы подстраиваются. Правишь контент в одном месте — меняется везде. Это сегодня стандарт и в подавляющем большинстве случаев правильный выбор: дешевле в поддержке, единый адрес, поисковики любят. Для лендинга, сайта услуг, каталога — почти всегда именно это.
Отдельно свёрстанная версия под телефоны, живущая на своём поддомене. Раньше так делали часто, сейчас — редко и по особым причинам: очень тяжёлый функционал, где мобильный сценарий кардинально отличается от десктопного. Минусы весомые: два сайта надо поддерживать параллельно, легко забыть обновить один из них, выше риск путаницы для поиска. Для обычного бизнес-сайта это почти всегда лишнее усложнение.
Сайт формально тянется под ширину экрана, но никто не думал, как он должен выглядеть на телефоне. Блоки просто сжались, порядок остался десктопным, кнопки мелкие. Технически «адаптив есть», по факту пользоваться невозможно. Это и есть та ловушка, в которую попадает большинство: галочка «мобильная версия» стоит, а клиенты всё равно уходят.
Практический вывод простой: почти всем нужен нормальный адаптивный сайт, спроектированный с мыслью о телефоне, а не отдельная версия и не «резина ради галочки». Ключевое слово тут — «спроектированный»: важно не то, что сайт тянется, а то, что кто-то заранее решил, как он ведёт себя на маленьком экране. Что видно первым, куда встаёт кнопка, что прячется в меню. Это подход mobile-first — сначала думаем про телефон, потом расширяем на десктоп, а не наоборот.
Чек-лист: теряет ли мобилка клиентов
Проверить свой сайт можно за пять минут, без разработчика. Возьмите телефон — желательно не флагман, а обычный средний, как у большинства ваших клиентов — и пройдите по пунктам честно.
Откройте главную с телефона. За пять секунд, не листая и не зумя, понятно, что вы предлагаете и что делать дальше? Виден заголовок и заметная кнопка действия? Если первый экран — это огромное фото на весь размер и больше ничего, человек не понял, куда попал, и уйдёт.
Пробегитесь по страницам. Приходится растягивать пальцами, чтобы прочитать? Значит, шрифт слишком мелкий для мобильного. Читаемый текст на телефоне — это когда вы просто листаете и читаете, ни разу не тронув экран для увеличения.
Понажимайте главные кнопки большим пальцем, не приглядываясь. Промахиваетесь? Кнопки стоят вплотную, и жмётся соседняя? Значит, они мелкие или тесные. Особенно проверьте главную кнопку заявки и телефон — по ним должно попадаться с первого раза.
Попробуйте оставить заявку как клиент. Удобно вводить? Клавиатура не закрывает нужное поле? При ошибке данные не слетают? Если заполнять муторно — большинство бросит на середине, и вы потеряете уже почти готовую заявку.
Отключите Wi-Fi, оставьте мобильную сеть и откройте сайт. Долго висит белый экран? Картинки подгружаются рывками? На телефоне терпение короткое — медленная загрузка сама по себе выгоняет часть людей ещё до того, как они что-то увидят.
Если хотя бы два-три пункта из пяти вызвали дискомфорт — вы теряете часть мобильных клиентов прямо сейчас. И заметьте: это ровно те люди, за которых вы уже заплатили, если гоните трафик через рекламу. Кстати, увидеть масштаб потери можно точно, а не на глаз — по аналитике. Как связать сайт с системами статистики и увидеть, откуда и с каких устройств приходят заявки, мы разбирали в тексте про сайт, Директ и Метрику. Там прямо видно, где отваливается мобильный трафик.
Что даёт и чего не ждать
Что даёт нормальная мобильная версия. Самое очевидное — вы перестаёте терять ту половину и больше трафика, что приходит с телефона. Люди, которые раньше закрывали неудобный сайт, теперь спокойно доходят до кнопки и оставляют заявку. При этом вы не платите за них дополнительно: трафик тот же, реклама та же — просто он перестаёт утекать в песок. Часто это самый дешёвый способ поднять число заявок: не лить больше денег в рекламу, а перестать сливать тех, кто уже пришёл.
Второй эффект — доверие. Аккуратный, удобный сайт на телефоне человек считывает как «эти ребята нормально работают». Разваленная мобилка считывается наоборот: если у них даже сайт кривой, что будет с заказом. Это невысказанное впечатление, но оно влияет на решение, особенно когда человек выбирает между вами и парой конкурентов. В том числе поэтому мы всегда смотрим мобильную версию первой — на живых проектах именно она чаще всего оказывается причиной, когда сайт есть, а заявок нет.
Теперь честно про то, чего ждать не стоит. Починка мобильной версии — не волшебная кнопка, которая утроит заявки к пятнице. Если проблема была только в мобилке, эффект будет заметный и довольно быстрый. Но если у сайта слабое предложение, непонятно, зачем вы нужны, или на вас просто не идёт целевой трафик, — идеальная мобильная вёрстка это не спасёт. Удобный телефонный сайт убирает потери на ровном месте, но не создаёт спрос там, где его нет. Мы честно об этом говорим и никогда не обещаем конкретных цифр роста — их не гарантирует никто, кто работает без вранья.
И ещё про деньги. Не всегда нужен новый сайт. Часто мобильную версию можно вылечить доработками поверх существующего — перебрать вёрстку под телефон, увеличить кнопки и шрифты, переупаковать форму, сжать картинки. Новый сайт с нуля нужен, только если текущий технически безнадёжен или собран на движке, где мобильную часть нормально не поправить. Что во сколько обходится и от чего зависит цена, мы разбирали в тексте про то, сколько стоит лендинг в Воронеже. Логика с доработкой мобилки та же: сначала смотрим, что есть, потом решаем — чинить или пересобирать.
Частые вопросы
Как понять, что у меня плохая мобильная версия сайта?
Откройте сайт с телефона и пройдите как клиент: понятен ли первый экран за пять секунд, читается ли текст без зума, попадаете ли пальцем по кнопкам, легко ли заполнить форму, быстро ли грузится на мобильном интернете. Если хотя бы два-три пункта неудобны — вы теряете часть мобильных клиентов. Точный масштаб видно в аналитике по доле устройств.
Нужна ли отдельная мобильная версия или хватит адаптивной?
Почти всем хватает нормального адаптивного сайта, спроектированного с мыслью о телефоне. Отдельная мобильная версия на поддомене сегодня нужна редко — только при тяжёлом функционале, где мобильный сценарий кардинально отличается от десктопного. Для лендинга, сайта услуг или каталога отдельная версия — лишнее усложнение и двойная поддержка.
Можно починить мобильную версию без создания сайта заново?
Чаще всего да. Мобилку лечат доработками поверх существующего сайта: перебирают вёрстку под телефон, увеличивают кнопки и шрифты, упрощают форму, сжимают картинки. Пересобирать с нуля нужно, только если сайт технически безнадёжен или сделан на движке, где мобильную часть нормально не поправить.
Что такое mobile-first и зачем это бизнесу?
Mobile-first — это подход, когда сайт сначала проектируют под телефон, а потом расширяют на десктоп, а не наоборот. Смысл в том, что большинство ваших клиентов смотрит сайт с телефона, значит, именно этот экран должен быть продуман в первую очередь. Так до клиента приезжает не остаточная, а основная, внимательно сделанная версия.
Влияет ли мобильная версия на позиции в поиске?
Да. Поисковики давно оценивают сайты в первую очередь по мобильной версии и учитывают удобство на телефоне при ранжировании. Медленный, неудобный на мобильном сайт проигрывает в выдаче. Так что нормальная мобилка — это не только про заявки напрямую, но и про то, чтобы вас вообще находили.
Короткий вывод
Большинство ваших клиентов смотрит сайт с телефона, а делают сайты чаще всего под десктоп — и на маленьком экране ломается ровно то, от чего зависит заявка: читаемость, кнопки, форма, скорость. Проверить свой сайт можно за пять минут, просто пройдя по нему с телефона как клиент. Почти всем нужен не отдельный мобильный сайт и не «резина ради галочки», а нормальный адаптив, спроектированный с мыслью о телефоне. Рабочая мобильная версия возвращает заявки, которые вы уже оплатили рекламой, и добавляет доверия — но чудес не делает и цифр роста не гарантирует. Часто чинится доработками, без пересборки с нуля. Начать стоит с честной проверки: теряете вы мобильных клиентов прямо сейчас или нет.
Посмотрим вашу мобильную версию
APST делает сайты в Воронеже с 2005 года и проектирует их с мыслью о телефоне. Пришлите ссылку на свой сайт — откроем с мобильного, честно скажем, где он теряет клиентов, и подскажем, чинится это доработками или требует пересборки.
Обсудить проект