С телефонов приходит больше половины посетителей, а у многих сайтов — три четверти. При этом проверяют сайт обычно с рабочего компьютера, где всё выглядит прилично. Ниже — что ломается на маленьком экране и в каком порядке это чинить.
Сначала убедитесь, что проблема есть
Откройте Метрику, отчёт по устройствам и сравните две цифры: долю посетителей с телефонов и долю отказов у них. Если с телефонов приходит 70 % людей, а отказов там вдвое больше, чем с компьютеров, — проблема есть и она стоит вам денег.
Вторая проверка честнее любой аналитики: возьмите свой телефон, откройте сайт по мобильному интернету и попробуйте оставить заявку. Где запнулись вы — там запинаются все.
Мобильная версия или адаптивная вёрстка
Отдельный сайт вида m.site.ru сейчас почти никто не делает: это два сайта, которые надо поддерживать параллельно, и источник проблем с индексацией. Вместо этого делают адаптивную вёрстку — один сайт, который перестраивается под ширину экрана.
Поэтому «сделать мобильную версию» на практике означает «переверстать существующие страницы так, чтобы они корректно собирались на узком экране».
Что ломается чаще всего
- Горизонтальная прокрутка. Что-то шире экрана — обычно таблица или картинка — и страницу можно тянуть вбок. Выглядит как поломка.
- Мелкий текст. Меньше 16 пикселей читать невозможно, а при попытке приблизить уезжает вёрстка.
- Кнопки впритык. Пальцем попасть трудно, промахи ведут не туда.
- Таблицы. Прайс на шесть колонок на телефоне не читается ни в каком виде — нужен другой формат.
- Тяжёлые изображения. Фотография на 4 мегабайта по мобильному интернету открывается десять секунд.
- Всплывающие окна. На телефоне они занимают весь экран, а крестик оказывается за его пределами.
- Формы. Клавиатура перекрывает кнопку отправки, поля не подставляют нужный тип клавиатуры.
- Меню. Вместо нормального списка — выпадашка, из которой не видно, где ты находишься.
В каком порядке это чинить
- Горизонтальная прокрутка — она сразу читается как «сайт сломан».
- Формы и кнопки: это то, ради чего сайт существует.
- Размер текста и расстояния между элементами.
- Вес изображений и скорость открытия.
- Таблицы и сложные блоки — переносить в формат карточек.
- Всплывающие окна: на телефоне их лучше показывать позже или не показывать вовсе.
Сколько это занимает
Точечная починка мобильного вида на сайте из 5–7 страниц — обычно 3–5 рабочих дней, и это доработка, а не переделка: дизайн и позиции в поиске остаются на месте. Если же сайт сделан так, что адаптивности в нём нет вовсе, может оказаться, что переверстать дешевле, чем чинить — тогда я об этом говорю прямо.
Отдельная история — сайты на старых конструкторах и шаблонах, где мобильный вид править нельзя в принципе: доступ есть только к содержимому, а не к вёрстке. В этом случае выбор простой: жить как есть или делать новый сайт.
Чего делать не нужно
- Заказывать отдельный мобильный сайт;
- прятать на телефоне половину содержимого — поисковик смотрит именно мобильную версию;
- делать текст мельче, чтобы «влезло больше»;
- ставить мобильное приложение вместо нормального сайта.
Как понять, что получилось
Проверьте на своём телефоне:
- Страницу нельзя потянуть вбок.
- Текст читается без увеличения.
- В кнопки попадаешь пальцем с первого раза.
- Форма отправляется, кнопка видна при открытой клавиатуре.
- Главная открывается за 2–3 секунды по мобильному интернету.
Посмотрю ваш сайт на телефоне
Пришлите адрес — напишу списком, что именно ломается и сколько стоит починить.