Адаптивный сайт — это когда одна и та же страница корректно работает на телефоне, планшете и десктопе: меню не обрезается, текст читается без pinch-zoom, кнопки нажимаются пальцем, формы не уезжают за край экрана. Для бизнеса в Сочи, где туристы и местные клиенты ищут услуги с телефона на пляже или в пробке, это не «модный термин», а базовое условие заявок.
Почему отдельная «мобильная версия» — плохая идея
Раньше делали m.example.ru — облегчённую копию. Минусы:
- два URL с одним контентом → риск дублей в поиске;
- обновили цены на основном сайте — забыли на мобильном;
- рекламные ссылки ведут на desktop, пользователь видит мелкий текст;
- аналитика размазана между версиями.
Адаптивная вёрстка (responsive) решает это одним кодом и media queries: сетка, шрифты, отступы меняются по breakpoints.
Как адаптив влияет на бизнес-метрики
**Конверсия.** Если кнопка «Заказать» ниже трёх экранов скролла или телефон не кликабелен, часть обращений теряется без следа в CRM.
**SEO.** Поисковики индексируют мобильную версию первой. Медленная загрузка и горизонтальный скролл — негативные сигналы. Связанная тема: скорость загрузки сайта.
**Доверие.** Сайт, который «ломается» на iPhone, воспринимается как устаревший — даже если услуга качественная.
**Реклама.** В Директе и таргете большая доля кликов — мобильная. Посадочная должна совпадать с ожиданием пользователя за 3 секунды.
Принципы качественного адаптива
- **Mobile-first дизайн.** Сначала макет 375 px, потом расширение для tablet и desktop.
- **Touch targets.** Кнопки и ссылки минимум 44×44 px, расстояние между кликабельными элементами.
- **Читаемость.** Базовый текст 16 px+, контраст по WCAG, строка не шире 70–80 символов.
- **Навигация.** Бургер-меню с понятными пунктами; на desktop — горизонтальное меню без дублирования логики.
- **Медиа.** `srcset` и WebP для картинок; видео не autoplay со звуком на mobile.
- **Формы.** Правильные типы input (tel, email), маски, минимум полей.
- **Производительность.** Lazy load ниже первого экрана, без блокирующих скриптов в head.
Как проверить адаптивный сайт до запуска
**Ручной сценарий.** iPhone или Android: главная → услуга → форма → отправка. То же в landscape. Проверьте карту, аккордеоны FAQ, таблицы прайса.
**Chrome DevTools.** Device toolbar, несколько разрешений: 320, 375, 768, 1024, 1440 px.
**Lighthouse.** Performance и Best Practices; цель — LCP до 2,5 с на mobile 4G.
**Яндекс.Вебмастер и Google Search Console.** Отчёты по удобству для mobile, ошибки viewport.
**Реальная сеть.** Не только офисный Wi‑Fi: throttling в DevTools имитирует мобильный интернет в Сочи в сезон нагрузки.
Адаптив vs мобильное приложение
Сайт закрывает поиск, рекламу и первый контакт. Мобильное приложение нужно при повторных покупках, push, офлайн-режиме, сложной программе лояльности. Для большинства SMB достаточно хорошего адаптивного сайта + быстрых мессенджеров.
Адаптив при создании и при редизайне
На новом проекте в NUGU адаптив входит в создание сайта: лендинг от 30 000 ₽, сайт услуг от 50 000 ₽, корпоративный от 80 000 ₽, магазин от 140 000 ₽.
Если сайт старый — фиксированная ширина 1200 px, мелкий текст на телефоне — нужен редизайн или переверстка. «Плагин адаптива» поверх legacy редко даёт качество.
При запуске учитывайте SEO при старте: один URL, корректные meta viewport, structured data не должны ломаться на mobile.
Типичные ошибки
- Скрывают контент на mobile через `display:none` — Google может считать это cloaking.
- Бургер без подписи «Меню» — часть аудитории не узнаёт иконку.
- Pop-up на весь экран без простого закрытия — высокий bounce.
- Таблицы шире экрана без горизонтального scroll контейнера.
- Шрифты меньше 14 px в body — нечитаемо на солнце у моря.
- Тестируют только на одном iPhone последней модели.
Чек-лист адаптивного сайта
- Viewport meta на всех страницах.
- Нет горизонтального скролла на 320 px.
- CTA виден на первом–втором экране mobile.
- Телефон и мессенджеры — tap to action.
- Формы отправляются с телефона, клавиатура не перекрывает поля.
- Изображения не вылезают за контейнер.
- Core Web Vitals в зелёной зоне или близко.
Когда обращаться в NUGU
Если трафик есть, а заявок с телефона мало — начните с аудита mobile UX. Мы в Сочи делаем сайты с mobile-first вёрсткой, подключаем Метрику и смотрим отдельно mobile vs desktop. Иногда достаточно переставить блоки и ускорить загрузку, иногда — новая структура.
Напишите через контакты, приложите URL — подскажем, адаптив ли главная проблема или узкое место в оффере и форме.
Адаптив и Core Web Vitals
Google и Яндекс учитывают LCP, INP и CLS — метрики, которые напрямую зависят от адаптивной вёрстки и веса страницы. Фиксированный сайт 1200 px с не масштабируемыми блоками на mobile даёт плохие показатели и теряет позиции. При заказе сайта в NUGU мы закладываем responsive grid, оптимизацию изображений и тест на реальных устройствах — не только эмулятор в браузере.
Доступность на мобильном
Пользователь с плохим зрением или трясущимися руками должен иметь возможность нажать кнопку и прочитать текст. Контраст, размер шрифта, focus outline — часть адаптивного стандарта, а не «дополнение для инвалидов». Это же улучшает UX для всех посетителей с телефона на солнце или в движущемся автомобиле — типичный сценарий для аудитории в Сочи.
Тестирование на реальных устройствах
Эмулятор не покажет, как ведёт себя форма при автозаполнении iOS или клавиатуре Android. Проверьте Safari и Chrome на двух-трёх телефонах команды. Обратите внимание на sticky-шапку: она не должна перекрывать поля ввода. NUGU включает mobile QA в приёмку каждого проекта — лендинг, услуги, корпоратив или магазин.
Стоимость адаптивной вёрстки
Отдельной строки «сделать адаптив» в смете NUGU обычно нет — responsive входит в стандарт разработки. Переверстка старого фиксированного сайта оценивается как редизайн: от 50 000 ₽ для компактных проектов до 80 000 ₽ и выше для корпоративных. Сравните с ценой потерянных заявок с mobile — часто доработка окупается за один месяц.