Новый формат
Адаптация сайта под размер экрана: зачем и как сделать
Большая часть визитов приходит со смартфонов: каталог листают с телефона, заявку часто тоже. Сайт, который «плывёт» или требует горизонтального скролла, теряет и людей, и сигналы качества для поиска.
Ниже — что значит адаптация под экран, чем адаптив отличается от отдельного m-сайта, цели для бизнеса и SEO, процесс и проверка. Общая вёрстка как профессия — в смежной статье; здесь фокус на мобильности.
Что такое мобильная адаптация
Адаптация под размер экрана — когда макет и интерфейс корректно читаются и управляются на телефоне, планшете и десктопе. Обычно это responsive: одни URL, CSS media queries / современная сетка, гибкие картинки.
Цель не «уместить всё мелко», а сохранить сценарий: найти услугу/товар → понять оффер → позвонить или оставить заявку без борьбы с меню и формой.
Признаки нормального адаптива:
- нет горизонтального скролла «в никуда»;
- текст читается без зума;
- кнопки и ссылки удобно нажимать пальцем;
- меню и фильтры открываются предсказуемо;
- тот же смысл контента, что на десктопе.
Зачем это бизнесу и SEO
Коммерция: часть пути покупки начинается на мобильном. Если карточка или форма неудобны — лид уходит конкуренту с нормальным UX.
Поиск давно оценивает мобильный опыт (mobile-first). Медленная или сломанная мобильная выдача страницы бьёт по обходу и поведению сильнее, чем «ещё один ключ в H1».
Цели адаптации:
- не терять трафик с телефонов;
- держать конверсию на маленьком экране;
- упростить поддержку одного шаблона;
- соответствовать ожиданиям mobile-first индексации.
Адаптив или отдельная мобильная версия
Адаптивный сайт: один адрес, контент и SEO-сигналы не размножаются. Отдельная мобильная версия (часто `m.`) — второй шаблон и риск расхождений: другой текст, забытые noindex, цепочки редиректов.
Отдельный m. имеет смысл редко (тяжёлый legacy, особые приложения). Для нового проекта и большинства CMS — responsive + при необходимости облегчённые блоки, а не второй сайт.
Адаптив:
- один канонический URL;
- проще аналитика и цели;
- меньше дублей;
- один контур правок контента.
Отдельный m.:
- нужна склейка и аккуратные редиректы;
- легко разъехаться контентом;
- двойная поддержка шаблонов;
- выше риск технических SEO-ошибок.
Как адаптируют сайт на практике
Старт с приоритетных шаблонов: главная, ключевые посадочные, каталог, карточка, корзина/форма, блог. Задают брейкпоинты, пересобирают сетку, кегли, отступы, навигацию (бургер не как свалка всего десктопа).
Картинки — srcset/размеры, сжатие, не грузить десктопный 4K на 360px. Таблицы и широкие блоки — горизонтальный скролл контейнера или упрощённый вид, не ломая весь layout.
Типовой процесс:
- viewport и базовая сетка;
- мобильное меню и шапка;
- контентные блоки и CTA;
- формы и кликабельный телефон;
- медиа и шрифты;
- регресс на десктопе после правок.
Преимущества нормального адаптива
Один сайт проще вести маркетингу и разработке. Реклама и SEO ведут на те же URL. Пользователь не прыгает между «полной» и «облегчённой» версией с разным прайсом.
Для команды это меньше сюрпризов: правка оффера один раз, проверка на двух-трёх ширинах, а не синхронизация двух CMS.
Что выигрываете:
- конверсия с мобильного трафика;
- предсказуемая индексация одного канона;
- ниже стоимость сопровождения;
- лучше Core Web Vitals при грамотной оптимизации веса.
Как тестировать адаптацию
Не ограничивайтесь одним iPhone в эмуляторе. Смотрите Android-средние ширины, альбомную ориентацию, реальные сети (3G/LTE). Проверьте клики по телефону, маски ввода, липкие CTA, не перекрывает ли чат кнопку «Отправить».
Автоматика: Lighthouse mobile, краулер на mobile user-agent при необходимости, поиск по скриншотам ключевых URL после релиза. После смены темы CMS — полный прогон шаблонов заново.
Чеклист приёмки:
- главная / категория / карточка / форма;
- меню и поиск;
- нет обрезанного текста и наложений;
- скорость на mobile приемлема;
- юридические ссылки и согласия кликабельны;
- ретаргет/чат не ломают UX.
Частые вопросы
Адаптив и мобильная версия — одно и то же?
Не всегда. Адаптив — один URL и вёрстка, которая подстраивается под ширину. «Мобильная версия» часто значит отдельный поддомен/шаблон (m.) — сейчас реже как стратегия по умолчанию.
Обязателен ли viewport?
Да для нормального масштаба на телефоне: meta viewport в `<head>`. Без него страница часто «миниатюра десктопа».
Влияет ли адаптив на SEO?
Да косвенно и сильно: удобство, скорость, отказы, mobile-first индексация. Ломаный мобильный вид = риск для видимости и конверсии.
Хватит ли «сжать» десктоп в CSS?
Нет. Нужны приоритет контента, крупные тач-зоны, читаемый кегль, формы без мучений, иногда другой порядок блоков.
Нужен ли AMP?
Для большинства коммерческих сайтов не обязателен. Сначала корректный адаптив и скорость; AMP — отдельное решение под узкие кейсы.
Как проверить адаптив быстро?
DevTools device mode + реальные телефоны, PageSpeed/Lighthouse mobile, просмотр ключевых шаблонов (главная, категория, карточка, форма).
Отдельный m.site ещё делают?
Иногда в legacy. Минусы: дубли URL, редиректы, расхождение контента. Предпочтителен responsive на одном каноне.
Адаптив = быстрый сайт?
Нет автоматически. Тяжёлые картинки и скрипты на мобильном убивают UX даже при «красивой» сетке. Сжимайте медиа и режьте лишнее.
Сайт «ломается» на телефоне?
Проверим адаптив ключевых шаблонов и сценарий заявки с мобильного.
Обсудить задачу
