Когда клиент просит «просто сделать сайт», я почти всегда уточняю: адаптивный сайт на заказ или типовой шаблон с готовыми брейкпоинтами. Разница ощущается не в макете, а в деньгах - за три с лишним года работы с Tilda, WordPress и Next.js я видел десятки проектов, где верстку под мобильные добавляли постфактум, и это обходилось дороже, чем спроектировать её сразу вместе с десктопной версией.
Дальше - как устроена адаптивная верстка технически, где она чаще всего ломается и сколько реально стоит сделать её нормально, а не для галочки.
Что такое адаптивный сайт на заказ и чем он отличается от шаблона
Шаблонный конструктор обычно закладывает три жёстких брейкпоинта: десктоп, планшет, телефон. Всё, что между ними - например, экран 1024px у ноутбука в альбомной ориентации или разворот телефона на 480px - отображается как повезёт, потому что верстальщик шаблона не видел ваш контент и подгонял сетку под абстрактный пример.
На заказ верстка строится под конкретный контент: если в карточке товара три строки характеристик и кнопка «в корзину», брейкпоинты ставятся там, где эта карточка реально начинает съезжать, а не там, где «принято» в библиотеке компонентов. Для интернет-магазина на WooCommerce я обычно закладываю 5-6 точек перелома вместо стандартных трёх - иначе на планшетах в разрешении 810-1024px элементы фильтра наезжают на карточки товаров, и это видно в первую неделю после запуска.
Ещё разница - в приоритизации контента. На заказ можно решить, что на телефоне форма заявки идёт сразу после заголовка, а не в подвале после пяти экранов текста, потому что заказчик знает: 70% его трафика с мобильных идёт из рекламы и не долистывает до конца.
Зачем нужна верстка под все устройства - цифры и практика
По моим проектам за 2024-2025 год доля мобильного трафика на лендингах и интернет-магазинах держится в диапазоне 65-80%, и это не считая планшетов. При этом конверсия с мобильных обычно ниже десктопной на 20-40%, если верстка не доведена до ума - не потому что мобильные пользователи «менее платёжеспособны», а потому что форма оплаты через T‑Bank эквайринг на узком экране обрезает кнопку подтверждения, или виджет СДЭК разворачивает карту доставки поверх остального контента.
Один из показательных случаев - магазин на WooCommerce, где корзина на десктопе работала отлично, а на мобильных пользователи не видели итоговую сумму заказа без прокрутки в невидимую область - блок с ценой уезжал за пределы viewport из-за фиксированной ширины в px вместо относительных единиц. После переверстки на flexbox с relative-величинами конверсия в оформление заказа выросла на треть в течение месяца - просто потому что люди стали видеть, сколько платят.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Как устроена отзывчивая верстка технически
База - relative-единицы (%, rem, vw/vh) вместо фиксированных px, гибкие сетки на flexbox или grid и медиа-запросы, которые переключают раскладку на нужных ширинах. Пример базового паттерна для карточек, который я использую почти в каждом проекте:
.card {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.card {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.card {
grid-template-columns: repeat(3, 1fr);
}
}Отдельно - изображения. Без атрибута srcset браузер на телефоне с экраном 375px грузит ту же картинку 2000px, что и десктоп, и это добавляет секунды к загрузке, которые Google учитывает в Core Web Vitals через метрику LCP. Цель, которую я обычно держу в голове - уложиться в 2,5 секунды по LCP на мобильном 4G, иначе поисковик занижает позиции даже при хорошем контенте.
Для Tilda ситуация отдельная: конструктор даёт готовые адаптивные блоки, но кастомные доработки - скрипты для скрытия элементов на мобильных, изменения порядка блоков через JS, интеграции с формами - приходится писать руками поверх верстки Tilda. У меня в библиотеке готовых скриптов собраны рабочие адаптивные доработки именно под такие задачи - от скрытия блока на телефоне до перестройки сетки без переверстки всей страницы.
Адаптив, мобильная версия и RESS - в чём разница
Заказчики часто используют эти термины как синонимы, хотя технически это разные подходы с разной ценой поддержки.
| Подход | Как работает | Плюсы | Минусы |
|---|---|---|---|
| Адаптивная верстка | Один HTML, CSS меняет раскладку по брейкпоинтам | Одна кодовая база, проще поддерживать SEO | Нужно продумывать все ширины заранее |
| Отдельная мобильная версия (m.site.ru) | Два разных сайта на одном домене | Можно радикально менять контент под мобильный | Двойная поддержка, риск дублей в индексе |
| RESS (Responsive + Server-Side) | Сервер отдаёт разную верстку по User-Agent, но URL один | Гибче адаптива, легче адаптива в поддержке, чем m.site | Сложнее в реализации, нужен серверный рендеринг |
Для 90% проектов - лендингов, интернет-магазинов, корпоративных сайтов - хватает обычной адаптивной верстки. Отдельную мобильную версию или RESS я предлагаю только когда контент для мобильных должен кардинально отличаться от десктопного, например у сложных SaaS-панелей с разной логикой работы на телефоне и в браузере.
Кроссбраузерная верстка: где чаще всего всё ломается
Адаптив без кроссбраузерного тестирования - половина работы. Верстка, идеальная в Chrome DevTools, может разъезжаться в реальном Safari на iPhone из-за особенностей рендеринга flexbox с gap, или зависать в старом WebView Android, который используют встроенные браузеры некоторых банковских приложений.
| Среда | Типичная проблема |
|---|---|
| Safari iOS | Некорректная высота 100vh из-за адресной строки, баги с position: sticky |
| Встроенный браузер Telegram | Обрезка модальных окон, не работает fixed-позиционирование форм |
| Старый WebView Android (banking-приложения) | Не поддерживает свежие CSS grid-свойства, форма оплаты съезжает |
| Yandex Browser на слабых устройствах | Долгая перерисовка при большом количестве анимаций |
При разработке ботов на aiogram, которые открывают веб-формы или мини-приложения через Telegram WebApp, я всегда закладываю отдельное тестирование именно во встроенном браузере мессенджера - там верстка ведёт себя иначе, чем в обычном мобильном Safari или Chrome, и часть CSS-свойств просто игнорируется.
Частые ошибки при заказе адаптивной верстки
- Заказывают дизайн только для десктопа, а мобильную версию отдают верстальщику «на додумывание» - в итоге приоритеты блоков расставлены не под мобильный сценарий использования.
- Не тестируют формы на реальных устройствах - только в браузере на компьютере с уменьшенным окном, что не показывает баги реального мобильного рендеринга.
- Экономят на адаптиве таблиц и каталогов - широкая таблица характеристик товара на телефоне превращается в нечитаемую простыню с горизонтальным скроллом на весь экран.
- Забывают про touch-зоны - кнопки меньше 44px по высоте неудобно нажимать пальцем, особенно в интерфейсах CRM и личных кабинетов.
- Игнорируют скорость загрузки на мобильном 4G, хотя именно она сильнее всего влияет и на конверсию, и на позиции в поиске.
Сроки и стоимость адаптивного сайта на заказ
Цена и сроки зависят от платформы и глубины кастомной верстки, а не только от количества страниц.
| Тип проекта | Стоимость | Срок |
|---|---|---|
| Сайт на Tilda с адаптивной доработкой блоков | от 30 000 ₽ | от 5 рабочих дней |
| Кастомный адаптивный скрипт для Tilda (простая доработка) | от 3 000 ₽ | 1-2 дня |
| Комплексная интеграция на Tilda (CРМ, эквайринг, СДЭК) | от 40 000 ₽ | от 10 рабочих дней |
| Сайт на WordPress с адаптивной кастомной темой | от 60 000 ₽ | от 2-3 недель |
| Интернет-магазин под ключ | от 80 000 ₽ | от 3-4 недель |
| Лендинг на Next.js | от 80 000 ₽ | от 2 недель |
| Веб-сервис/SPA с адаптивным интерфейсом | от 300 000 ₽ | от 8 недель |
На рынке студийная верстка адаптивного лендинга «под ключ» часто стоит дороже за счёт менеджерской надбавки и подряда верстальщика на аутсорсе - я работаю без посредников и закладываю тестирование на реальных устройствах в саму стоимость проекта, а не как отдельную опцию. Если сайт уже есть, но адаптив хромает, дешевле и быстрее обычно переверстать проблемные блоки точечно, чем переделывать всё с нуля - это можно обсудить на этапе консультации, которая стоит от 3 000 ₽.
Корпоративный сайт, каталог, блог
Фронтенд + Бэкенд
от 60 000 ₽
Подробнее →Частые вопросы
Чем адаптивная верстка отличается от «резиновой»?
Резиновая верстка растягивает и сжимает элементы пропорционально ширине экрана без точек перелома, из-за чего на очень широких или очень узких экранах пропорции ломаются. Адаптивная верстка использует медиа-запросы и переключает раскладку на заданных брейкпоинтах, поэтому на каждой ширине контент выглядит как задумано, а не просто масштабируется.
Можно ли сделать адаптивный сайт на конструкторе без программиста?
Базовую адаптивность Tilda и подобные конструкторы дают из коробки - блоки сами перестраиваются под три стандартных брейкпоинта. Но как только нужна нестандартная логика - скрыть элемент только на телефоне, поменять порядок блоков, состыковать форму с CRM и сохранить это поведение на всех экранах, - без кастомного скрипта не обойтись.
Сколько устройств нужно проверить перед запуском сайта?
Минимальный набор для реального тестирования - iPhone на Safari, Android-телефон на Chrome, встроенный браузер Telegram, если есть интеграция с ботом, и десктопные Chrome, Safari и Яндекс Браузер. Этого достаточно, чтобы отловить 90% визуальных багов до релиза, а не после жалоб первых посетителей.
Влияет ли адаптивность на позиции сайта в поиске?
Да, напрямую. Google и Яндекс используют mobile-first индексацию - сканируют в первую очередь мобильную версию страницы, и метрики Core Web Vitals (скорость загрузки, стабильность верстки при прокрутке) считаются по мобильному рендерингу. Сайт с плохим адаптивом теряет позиции даже при качественном контенте и текстовой оптимизации.