Адаптивная вёрстка: почему сайт обязан хорошо работать на смартфоне

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

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

Адаптивная вёрстка давно перестала быть дополнительной опцией. Это базовое требование к любому сайту. В этой статье расскажем, как она устроена, чем отличается от других подходов и на что смотреть, чтобы мобильные посетители не терялись.

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

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

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

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

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

Эти понятия часто смешивают, хотя за ними стоят разные решения.

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

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

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

Почему это влияет на деньги

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

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

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

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

Подход «сначала мобильные»

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

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

Что меняется при таком подходе:

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

Интересно, что после такой работы десктопная версия тоже становится лучше: лишнее уходит и с неё.

Частые ошибки на смартфонах

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

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

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

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

Скорость как часть адаптива

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

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

Отдельно стоит сказать про слайдеры на первом экране. Они красиво смотрятся на презентации для заказчика, но на смартфоне часто становятся самым тяжёлым элементом страницы, а вторые и третьи слайды почти никто не видит. Мы всё чаще заменяем их на один сильный статичный экран.

Что стоит запомнить

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

Во всех наших проектах, от лендинга на тарифе «Старт» до сложного портала на «Эксклюзиве», мобильная версия проектируется наравне с десктопной. Если вы не уверены, насколько удобен ваш сайт на смартфоне, напишите на [email protected] — проведём аудит мобильной версии и покажем, где теряются посетители.