Недавно к нам обратился клиент с типичной проблемой: верстальщик сдал шаблон — на десктопе всё отлично. Открываешь на iPhone 13, и шапка с логотипом перекрывает меню, фильтр каталога вылезает за пределы экрана, а кнопка «Купить» прячется под sticky-баннером. Это не баг верстки в вакууме — это следствие того, что адаптив делался без учёта специфики шаблонной системы Битрикс: вложенных компонентов, подключаемых через $APPLICATION->IncludeComponent(), и того, что часть HTML генерируется PHP, а часть — JavaScript.
По данным StatCounter, мобильный трафик уже превышает десктопный, и поисковые системы учитывают адаптивность при ранжировании. Мы, как разработчики Битрикс с 10-летним опытом, знаем, как правильно адаптировать шаблон без потери функциональности. За 5 лет мы адаптировали более 30 шаблонов для разных отраслей — от интернет-магазинов до корпоративных порталов.
Почему адаптив в Битрикс отличается от обычного сайта
Шаблон сайта в Битрикс — это папка в /bitrix/templates/<имя_шаблона>/ или /local/templates/<имя_шаблона>/. Точки входа: header.php, footer.php, styles.css, script.js. Компоненты переопределяются в /bitrix/templates/<шаблон>/components/ или /local/templates/<шаблон>/components/.
Адаптив требует работы на двух уровнях:
- Шаблон сайта (
header.php,footer.php, общие блоки): навигация, шапка, подвал, сайдбар - Шаблоны компонентов: у
bitrix:catalog.section,bitrix:news.list,bitrix:sale.basket.basketсвоя разметка вtemplate.php— её тоже нужно адаптировать
Самая частая ошибка — адаптировать только шаблон сайта и забыть про шаблоны компонентов. В итоге шапка резиновая, а карточки товаров по-прежнему в фиксированной таблице.
Какие компоненты требуют адаптации в первую очередь?
Мы выделяем четыре зоны, которые ломаются чаще всего:
Мобильное меню — компонент bitrix:menu генерирует <ul> с классами. Для мобильного бургер-меню нужно либо переопределить шаблон компонента, либо управлять видимостью через CSS/JS. Важно сохранить доступность: меню должно работать без JavaScript при SSR-кэшировании.
Каталог и фильтр — bitrix:catalog.section с bitrix:catalog.smart.filter на мобильном требует отдельного подхода: фильтр выносится в оверлей или аккордеон, сетка товаров переключается с 3 колонок на 2 и 1.
Формы — bitrix:form.result.new и формы оформления заказа (bitrix:sale.order.ajax) часто имеют многоколоночный layout, который нужно перестроить в одну колонку.
Таблицы с данными — прайс-листы, характеристики товаров: на мобильном заменяются стекированным layout или горизонтальным скроллом с фиксированной первой колонкой.
Mobile-first или Desktop-first: что выбрать?
Для новых проектов мы рекомендуем Mobile-first — писать стили для мобильных и расширять через min-width медиазапросы. Это даёт более чистый код и лучшую производительность на мобильных. Desktop-first актуален, когда адаптируем существующий шаблон, написанный под десктоп: добавляем медиазапросы через max-width, меньше риска сломать текущий вид. На практике второй подход встречается чаще, но требует более тщательного тестирования. В основе лежит концепция Responsive web design.
Брейкпоинты согласуются с дизайном, но типичный набор для Битрикс-проектов: 1280px, 1024px, 768px, 480px, 375px.
Кейс из нашей практики: адаптация корпоративного сайта
Сайт строительной компании, шаблон написан несколько лет назад, без адаптива. Доля мобильного трафика по данным Метрики — 58%. Задача: полная адаптация без редизайна и без переписывания логики PHP.
Мы прошли по всем страницам и составили список компонентов и блоков с проблемами. Основная работа сосредоточилась на: главной странице (баннер + блоки услуг), каталоге (фильтр + сетка), странице контактов (карта Яндекс + форма). Параллельно переопределили шаблоны трёх компонентов в /local/templates/. Работа заняла от 5 до 8 рабочих дней. Результат: мобильный трафик стал приносить на 30% больше заявок, а показатель отказов снизился на 15%.
Что входит в работу
- Аудит текущего шаблона и выявление проблемных компонентов
- Адаптация шаблона сайта (header, footer, общие блоки)
- Переопределение шаблонов компонентов (до 5–10)
- Настройка брейкпоинтов и медиазапросов
- Тестирование на реальных устройствах и в BrowserStack
- Проверка кэширования Битрикс — адаптивные скрипты не должны попадать в кэш некорректно
- Передача правок и документация по адаптиву
Гарантируем, что после нашей работы ваш сайт будет корректно отображаться на всех устройствах — от iPhone SE до 27-дюймовых мониторов.
Тестирование адаптива
Проверяем в Chrome DevTools (device toolbar) — это минимум. Дополнительно: реальные устройства или BrowserStack, проверка touch-событий, проверка кэшированных страниц Битрикс (важно: Битрикс кэширует HTML, убедитесь что адаптивные скрипты не попали в кэш некорректно).
Сроки
| Объём работ | Сроки |
|---|---|
| Адаптация готового шаблона (до 10 типов страниц) | 3–7 дней |
| Адаптация с переопределением компонентов (10–25 типов) | 1–3 недели |
| Полная верстка нового адаптивного шаблона с нуля | 3–6 недель |
Оценим ваш проект бесплатно — свяжитесь с нами для консультации. Закажите адаптивную верстку шаблона под ключ, и мы приступим в течение недели.