Вы открываете свой сайт с рабочего компьютера. Широкий монитор, офисный интернет, шрифты крупные, всё на своих местах. С этой картинкой в голове обсуждаются реклама, тексты и позиции.
В это же время половина посетителей смотрит совсем другой сайт. Экран шириной с ладонь, палец вместо мыши, сеть на двух делениях в машине. Формально мобильная версия сайта есть почти у всех. Работает она по-разному: где-то съехала форма, где-то кнопку заказа накрыло всплывающим окном, где-то номер телефона нельзя нажать пальцем.
Разбираем без вёрстки и терминов: чем адаптив отличается от отдельной мобильной версии, как проверить свой сайт за десять минут, какие поломки встречаются чаще всего и в какой момент дешевле собрать сайт заново.
Почему владелец узнаёт о поломке последним
Коротко. Вы смотрите сайт в условиях, которых у клиента нет: широкий экран, быстрая сеть и знание, где что лежит. Поломки живут на той половине трафика, куда вы не заглядываете.
Разница начинается с ширины. На мониторе три блока стоят рядом и умещаются в первый экран целиком. Те же блоки на телефоне выстраиваются в столбик, и привычная вам картинка уезжает на третий экран. Порядок задаёт вёрстка, а она про ваши приоритеты ничего не знает.
Второе отличие — способ нажатия. Мышь попадает в ссылку высотой в десять пикселей с первого раза, палец промахивается и задевает соседний пункт. Повторять попытку человек обычно не станет.
Третья причина — сеть. Офисный Wi-Fi прячет вес страницы: тяжёлые фотографии и десяток скриптов открываются на нём мгновенно. На мобильном интернете в дороге та же страница собирается дольше, и часть людей до первого экрана не доезжает. Что именно тормозит, мы разбирали в материале как ускорить загрузку сайта.
Четвёртая причина самая неудобная. Вы знаете свой сайт наизусть и проходите его вслепую, поэтому не замечаете мест, где посторонний застревает.
Один набор блоков на двух экранах живёт по-разному
Совет. Открывайте сайт с телефона так же, как это делает клиент: через поиск, в режиме инкогнито, на мобильном интернете. Закладка, сохранённый пароль и офисный Wi-Fi показывают вам версию для своих.
Адаптив, отдельная мобильная версия и что делают сейчас
Коротко. Сейчас делают адаптив: один адрес, одна страница, вёрстка сама подстраивается под ширину экрана. Отдельная версия на поддомене m. осталась в наследство и требует двойной работы.
Отдельная мобильная версия — второй сайт на поддомене вида m.example.ru. Свои страницы, свои адреса, своё содержание. Яндекс такой вариант допускает, если структура повторяет основной домен: с каждой страницы десктопа должен вести редирект на аналогичную мобильную, а в коде десктопа — стоять ссылка rel=»alternate» для экранов до 640 пикселей.
Нет времени разбираться самому? Разберём ваш сайт по 20+ SEO-параметрам и покажем точки роста — бесплатно и без обязательств.
Получить аудитАдаптивная вёрстка обходится одним адресом. Тот же HTML подстраивается под ширину экрана правилами стилей: колонки схлопываются в столбик, меню сворачивается, картинки ужимаются. Google рекомендует именно этот вариант и называет его самым простым в реализации и поддержке. Яндекс принимает и адаптив, и динамическую вёрстку, и поддомен, но для адаптива дополнительных настроек не требует вовсе.
Отдельная версия на m.
второй сайт на поддомене
- Два комплекта страниц и два адреса
- Каждая правка делается дважды
- Нужны редирект и rel=alternate
- Тексты со временем расходятся
Адаптивная вёрстка
один адрес для всех экранов
- Одна страница, один набор текстов
- Правка делается один раз
- Дополнительных настроек не требует
- Рекомендованный Google вариант
Для владельца разница считается деньгами на дистанции. На двух версиях правки делаются дважды, и рано или поздно версии расходятся: цену обновили на десктопе, а с телефона люди видят прошлогоднюю. Разрыв копится тихо, а обнаруживается звонком клиента, который «видел другую цену».
Есть требование, о котором забывают при любом варианте. Google индексирует мобильную версию страницы и ждёт, что содержание совпадает с десктопной: те же тексты, заголовки, разметка и метатеги. Прятать блоки в аккордеоны и вкладки разрешено прямо, а вот вырезать текст «чтобы на телефоне было покороче» нельзя: поисковик станет работать с остатком.
Проверка за десять минут: пять шагов
Коротко. Возьмите свой телефон и дойдите до заявки как обычный клиент. Дальше прогоните адрес через Вебмастер и PageSpeed Insights и загляните в отчёт по устройствам в Метрике.
- Свой телефон, мобильный интернетРежим инкогнито, поиск по названию компании, дальше по-клиентски: найти услугу, увидеть цену, нажать телефон, отправить форму.
- Режим устройства в браузереВ Chrome панель разработчика и значок телефона включают эмуляцию. Поставьте ширину 360 пикселей и прокрутите главную, страницу услуги и контакты.
- Проверка мобильных страниц в ВебмастереИнструмент разбирает конкретный адрес и показывает ошибки: мелкий шрифт, боковую прокрутку, отсутствие метатега viewport.
- PageSpeed InsightsМобильная вкладка открывается первой. Смотрите и лабораторные показатели, и данные реальных пользователей.
- Отчёт по устройствам в МетрикеДоля визитов со смартфонов и конверсия по каждому типу устройства. Цифры покажут, во сколько обходятся поломки.
Первый шаг важнее остальных четырёх. Инструменты находят технические ошибки, а сценарий «найти услугу, увидеть цену, отправить заявку» проверяете только вы. Запишите сразу после попытки: где притормозили, где промахнулись, где захотелось всё закрыть.
Дальше идут формальные требования Яндекса к мобильным страницам. Половина из них проверяется глазами:
- В коде страницы стоит метатег viewport со значением width=device-width, initial-scale=1
- Страница открывается без горизонтальной прокрутки на экране от 320 пикселей
- Код ответа сервера по этому адресу — 200
- Текст читается без растягивания пальцами
- Технологий Flash, Silverlight и Java-апплетов на страницах нет
Инструмент «Проверка мобильных страниц» лежит в Вебмастере в разделе инструментов и разбирает отдельный адрес. Весь сайт держит под наблюдением «Диагностика сайта»: проблему с мобилопригодностью она присылает уведомлением. Если кабинет ещё не заведён, порядок действий описан в статье как добавить сайт в Яндекс Вебмастер.
С Google картина поменялась. В декабре 2023 года он закрыл отчёт Mobile Usability в Search Console, тест на мобильную пригодность и его API. Взамен предлагаются Lighthouse в панели разработчика Chrome и PageSpeed Insights.
Метрика: сравните заявки с телефона и с компьютера
Коротко. Отчёты, Технологии, Устройства. Выберите цель и посмотрите конверсию по типам устройств: разрыв в разы при сопоставимом трафике — повод искать поломку.
Отчёт «Устройства» лежит в группе «Технологии». Данные сгруппированы по типам устройств, производителям и моделям, типы — персональные компьютеры, смартфоны, планшеты и телевизоры. Отчёт поддерживает все настройки Метрики, кроме моделей атрибуции, поэтому цель выбирается прямо в нём.
Штатный отчёт «Конверсии» для этой задачи не подойдёт: своих группировок он не принимает и сегменты не сравнивает.
| Что смотрите | Где | О чём говорит |
|---|---|---|
| Доля визитов со смартфонов | Технологии, Устройства | Цена вопроса: сколько людей видят мобильную версию |
| Конверсия в цель по типам устройств | Тот же отчёт с выбранной целью | Разрыв в разы указывает на поломку в сценарии заявки |
| Отправки формы со смартфонов | Тот же отчёт, цель по форме | Ноль за месяц при живом трафике: форма мертва |
| Глубина просмотра и время | Тот же отчёт | Одна страница и полминуты: до содержания не добираются |
| Записи мобильных сессий | Вебвизор | Видны промахи по кнопкам и брошенные формы |
Целей в счётчике может не оказаться вовсе, тогда отчёт покажет только визиты. Как их завести и что считать целью для сайта услуг, разобрано в материале цели в Яндекс.Метрике.
Оговорка про разрыв. Некоторая разница между устройствами нормальна: человек нашёл вас с телефона в дороге, а заказ оформил вечером с ноутбука. Настораживает другое: со смартфонов идёт большая часть визитов, а целевых действий почти нет.
Дальше включайте Вебвизор и посмотрите десяток мобильных записей подряд. Там видно то, чего не покажет автоматический тест: как человек трижды промахивается по кнопке и уходит на середине формы.
Девять поломок, из-за которых с телефона не заказывают
Коротко. Список короткий и повторяется от сайта к сайту: мелкий текст, кнопки впритык, боковая прокрутка, мёртвый телефон, длинная форма и окно на пол-экрана.
| Поломка | Как заметить с телефона | Кто чинит |
|---|---|---|
| Мелкий текст | Приходится растягивать пальцами | Верстальщик |
| Кнопки и ссылки впритык | Промахиваетесь по соседнему пункту | Верстальщик |
| Горизонтальная прокрутка | Страница ездит вбок, край текста обрезан | Верстальщик |
| Номер телефона не нажимается | Касание ничего не открывает | Разработчик, дело на десять минут |
| Форма на восемь полей | Клавиатура закрывает поля, заполняете минуту | Владелец решает, что убрать |
| Окно на пол-экрана | Крестик мелкий или появляется с задержкой | Владелец и разработчик |
| Тяжёлые картинки | Первый экран собирается по кускам | Разработчик |
| Меню, в котором нет услуг | За тремя полосками общие разделы | Владелец задаёт структуру |
| Липкие плашки и виджеты | Шапка, чат и баннер съедают треть экрана | Владелец решает, что оставить |
По размерам есть внятный ориентир. WCAG 2.2, рекомендация W3C от 5 октября 2023 года, задаёт минимум для кликабельного элемента: критерий 2.5.8 требует 24 на 24 CSS-пикселя на уровне AA, критерий 2.5.5 поднимает планку до 44 на 44 на уровне AAA. Для кнопки заказа и номера телефона ориентируйтесь на второе число.
Про телефон отдельно. Номер должен быть ссылкой с протоколом tel, тогда касание сразу открывает набор. Картинка с номером или простой текст на смартфоне бесполезны: выделять и копировать пальцем никто не станет.
Про всплывающие окна. Google с 10 января 2017 года понижает страницы, где содержание перекрыто навязчивым окном сразу после перехода из выдачи. Исключения он назвал сам: баннеры cookie и возрастные ограничения по закону, диалоги входа и небольшие баннеры, которые легко закрываются. Окно на весь экран с крестиком в три пикселя под описание не подходит.
Осторожно. Попап с таймером на телефоне работает хуже всего: он закрывает единственный экран, крестик мелкий, а пальцем человек чаще попадает по кнопке внутри окна. Если попап нужен, показывайте его после половины прокрутки и делайте зону закрытия крупной.
Про картинки и ленивую загрузку. Тяжёлые фотографии на мобильном интернете съедают первый экран, поэтому их сжимают и подгружают по мере прокрутки. Тут Google предупреждает прямо: основное содержание нельзя подгружать по действию пользователя, будь то свайп, клик или ввод текста. Робот таких действий не выполняет.
Разбираться в вёрстке самому необязательно: оставьте заявку на бесплатный экспресс-аудит, и мы пройдём сценарий заказа с реального смартфона и пришлём список поломок со скриншотами.
Как мобильные поломки бьют по продвижению
Коротко. Мобилопригодность входит в ранжирование Яндекса с февраля 2016 года. Google с июля 2024 сканирует весь веб мобильным роботом и сайты, недоступные с телефона, в индекс не берёт.
Яндекс включил мобилопригодность в ранжирование мобильной выдачи алгоритмом «Владивосток» 2 февраля 2016 года. Через год метку «мобильная версия» из результатов поиска убрали: адаптив стал нормой, помечать оказалось нечего. Фактор остался, о чём в том же объявлении сказано прямым текстом.
У Google формулировка жёстче. После 5 июля 2024 года все сайты сканируются краулером Googlebot Smartphone, и сайты, недоступные с мобильных устройств, больше не индексируются. Обычному адаптивному сайту делать ничего не нужно, переход его не касается.
Отсюда следует неочевидное. В поиске работает та версия страницы, которую увидел мобильный робот. Спрятали на телефоне половину описания услуги, отзывы и цены — оценивать вас будут по остатку.
Второй канал влияния — поведение людей. Посетитель, который открыл страницу со смартфона, не смог прочитать текст и вернулся в выдачу, попадает в те же сигналы, что и гость с компьютера. Механику мы разбирали в статье про поведенческие факторы.
Третий — деньги на рекламе. Клик из Директа стоит одинаково с любого устройства, и посадочная с уехавшей формой жжёт бюджет не хуже мусорных запросов.
Что чинить первым и что поручить подрядчику
Коротко. Сначала то, что физически мешает оставить заявку. Потом то, что раздражает и замедляет. Оформление двигается в конец очереди.
- БлокирующееФорма не отправляется, номер телефона не нажимается, кнопка заказа не видна с первого экрана, страница ездит вбок.
- ТрениеМелкий текст, кнопки впритык, окно поверх первого экрана, восемь полей в форме вместо двух.
- ВесНесжатые фотографии, лишние шрифты, скрипты чатов и виджетов, которые грузятся до содержания.
- СтруктураМеню без прямых пунктов на услуги, цена на четвёртом экране, порядок блоков от важного к неважному.
Первые два уровня владелец видит сам, с телефона, за десять минут и без единой строки кода. Третий отдают исполнителю: сжатие картинок, ленивая загрузка и правка стилей — работа верстальщика. Четвёртый остаётся за вами: порядок блоков и содержание меню знаете только вы.
Формулировка задачи решает половину дела. «Сделайте нормально на мобильных» подрядчик прочитает как «перекрасьте кнопки» и будет по-своему прав. Работает список из пяти полей: адрес страницы, модель телефона и браузер, что нажимали, что произошло, скриншот.
Совет. Заведите в телефоне заметку и складывайте туда скриншоты поломок, которые замечаете сами или слышите от клиентов. Через месяц получится техзадание из реальных ситуаций, собранное без единого совещания.
Мобильные правки удобно делать одним заходом с работой над удобством сайта в целом, списки сильно пересекаются. Подробные разборы есть в материалах юзабилити сайта и как повысить конверсию сайта.
Когда дешевле переделать сайт целиком
Коротко. Когда правка на телефоне ломает компьютер, шаблон снят с поддержки, а смета на латание подобралась к стоимости нового сайта.
- Сайт собран до середины десятых, ширина фиксированная, вёрстка на таблицах
- Живёт отдельная версия на m., и содержание там разошлось с основным
- Движок или шаблон сняты с поддержки, обновления не ставятся
- Каждая правка на телефоне ломает что-нибудь на компьютере
- Смета на исправления подобралась к стоимости нового сайта
- Внутри конструктор десятилетней давности, выгрузить из него нечего
Экономика тут простая. Латание чужого шаблона считается по часам, а часы идут быстро: верстальщик сначала разбирается в коде, потом правит, потом чинит задетое по дороге. Современный шаблон отдаёт адаптив из коробки, и бюджет уходит на структуру и тексты. Ориентиры по деньгам и срокам собраны в статьях сколько стоит разработка сайта и сколько стоит поддержка сайта.
Обратное тоже верно, и об этом говорят реже. Сайту три-четыре года, адаптив есть, ломаются два места — редизайн ради мобильных не нужен. Неделя работы верстальщика по списку закроет большую часть претензий.
Проверить, что творится на вашем сайте с телефона, можно бесплатно: оставьте заявку на экспресс-аудит, и мы пройдём путь клиента с реального смартфона. Мы ведём SEO-продвижение, Яндекс.Директ и разработку сайтов одной командой, поэтому правки по мобильной вёрстке не придётся пересылать между тремя подрядчиками.
