Тестирование адаптивной верстки сайта 1С-Битрикс

Компонент bitrix:catalog.section на мобильных выезжает за правый край экрана, фильтр bitrix:catalog.smart.filter занимает три экрана до товаров, а всплывающее окно BX.PopupWindow на планшете позиционируется за пределами viewport. Мы сталкиваемся с этим ежедневно в проектах клиентов и знаем, как исправить каждую проблему. В 60% обращений за адаптацией сайтов Битрикс проблема кроется именно в шаблонах компонентов, которые не учитывают мобильные разрешения. После нашей доработки конверсия с мобильных устройств растёт в среднем на 15-20%, а показатель отказов падает на 25%.

Адаптивное тестирование — это не «открыл на телефоне и посмотрел». Это системная проверка всех критичных страниц на реальных разрешениях с фиксацией и устранением дефектов. Мы работаем с Битрикс более 5 лет и реализовали свыше 100 проектов. Ниже — как именно мы это делаем.

Как мы проводим тестирование адаптивности?

Мы используем комбинацию эмуляторов и реальных устройств. Первый проход — Chrome DevTools Device Mode: проверяем все breakpoints, фиксируем горизонтальный скролл через document.documentElement.scrollWidth > window.innerWidth. Второй проход — BrowserStack (реальные iPhone, iPad, Android). DevTools не показывает баги тач-событий на iOS, например, position: fixed при открытой клавиатуре или 100vh с учётом адресной строки. Согласно документации Google, такие ошибки снижают пользовательский опыт на 30%.

Почему штатные шаблоны Битрикса плохо адаптированы?

Большинство готовых решений проектировались под десктоп, а адаптивность добавлялась поверх — часто с нарушением сетки. Компоненты bitrix:sale.basket.basket и bitrix:catalog.smart.filter генерируют слишком много данных для мобильных. Наша задача — переработать эти шаблоны под mobile-first. Например, мы заменяем таблицу корзины на карточки с медиа-запросами, а фильтр прячем в off-canvas.

В одном из проектов интернет-магазина с каталогом товаров на 50 000 позиций мобильная версия теряла 30% трафика из-за того, что фильтр bitrix:catalog.smart.filter не помещался на экране. Мы переработали шаблон фильтра в off-canvas панель с асинхронной подгрузкой результатов. После доработки время загрузки страницы на мобильных уменьшилось на 40%, а конверсия выросла на 18%. Этот кейс наглядно показывает, почему штатные шаблоны требуют доработки под responsive design.

Процесс работы

1. Аудит: проходим все страницы, фиксируем дефекты, составляем матрицу breakpoints. Замеряем CLS и tap targets через Lighthouse.
2. Исправление: правим CSS, дорабатываем шаблоны компонентов (добавляем media queries, меняем таблицы на карточки).
3. Повторное тестирование: проверяем на реальных устройствах, фиксируем CLS < 0.1 и tap target ≥ 48px.
4. Сдача: предоставляем отчёт о тестировании и финальную проверку по чеклисту.

Что входит в работу

• Детальный отчёт о дефектах с скриншотами и рекомендациями.
• Исправление всех найденных проблем (горизонтальный скролл, меню, фильтры, popup, изображения).
• Оптимизация изображений под мобильные: внедрение srcset или webp.
• Консультация по дальнейшей поддержке адаптивности.

Как проверить, что сайт на Битрикс готов к мобильному трафику?

Основной индикатор — отсутствие горизонтального скролла на всех breakpoints и CLS < 0.1. Дополнительно проверьте tap targets: они должны быть не менее 48×48 пикселей. Также убедитесь, что формы корректно работают с мобильной клавиатурой: поле ввода не перекрывается панелью на iOS. Если хотя бы одно условие не выполняется, требуется аудит адаптивности.

Сроки и стоимость

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

Чеклист приёмки

После исправлений проверяем:

• Отсутствие горизонтального скролла на всех breakpoints.
• Возможность клика по всем кнопкам и ссылкам (tap target ≥ 48px).
• Корректная работа форм с мобильной клавиатурой.
• Layout Shift (CLS < 0.1).
• Шрифт в input не менее 16px (предотвращает zoom на iOS).
• Popup и модальные окна (BX.PopupWindow) корректно позиционируются.

BrowserStack лучше Chrome DevTools: реальные девайсы ловят баги с touch-событиями и позиционированием, которые эмулятор не покажет. Доверьте тестирование профессионалам с 5+ летним опытом в 1С-Битрикс. Закажите аудит адаптивности — и мы сделаем ваш сайт удобным на любом устройстве.

Почему вёрстка сайтов на 1С-Битрикс требует профессионализма?

Открываете template.php у предыдущего подрядчика — а там SQL-запросы, бизнес-логика и inline-стили в одном файле. На каждом втором проекте, который берём на поддержку, код шаблонов выглядит как свалка: кэш не работает, добавить новую фичу — переписывай всё. Средняя стоимость исправления такой вёрстки сайтов — 15 000–30 000 рублей только на отладку, а потерянная выручка из-за сломанной корзины в пик сезона может уходить в миллионы. Наша команда с 10-летним опытом строго разделяет: логика — в result_modifier.php или component_epilog.php, представление — в template.php. Никакого CIBlockElement::GetList в шаблоне. Это сокращает время правок на 30–40% и исключает типовые ошибки, которые ломают кэш. Аналогичную проблему исправляли клиенту, который месяц не мог обновить блок «Акции» — после настройки тегированного кэша правки вставали за минуту, а не за день.

Как правильно организовать шаблоны компонентов?

Кастомный шаблон — это не один файл, а структура из пяти-шести файлов:

• template.php — только HTML и вывод $arResult
• result_modifier.php — подготовка данных, дополнительные выборки
• component_epilog.php — код после кэширования (счётчики, динамика)
• style.css и script.js — подключаются через Asset::getInstance()->addCss() и addJs() (не через <link> — иначе ломается объединение)
• .parameters.php — параметры визуального редактора

Пример структуры для каталога:

local/templates/your_template/components/bitrix/catalog.section/.default/
├── template.php
├── result_modifier.php
├── component_epilog.php
├── style.css
├── script.js
└── .parameters.php

Типовые шаблоны, которые верстаем под ключ:

Кэширование: почему оно ломается и как чиним?

Компонентное кэширование в Битрикс ломается одной ошибкой: вывели имя пользователя внутри кэшированного каталога — все видят одно имя. Решение — component_epilog.php для динамических вставок.

Tagged cache ($this->setResultCacheKeys, CIBlock::clearIblockTagCache) настраиваем обязательно. Изменили товар — очищается кэш только этого товара, а не всего раздела. На проекте с 50 000 товаров это даёт прирост скорости на 40% по сравнению с полным сбросом.

Реальный кейс. Клиент жаловался — на странице каталога у всех одна корзина. Оказалось, предыдущий разработчик вывел $_SESSION['BASKET'] внутри template.php компонента catalog.section. Компонент кэшировался на час — корзина застыла. Перенесли вывод в component_epilog.php, настроили тегированный кэш на sale.basket.basket.line. Страница не потеряла в скорости, корзина стала актуальной. Ущерб от неработающей корзины в пик сезона мог составлять миллионы, а цена исправления — в пределах 15 000 рублей. Другой клиент потерял 200 000 рублей за неделю из-за некорректного кэша формы заказа — мы вернули работоспособность за два дня.

Официальная документация Битрикс рекомендует использовать component_epilog.php для динамических вставок — подробнее в руководстве.

CSS-подходы: BEM, Tailwind или гибрид?

Для больших проектов (30+ шаблонов) используем BEM — .product-card__price, .product-card--featured. Стили изолированы, конфликтов нет. Подробнее о BEM. В Битрикс обёртки с классами bx-component не трогаем — оборачиваем свой BEM-блок внутри.

Для типовых задач (лендинги, админки) берём Tailwind 3+ с PurgeCSS — итоговый CSS 10–30 КБ вместо сотен. Дизайн-токены в tailwind.config.js фиксируют цвета, шрифты, отступы в одном месте.

На большинстве проектов применяем гибрид: BEM для структурных компонентов (каталог, карточка, чекаут), Tailwind для утилитарных вещей (отступы, flex-раскладки). Границу оговариваем с командой заранее.

Как мы достигаем Core Web Vitals?

Critical CSS — выделяем стили первого экрана через пакет critical, инлайним в <head>. Остальное грузится асинхронно через media="print" onload="this.media='all'". LCP на мобильных сокращается на 1–1.5 секунды.

Изображения — главный тормоз. Используем <picture> с WebP и JPEG-фолбэком. loading="lazy" для всего ниже первого экрана. width и height явно прописаны — CLS = 0. Обработчик в urlrewrite.php генерирует WebP на лету.

Минификация и сжатие. CSS и JS через Vite или встроенное объединение Битрикс. Brotli на nginx (brotli_comp_level 6) — на 15–20% эффективнее gzip. Кэширование статики: expires 1y + версионирование через query string.

Хотите получить подобные показатели? Свяжитесь с нами — сделаем аудит вашего проекта и предложим конкретные шаги.

Что входит в услугу вёрстки сайтов на 1С-Битрикс?

После заказа вёрстки шаблона или адаптации готового решения передаём:

• Исходники шаблонов компонентов с разделением на template.php, result_modifier.php, epilog
• CSS и JS, подключённые через Asset — без инлайн-стилей
• Настроенное кэширование с тегами
• Документацию по структуре и параметрам
• Доступ к Git-репозиторию с историей изменений
• Обучение вашего разработчика: как править шаблон без потери обновляемости

Гарантируем соответствие Core Web Vitals и кроссбраузерность. Закрепляем инженера с опытом 10+ лет — получите консультацию по вашему проекту до начала работ.

Процесс работы:

1. Анализ макетов и текущего проекта — выявляем компоненты для переработки
2. Проектирование структуры — разбиваем страницу на BEM-блоки
3. Реализация — верстаем шаблоны по схеме: template, result_modifier, epilog, CSS, JS
4. Тестирование — проверяем кэш, адаптивность, Core Web Vitals, кроссбраузерность
5. Деплой — стейджинг, приёмка, продакшен

На каждом этапе вы получаете промежуточный результат и можете внести правки. Свяжитесь с нами — оценим проект за 1–2 дня после получения макетов.

Сроки

После анализа даём разбивку по компонентам — что переиспользуется, что верстается с нуля. Закажите предварительную консультацию — посчитаем сроки и бюджет индивидуально.