Адаптивность сайта: что это и почему без неё вы теряете большинство клиентов
Адаптивный сайт простыми словами: как он работает, чем отличается от мобильной версии, как проверить свой сайт на телефоне и что делать, если всё разваливается.
Адаптивность — это способность сайта подстраиваться под любой экран: на широком мониторе блоки стоят в три колонки, на планшете в две, на телефоне выстраиваются в одну, кнопки увеличиваются под палец, меню сворачивается в удобную панель. Звучит как техническая деталь, но на деле это вопрос выживания: с мобильных устройств сегодня приходит 70–80% посетителей коммерческих сайтов, и сайт, неудобный на телефоне, просто отдаёт этих людей конкурентам. Разберём, как проверить свой, что чинить и какие варианты бывают.
Как посетитель уходит с неадаптивного сайта
Сценарий, который повторяется миллионы раз в день. Человек ищет услугу с телефона, открывает сайт — а там уменьшенная копия десктопной страницы: текст микроскопический, надо растягивать пальцами, меню не нажимается, форма заявки требует снайперской точности, половина ширины уезжает за экран. Сколько он будет мучиться? Секунд пять. Назад — и следующий сайт из выдачи, где всё удобно. Вы не узнаете об этой потере никогда: в статистике она выглядит как «посетитель провёл на сайте 5 секунд», а хозяин сайта думает, что трафик «нецелевой».
Поисковики этот сценарий видят и делают выводы: и Яндекс, и Google оценивают удобство для мобильных и опускают в мобильной выдаче сайты, которые на телефонах неудобны. То есть неадаптивный сайт теряет дважды: сначала позиции, потом тех, кто всё-таки дошёл.
Адаптивная вёрстка, мобильная версия, приложение: в чём разница
Адаптивная вёрстка — один сайт, который перестраивается под экран. Современный стандарт: один адрес, один контент, обновляется всё разом. Для 95% бизнесов — правильный и единственно нужный вариант.
Отдельная мобильная версия (та самая m.site.ru) — исторический подход: два сайта, которые надо поддерживать параллельно. Сегодня встречается у крупных старых порталов; новому проекту делать так незачем.
Мобильное приложение — отдельный продукт за отдельные большие деньги. Оправдано, когда клиент пользуется вами ежедневно (банк, доставка, фитнес-сеть с тысячами членов). Малому бизнесу почти всегда достаточно хорошего адаптивного сайта — мы говорили об этом на примере фитнес-клубов.
Как проверить свой сайт: тест на 10 минут
Возьмите телефон — не эмулятор в браузере, а живой телефон, лучше не самый новый — и пройдите путь клиента. Читается ли текст без увеличения. Нажимаются ли кнопки и пункты меню пальцем с первого раза, не задевая соседние. Не выползает ли что-то за край экрана (горизонтальной прокрутки быть не должно вообще). Удобно ли заполнить форму: поля достаточно крупные, клавиатура для телефона цифровая, а не буквенная. Кликабелен ли номер телефона — звонок в одно касание. Видна ли кнопка заявки без прокрутки на первом экране.
Потом повторите на планшете или попросите знакомого с телефоном другой марки: адаптивность имеет свойство ломаться на конкретных размерах экрана. И отдельно проверьте таблицы и калькуляторы, если они есть, — это чемпионы по разваливанию на мобильных.
Частые мобильные проблемы и что с ними делать
Если сайт свежий, а на телефоне местами беда — обычно это точечные ошибки вёрстки, чинятся за часы. Если сайт старше пяти-семи лет и адаптивности нет в принципе — «натянуть» её на старую вёрстку почти всегда дороже и хуже, чем пересобрать сайт: это как пытаться сделать из хрущёвки студию перепланировкой несущих стен. Посчитайте оба варианта, прежде чем платить за реанимацию (ориентиры цен).
Отдельный случай — сайт формально адаптивный, но неудобный: всё влезает, но кнопки мелкие, шрифт впритык, форма из десяти полей. Это уже не про вёрстку, а про мобильный сценарий: на телефоне человек действует быстрее и нетерпеливее, ему нужны крупные кнопки, короткие формы и телефон в одно касание. Такие вещи находятся тестом из этой статьи и разбором записей Вебвизора — смотрите статью про повышение конверсии.
Частые вопросы
Мой конструкторский сайт вроде бы адаптивный. Этого достаточно?
Конструкторы дают адаптивность из коробки, но проверять всё равно надо: сложные блоки, галереи и таблицы на шаблонах регулярно едут. Плюс у конструкторов своя беда на мобильных — скорость: тяжёлые страницы грузятся по мобильной сети мучительно. Про это — следующая статья.
Как убедиться, что дизайн нового сайта будет удобным на телефоне?
Требуйте мобильные макеты на этапе дизайна — не «потом адаптируем», а нарисованные экраны телефона рядом с десктопными. В нормальном процессе (как он устроен) мобильная версия проектируется первой или параллельно, потому что именно с неё придёт большинство посетителей.
Проверяет ли адаптивность поисковик автоматически?
Да: в Яндекс Вебмастере есть проверка мобилопригодности, и туда стоит заглянуть. Но зелёная галочка означает «формально ок», а не «удобно»: тест живым телефоном она не заменяет.
В студии ШЕСТЕРОВ мы проектируем сайты от мобильного экрана — потому что именно там живёт ваш клиент. Если ваш сайт на телефоне вызывает неловкость, пришлите ссылку: посмотрим и скажем, лечится точечно или пора пересобирать.