Адаптивность сайта: почему это важно и как повысить ее уровень

Адаптивность сайта перестала быть преимуществом и стала условием работы: подавляющее большинство визитов приходит со смартфонов, а поисковые системы оценивают ресурс по мобильной версии, а не по той, что вы видите на своём мониторе. При этом «у нас адаптивный шаблон» и «у нас работает мобильная версия» — совершенно разные утверждения. Я регулярно открываю на телефоне сайты, где таблица уезжает за край экрана, чат перекрывает кнопку заказа, а поле формы при нажатии увеличивает страницу так, что дальше пользоваться ей невозможно.

Ниже — что именно проверять, как проверять, чтобы не обмануться, и какие правки закрывают большую часть типовых проблем без переделки сайта. Порядок построен от быстрых проверок к работам, требующим разработчика.

Что такое адаптивность на практике

Технически адаптивность — способность страницы подстраиваться под ширину экрана: блоки перестраиваются в одну колонку, шрифты остаются читаемыми, ничего не выходит за границы, меню сворачивается.

Практически критерий другой и он строже: человек с телефона может сделать то же самое, что и с компьютера, за то же количество действий. Если ему приходится масштабировать страницу пальцами, промахиваться по кнопкам, искать крестик у всплывающего окна или переключаться на компьютер, чтобы оформить заказ, — сайт не адаптивен, каким бы современным ни был шаблон.

Разрыв между этими двумя определениями объясняется просто. Шаблон отвечает за сетку. Всё остальное появляется потом: виджеты, формы, таблицы в текстах, встроенные карты, всплывающие окна, картинки, загруженные редактором в оригинальном размере. Каждый из этих элементов добавляет свой шанс сломать мобильный вид, и ни один из них шаблоном не контролируется.

Почему это решает

Причина	Что происходит
Доля мобильного трафика	В большинстве ниш от 60 до 80% визитов
Оценка по мобильной версии	Системы смотрят на неё, а не на десктопную
Поведение людей	Неудобная версия даёт возвраты в выдачу
Конверсия	На мобильных обычно ниже, при проблемах — в разы
Скорость	Мобильный интернет медленнее, требования жёстче
Локальный спрос	Запросы «рядом со мной» задают почти всегда с телефона

Последняя строка недооценена. Человек, который ищет услугу поблизости прямо сейчас, находится в самой горячей стадии — он готов позвонить в ближайшие минуты. И он на телефоне. Любое препятствие в мобильной версии в этот момент стоит дороже, чем то же препятствие на компьютере, где человек чаще изучает и сравнивает.

Три подхода к мобильной версии

Адаптивная вёрстка. Один сайт, один адрес, оформление перестраивается под ширину экрана. Сегодня это стандарт: проще в поддержке, нет дублей содержания, все ссылки ведут на один адрес и накапливают вес вместе. Если вы делаете новый сайт, вопрос выбора не стоит.

Отдельная мобильная версия на поддомене. Устаревший подход: фактически два сайта, которые надо синхронизировать. Содержание расходится, часть страниц существует только в одной версии, требуется корректная взаимная разметка версий и переадресация по устройству. Если у вас такая схема, переход на адаптивную вёрстку обычно оправдан, но выполняется как переезд: постраничные соответствия, перенаправления с кодом 301, обновление карты сайта, контроль индексации в течение пары месяцев.

Динамическая отдача. Один адрес, но сервер отдаёт разный код в зависимости от устройства. Сложно в поддержке, требует правильных заголовков, чтобы система понимала, что версии связаны, и легко ломается при кэшировании: кэш может отдать мобильному посетителю десктопную версию и наоборот. Оправдана редко — обычно там, где мобильный и десктопный сценарии принципиально разные.

Подробнее об этом — в статье «Оптимизация сайта для мобильных устройств: почему это важно и как правильно ее выполнить».

Что проверять: список из двенадцати пунктов

1. Метатег viewport. Без него страница отдаётся в десктопном виде и уменьшается целиком. Проверяется поиском по исходному коду.
2. Размер основного шрифта. От 16 пикселей. Мельче — текст не читается без увеличения, и часть посетителей просто уходит.
3. Горизонтальная прокрутка. Её быть не должно ни на одной странице. Появляется обычно из-за широкой таблицы, длинного адреса без переноса или блока с фиксированной шириной в пикселях.
4. Таблицы. Должны прокручиваться внутри своего контейнера, а не растягивать страницу.
5. Размер элементов нажатия. Около 44 пикселей минимум по каждой стороне, между соседними — отступ. Иначе палец попадает не туда.
6. Меню. Открывается, закрывается, не перекрывает содержимое, работает на длинных списках разделов с прокруткой.
7. Формы. Правильные типы полей: для телефона — числовая клавиатура, для почты — соответствующая раскладка. Поля не должны вызывать увеличение страницы при фокусе.
8. Телефон. Оформлен ссылкой, нажатие сразу инициирует вызов.
9. Всплывающие окна. Закрываются крупным крестиком, не занимают весь экран, не блокируют прокрутку.
10. Виджеты. Чат и кнопка обратного звонка не перекрывают кнопки заказа и не наезжают друг на друга.
11. Изображения. Не выходят за границы, имеют заданные размеры, не тянутся в оригинальном весе.
12. Встроенные объекты. Карты, видео, калькуляторы — не шире экрана и не ломают прокрутку страницы.

Проходится этот список за полчаса на одном телефоне. На большинстве сайтов набирается три-пять нарушений, и почти всегда они появились не при разработке, а позже — вместе с новым виджетом, новой статьёй или обновлением плагина.

Как проверять, чтобы не обмануться

Помогу с продвижением: продвижение сайтов белыми методами — вывожу сайты в топ Яндекса белыми методами.

Эмулятор в браузере показывает не то, что видит ваш посетитель. Он рисует сетку в узком окне, но не воспроизводит ни слабый процессор, ни мобильный канал, ни поведение виджетов, ни экранную клавиатуру, которая закрывает половину экрана при заполнении формы. Сайт, идеальный в эмуляторе, на живом телефоне может быть непригоден к использованию.

Рабочий порядок проверки выглядит так.

• Живое устройство, не флагман. Возьмите обычный недорогой телефон — такой, какой у большинства ваших клиентов.
• Мобильный интернет, не домашний Wi-Fi. Разница в ощущениях радикальная, особенно на страницах с картами и видео.
• Сценарий целиком. Не просто «открыть главную», а пройти путь клиента: найти услугу, посмотреть цену, заполнить форму, отправить, получить подтверждение.
• Два браузера. Мобильные версии ломаются по-разному в разных браузерах, и особенно часто расходятся поведение форм и отображение шрифтов.
• Данные из Метрики. Сравните конверсию и отказы на мобильных и на компьютерах. Разрыв в конверсии больше чем вдвое — почти всегда признак технических проблем, а не аудитории.
• Отчёт по разрешениям экрана. Посмотрите, какие ширины реально встречаются у ваших посетителей, и проверяйте на них, а не на абстрактных «мобильных».

Что ломается чаще всего

Что ломается	Как проявляется	Как чинится
Широкая таблица в тексте	Страница шире экрана, ползёт вбок	Обернуть в блок с прокруткой
Чат поверх кнопки	Кнопка заказа недоступна	Сдвинуть виджет или скрыть на мобильных
Длинная форма	Заполнение бросают на середине	Сократить до двух-трёх полей
Тяжёлые изображения	Долгая загрузка на мобильном канале	Сжать, отдавать размер под экран
Мелкий шрифт	Приходится увеличивать пальцами	Основной текст от 16 пикселей
Всплывающее окно на весь экран	Невозможно закрыть, человек уходит	Крупный крестик, показ по прокрутке
Встроенная карта	Перехватывает прокрутку страницы	Активировать карту по нажатию

Общее у всех строк одно: ни одна поломка не связана с шаблоном. Все они добавлены после запуска — редактором, маркетологом, плагином. Поэтому мобильную версию нельзя проверить один раз при сдаче сайта и забыть: её проверяют регулярно, как и любую другую техническую характеристику.

Мобильный сценарий заказа: где именно теряются люди

Проверка по пунктам показывает, что сломано. Но чтобы понять, сколько это стоит, надо пройти путь клиента целиком и засечь, на каком шаге он обрывается. Сценарий для сайта услуг состоит из шести шагов, и на каждом есть свой типовой обрыв.

Шаг первый: человек попал на страницу из поиска. Первый экран должен за пару секунд сообщить, что это та самая услуга и что вы работаете в его городе. Типовой обрыв — большая картинка на весь экран, из-за которой текст и заголовок оказываются ниже видимой области. На компьютере такой первый экран смотрится эффектно, на телефоне он означает, что человек видит только фотографию и не понимает, куда попал.

Шаг второй: он ищет цену. Обрыв здесь — прайс, свёрстанный таблицей на шесть колонок, или цены, выложенные картинкой. Картинка с прайсом на телефоне нечитаема, а увеличить её не всегда возможно. Цены на мобильных должны быть текстом и в один-два столбца.

Тему разбирал отдельно: «Кроссбраузерность сайта: что это такое и почему это важно».

Шаг третий: он проверяет, можно ли вам доверять. Отзывы, примеры работ, реквизиты. Типовой обрыв — галерея работ на скрипте, который на мобильных не листается или открывает фотографию на весь экран без возможности закрыть.

Шаг четвёртый: он решает связаться. Здесь всё решает доступность действия. Телефон в шапке ссылкой, кнопка мессенджера, короткая форма. Обрыв — когда единственный способ связи находится в подвале и до него надо пролистать длинную страницу.

Шаг пятый: он заполняет форму. Обрывы: клавиатура закрывает поле, страница увеличивается при фокусе, кнопка отправки уезжает под панель браузера, маска ввода телефона мешает вставить номер из буфера обмена.

Шаг шестой: он получает подтверждение. Обрыв — сообщение об успехе, которое появляется вверху страницы, тогда как человек находится внизу и его не видит. Он не понимает, отправилось ли, и отправляет ещё раз или уходит. Подтверждение должно быть там, где находится взгляд в момент нажатия.

Пройдите эти шесть шагов на своём сайте с телефона и запишите, где споткнулись. Такой список полезнее любого автоматического отчёта, потому что он ранжирован по деньгам: чем ближе обрыв к шестому шагу, тем дороже он вам обходится.

Адаптивность и скорость нельзя разделять

Мобильная вёрстка и мобильная скорость решают одну задачу — дать человеку воспользоваться сайтом с телефона, — и разбирать их по отдельности бессмысленно. Красиво перестроенная страница, которая собирается семь секунд, для посетителя ничем не лучше кривой вёрстки: он не дождётся ни в том, ни в другом случае.

Три момента, где эти темы пересекаются напрямую:

Смежный материал по теме — «Карта сайта в WordPress: почему sitemap плагина конфликтует с картой ядра».

• Изображения. Если на телефон отдаётся та же картинка, что и на большой монитор, вы платите весом за пиксели, которых не видно. Отдача размера под экран решает и вопрос скорости, и вопрос вёрстки.
• Смещение вёрстки при догрузке. Баннер или шрифт подгружаются позже, содержимое прыгает, человек нажимает не туда. Лечится заданием размеров контейнерам заранее.
• Виджеты. Чат, карта, форма обратного звонка — самые тяжёлые элементы и самые частые нарушители вёрстки одновременно. Отложенная загрузка по действию пользователя закрывает обе проблемы.

Семь правок, которые закрывают большую часть проблем

1. Обернуть таблицы в блок с горизонтальной прокруткой, чтобы страница перестала ползти вбок.
2. Сдвинуть или отключить виджеты на узких экранах, чтобы они не перекрывали кнопки.
3. Сократить формы до имени и одного канала связи, остальное спрашивать в разговоре.
4. Поднять основной шрифт до 16 пикселей в стилях.
5. Отключить всплывающие окна на мобильных или оставить только по глубине прокрутки с крупным крестиком.
6. Сжать изображения и включить кэширование статики.
7. Сделать телефон ссылкой и поднять его в шапку, а не оставлять только в подвале.

Каждая правка занимает около получаса и не требует переделки сайта. Вместе они закрывают типовой набор проблем, из-за которых мобильная конверсия проседает вдвое относительно десктопной. Отдельно отмечу порядок: сначала делайте то, что мешает совершить действие (виджеты, формы, телефон), и только потом то, что мешает читать.

Подробнее о том, как это встраивается в общую работу над сайтом:

8:14

Частые вопросы

Как понять, что проблема именно в мобильной версии, а не в предложении? Сравните конверсию по устройствам в Метрике. Если на компьютерах она в пределах нормы для вашей ниши, а на мобильных вдвое-втрое ниже, дело в технике. Если проседают оба типа устройств одинаково — проблема в предложении, цене или трафике.

Нужна ли отдельная мобильная версия, если у сайта сложный каталог? Обычно нет. Сложность каталога решается упрощением интерфейса фильтров и сортировок, а не вторым сайтом. Отдельная версия добавляет задачу синхронизации, которая со временем всегда проигрывает.

Что делать, если шаблон старый и не адаптивный вообще? Оценить, дешевле ли переверстать существующий шаблон или перейти на современный. Ключевое условие при любом варианте — сохранить адреса страниц и структуру. Смена шаблона с сохранением адресов проходит без потерь, смена адресов без постраничных перенаправлений стоит месяцев трафика.

Влияет ли мобильная версия на позиции напрямую? Оценка идёт по мобильной версии, поэтому её содержание и удобство — это и есть то, что оценивается. Прямого штрафа за «неадаптивность» ждать не нужно, но неудобная версия ухудшает поведение, а поведение влияет на позиции.

Стоит ли скрывать часть содержания на мобильных, чтобы страница была легче? Скрывать под раскрывающиеся блоки — можно, это нормальная практика для длинных описаний и характеристик. Полностью убирать содержание из мобильной версии — нельзя: именно она и оценивается, и то, чего в ней нет, для системы не существует.

Как часто перепроверять мобильную версию? Раз в месяц по короткому списку и обязательно после любого изменения: нового виджета, обновления системы управления, добавления объёмной статьи с таблицами. Большинство поломок появляется именно после таких изменений.

Коротко

• Оценка сайта идёт по мобильной версии, и с телефонов приходит большая часть визитов.
• Адаптивный шаблон не гарантирует работающую мобильную версию — проверять надо конкретные страницы и сценарии.
• Чаще всего ломают широкие таблицы, виджеты поверх кнопок, длинные формы и тяжёлые изображения.
• Проверять надо на реальном недорогом телефоне через мобильный интернет, а не в эмуляторе браузера.
• Разрыв конверсии между мобильными и компьютерами больше чем вдвое — признак технических проблем.
• Семь получасовых правок закрывают типовой набор проблем без переделки сайта.

Если нужно разобрать конкретный сайт по мобильному сценарию и получить список правок с приоритетами, это можно сделать на SEO-консультации.