Адаптивная вёрстка: почему мобильная версия важнее десктопа

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

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

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

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

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

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

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

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

Почему мобильная версия важнее десктопной

• Трафик. Со смартфонов заходит больше людей, чем с компьютеров. Это касается и поиска, и рекламы, и переходов из мессенджеров и соцсетей.
• Ранжирование. Поисковики оценивают сайт в первую очередь по мобильной версии. Google индексирует страницы так, как их видит смартфон, Яндекс учитывает удобство для мобильных в выдаче на телефонах.
• Конверсия. Неудобный на телефоне сайт теряет заявки, даже если на компьютере он идеален. Человек не станет увеличивать текст и целиться в мелкую кнопку — он вернётся в поиск.
• Реклама. В Яндекс Директе вы платите за клик одинаково, с какого бы устройства он ни был. Если мобильная страница неудобна, заметная часть бюджета уходит впустую.
• Скорость. Мобильный интернет медленнее и нестабильнее проводного, а телефоны слабее компьютеров. Страница, которая на офисном компьютере открывается мгновенно, в дороге может грузиться заметно дольше. Скорость входит в показатели Core Web Vitals, которые учитывают поисковики.

Подход «сначала мобильный» (mobile-first) — это не мода. Если сайт хорошо работает на узком экране, на широком он почти наверняка будет в порядке. Обратное неверно.

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

Что такое mobile-first и зачем это заказчику

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

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

Каким должен быть сайт на смартфоне

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

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

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

Как проверить мобильную версию своего сайта

1. Откройте сайт на своём телефоне через мобильный интернет, а не через Wi-Fi, и пройдите путь клиента до заявки или оплаты. Отметьте, где пришлось увеличивать, искать или ждать.
2. Попросите сделать то же самое человека, который сайт раньше не видел. Владелец знает, куда нажимать, и не замечает препятствий.
3. На компьютере откройте сайт в браузере, нажмите F12 и включите режим просмотра на мобильных устройствах. Проверьте страницу на нескольких ширинах — от компактного телефона до планшета.
4. В Яндекс Вебмастере запустите инструмент «Проверка мобильных страниц»: он покажет, считает ли Яндекс страницу удобной для смартфонов, и перечислит проблемы.
5. Измерьте скорость именно в мобильном режиме — она почти всегда ниже десктопной. Подойдут PageSpeed Insights или вкладка Lighthouse в браузере Chrome.
6. В Метрике сравните конверсию и отказы по типам устройств и посмотрите в Вебвизоре несколько записей визитов с телефонов.

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

Можно ли сделать существующий сайт адаптивным

Чаще да, но объём работ сильно зависит от того, на чём сделан сайт и насколько он старый.

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

Чек-лист: сайт удобен с телефона

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

Коротко

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

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