Мобильная версия: что ломается чаще всего
Больше половины людей приходят с телефона, и поисковики оценивают сайт именно по мобильной версии. При этом делают и проверяют сайты чаще всего на большом мониторе — отсюда разрыв между тем, как сайт выглядит у владельца, и тем, что видит клиент.
Поисковики оценивают сайт по мобильной версии, поэтому позиции определяются тем, что робот видит на телефоне. Чаще всего ломаются четыре вещи: горизонтальная прокрутка, мелкие кнопки, всплывающие окна во весь экран и неудобные формы. Проверить всё это можно за десять минут на своём же телефоне.
В этой статье7 раздела
Почему мобильная версия важнее десктопной
Поисковые системы перешли на оценку по мобильной версии. Это значит, что позиции сайта — в том числе на компьютерах — определяются тем, что робот увидел на телефоне.
Второй аргумент прозаичнее: если человек не смог оставить заявку с телефона, он не станет открывать ноутбук. Он откроет конкурента.
Если на мобильной версии скрыта часть контента, который есть на десктопной, поисковик может его не учитывать вовсе — он ориентируется на мобильную версию.
Что ломается чаще всего
Горизонтальная прокрутка
Что-то не помещается в экран, и страница ездит вбок. Обычно виноваты широкие таблицы, длинные слова, картинки фиксированной ширины или блоки с отрицательными отступами.
Мелкие кнопки и близкие ссылки
Палец толще курсора. Кнопка меньше 24 пикселей или две ссылки вплотную — человек промахивается и раздражается. Это же отмечают инструменты проверки доступности.
Текст, который нужно увеличивать
Шрифт меньше 14–15 пикселей на телефоне читается плохо. Особенно это касается юридических блоков и подписей.
Всплывающие окна во весь экран
Окно, закрывающее содержимое сразу после входа, — прямое нарушение рекомендаций поисковиков и гарантированная потеря людей.
Формы, которые неудобно заполнять
Поле телефона открывает буквенную клавиатуру, поле почты — обычную, календарь не работает. Всё это решается правильными типами полей.
Меню, которое не закрывается
Или закрывается только крестиком в неудобном месте. Человек застревает и уходит.
Тяжёлые изображения
На мобильном интернете картинка на 3 мегабайта — это несколько секунд ожидания. Часто она ещё и показывается в блоке шириной 300 пикселей.
Как проверить самому за десять минут
- Откройте сайт на своём телефонеНе в эмуляторе браузера, а на реальном устройстве, желательно не самом новом.
- Выключите Wi-FiПроверяйте на мобильном интернете — так, как это делает клиент в дороге.
- Пройдите путь клиентаНайдите услугу, цену, оставьте заявку, попробуйте позвонить по кнопке.
- Проведите пальцем вбокНа каждой странице. Если что-то ездит — есть проблема с шириной.
- Попробуйте нажать всёКнопки, ссылки в меню, телефон, мессенджеры. Всё должно срабатывать с первого раза.
- Проверьте на маленьком экранеНе все телефоны большие. Ширина 360 пикселей — распространённый случай.
Что должно быть в порядке обязательно
- Телефон нажимается и сразу набирается.
- Кнопка заявки видна без прокрутки на первом экране.
- Форма заполняется одной рукой.
- Цены читаются без увеличения.
- Адрес открывается в навигаторе по нажатию.
- Меню открывается и закрывается предсказуемо.
- Ничего не выезжает за край экрана.
Формы на телефоне
Отдельная тема, потому что именно здесь теряются заявки. Правильно настроенное поле открывает нужную клавиатуру и подставляет сохранённые данные.
- Поле телефона должно открывать цифровую клавиатуру, а не буквенную.
- Поле почты — клавиатуру с символом собаки.
- Автозаполнение должно работать: браузер подставит имя и телефон из памяти.
- Поля должны быть высотой не меньше 44 пикселей — иначе в них трудно попасть.
- Кнопка отправки не должна перекрываться клавиатурой.
Что часто ломается после обновлений
Мобильная версия ломается тихо: на компьютере всё выглядит нормально, и никто не замечает неделями.
- Добавили таблицу в текст — появилась горизонтальная прокрутка.
- Вставили виджет — он перекрыл кнопку заявки.
- Загрузили большую картинку — страница стала грузиться вдвое дольше.
- Поменяли шрифт — текст стал мельче на маленьких экранах.
- Добавили всплывающее окно — оно закрыло весь экран.
Возьмите за правило открывать сайт на телефоне после каждого обновления. Это тридцать секунд, которые экономят недели потерянных заявок.
Отдельная версия или адаптивная
Раньше делали отдельный мобильный сайт на поддомене. Сейчас это почти всегда плохая идея: два сайта нужно поддерживать, они расходятся по содержанию, возникают дубли и путаница с адресами.
Стандарт — одна адаптивная версия, которая перестраивается под ширину экрана. Один адрес, одно содержимое, одна работа по поддержке.
Частые вопросы
Как понять, что мобильная версия мешает продвижению?
Сравните показатели по устройствам в аналитике: если с телефонов отказы заметно выше, а конверсия ниже при том же трафике — проблема в мобильной версии.
Нужно ли делать отдельные тексты для мобильной версии?
Нет, содержимое должно совпадать. Скрывать часть текста на мобильной версии опасно: поисковик может его не учесть.
Что делать с таблицами на телефоне?
Дать им горизонтальную прокрутку внутри отдельного блока, чтобы ездила таблица, а не вся страница. Либо перестроить в карточки.
Всплывающее окно с акцией — можно?
Можно, если оно появляется не сразу, занимает не весь экран и легко закрывается. Окно при входе во весь экран — прямой путь к потере людей и претензиям от поисковика.
Нужно ли отдельное мобильное меню?
Не отдельное меню, а адаптированное: те же пункты, свёрнутые в кнопку. Разные наборы пунктов на телефоне и компьютере путают людей и усложняют поддержку.
Что делать с длинными таблицами на телефоне?
Дать прокрутку внутри самой таблицы, чтобы ездила она, а не вся страница. Либо перестроить строки в карточки — это читается лучше.
Материалы отвечают на общие вопросы. Разберём именно вашу ситуацию — бесплатно и без обязательств.