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

Что такое адаптивный дизайн сайта

Адаптивность строится на нескольких технических приёмах, и знать их в общих чертах полезно, чтобы разговаривать с исполнителем на одном языке.

• Мета-тег viewport. Он сообщает мобильному браузеру, что страница рассчитана на ширину экрана устройства, а не на "уменьшенный десктоп".
• Гибкие сетки. Ширина блоков задаётся не в жёстких пикселях, а в долях или процентах, поэтому колонки сжимаются и растягиваются вместе с окном.
• Медиазапросы (media queries). Это правила в стилях, которые включаются при определённой ширине экрана: например, меню превращается в кнопку-"бургер", а три колонки складываются в одну.
• Гибкие изображения. Картинки масштабируются по ширине контейнера, а для маленьких экранов можно загружать облегчённые версии.
• Удобные для пальца элементы. Кнопки и ссылки делают достаточно крупными и разносят так, чтобы по ним можно было попасть без увеличения.

Слово "адаптивная вёрстка" и словосочетание "адаптивный дизайн сайта" часто используют как синонимы. Строго говоря, дизайн – это то, как задумана компоновка для разных экранов, а вёрстка – как она реализована в коде. Хороший результат получается, когда над ними думают вместе с самого начала, а не подгоняют десктопный макет под телефон в последний момент.

Адаптивный сайт или мобильная версия: в чём разница

Исторически существовало два подхода. Первый – сделать отдельную мобильную версию, часто на поддомене вида m.example.ru, со своим шаблоном и иногда со своим содержимым. Второй – адаптивная вёрстка, когда один и тот же код обслуживает все устройства.

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

Почему без мобильной версии бизнес теряет клиентов

Вопрос "нужна ли мобильная версия" давно превратился в вопрос "как долго вы готовы терять тех, кто пришёл с телефона". Точную долю мобильных посетителей никто не назовёт вам заранее: она зависит от ниши и источников трафика. Но её легко узнать самому в отчёте об устройствах Яндекс.Метрики или Google Analytics. Если заходят с телефона хотя бы каждый второй, неудобный сайт напрямую снижает число заявок.

Потери происходят в несколько мест:

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

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

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

Google уже несколько лет использует так называемую индексацию mobile-first: для оценки страницы поисковая система в первую очередь смотрит на её мобильную версию. Если на телефоне часть содержимого скрыта или урезана, поисковик может учитывать именно урезанный вариант. Яндекс также учитывает удобство сайта на мобильных устройствах в оценке качества страниц, хотя подробности своих алгоритмов не раскрывает.

Из этого следуют практические выводы:

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

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

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

Проверка не требует специальных знаний. Вот последовательность, которую можно пройти за десять–пятнадцать минут.

Режим устройств в браузере

В Chrome, Edge и Firefox откройте инструменты разработчика (клавиша F12 или сочетание Ctrl+Shift+I) и включите режим эмуляции устройств. Он показывает, как страница выглядит при разных размерах экрана. Выберите несколько готовых профилей телефонов и планшетов, а затем потяните границу окна вручную: некоторые дефекты проявляются только в промежуточных размерах.

Lighthouse и Google PageSpeed

Lighthouse встроен в Chrome DevTools и оценивает страницу по нескольким направлениям, включая доступность и лучшие практики. Отчёт на мобильном профиле покажет, есть ли проблемы с viewport, размером текста и областями нажатия. Похожие данные даёт сервис PageSpeed Insights.

Реальный телефон

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

Поиск и вебмастер

В панелях Яндекс.Вебмастера и Google Search Console можно увидеть отчёты об удобстве использования на мобильных устройствах, если такие проблемы обнаружены роботом. Это не заменяет собственной проверки, но помогает найти массовые ошибки.

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

Пройдитесь по списку на своём сайте, открыв его на телефоне.

1. Нет горизонтальной прокрутки на любой странице.
2. Основной текст читается без увеличения.
3. Кнопки и ссылки достаточно крупные и не слипаются между собой.
4. Меню открывается и закрывается одним касанием, пункты видны целиком.
5. Формы удобно заполнять: у поля телефона вызывается цифровая клавиатура, подписи не пропадают при вводе.
6. Изображения не выходят за рамки экрана и не растягиваются.
7. Таблицы либо прокручиваются внутри блока, либо перестраиваются.
8. Всплывающие окна и баннеры можно закрыть, они не перекрывают весь экран.
9. Телефон в контактах набирается одним нажатием, адрес открывается в картах.
10. Страница загружается за приемлемое время на мобильном интернете.

Если хотя бы три пункта не выполняются, потери заявок вполне вероятны, и над адаптивностью стоит работать в первую очередь.

Типичные проблемы адаптивных сайтов

Даже сайты, которые называют адаптивными, часто содержат дефекты. Вот самые распространённые.

• Мелкий текст. Шрифт, который выглядит нормально на мониторе, на телефоне превращается в мелкую россыпь. Основной текст должен читаться без увеличения.
• Тесные кнопки. Палец в несколько раз толще курсора, поэтому маленькие и близко стоящие элементы приводят к случайным нажатиям.
• Горизонтальный скролл. Обычно виноват один слишком широкий элемент: таблица, картинка, длинное слово или встроенное видео с фиксированной шириной.
• Тяжёлые картинки. Огромные фотографии, рассчитанные на большие мониторы, грузятся на мобильном интернете десятки секунд. Помогает современный формат WebP и отдельные размеры для маленьких экранов.
• Скрытое содержимое. Часть текста пропадает на телефоне, и поисковая система видит урезанную версию.
• Наведение вместо нажатия. Выпадающие меню и подсказки, которые появляются при наведении мыши, на сенсорном экране не работают.
• Всплывающие окна. Баннер, закрывающий экран с крошечным крестиком, раздражает пользователей и вызывает недовольство поисковых систем.

Частые ошибки

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

Как это делаю я

При разработке сайтов на этапе прототипа и дизайна я сразу продумываю, как каждый блок будет вести себя на телефоне, планшете и компьютере, и только потом перехожу к вёрстке. Готовый результат проверяю в режиме устройств, через Lighthouse и на реальных телефонах. Так работают и проекты из моей практики: например, сайт делового форума КАПИТАЛИУМ с программой по дням, спикерами и покупкой билета онлайн должен одинаково удобно открываться и на ноутбуке, и на телефоне. Подробнее о том, что входит в работу, можно прочитать на странице разработки сайтов. Если вы только выбираете подход к проекту, полезно прочитать и как сделать сайт для бизнеса.

Что делать дальше

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

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

Читайте также

Скорость загрузки сайта: как проверить и как ускорить (чеклист)Конверсия сайта: как считать и как повысить число заявок без рекламыКак сделать сайт для бизнеса: пошаговый план от идеи до запуска

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