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

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

Адаптивне тестування — це не «відкрив на телефоні і подивився». Це системна перевірка всіх критичних сторінок на реальних роздільностях з фіксацією та усуненням дефектів. Ми працюємо з Бітрікс багато років і реалізували понад 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-подіями та позиціонуванням, які емулятор не покаже. Довірте тестування професіоналам з багаторічним досвідом в 1С-Бітрікс. Замовте аудит адаптивності — і ми зробимо ваш сайт зручним на будь-якому пристрої.

Чому верстка сайтів на 1С-Бітрікс вимагає професіоналізму?

Відкриваєте template.php у попереднього підрядника — а там SQL-запити, бізнес-логіка та inline-стилі в одному файлі. На кожному другому проєкті, який ми беремо на підтримку, код шаблонів виглядає як звалище: кеш не працює, додати нову фічу — переписуй все. Виправлення такої верстки може коштувати чимало, а втрачений виторг через зламаний кошик у пік сезону може сягати десятків тисяч гривень.

Ми — команда сертифікованих розробників 1С-Бітрікс із десятирічним досвідом. За нашими плечима понад 50 успішних проектів верстки та підтримки. Наш підхід строго розділяє: логіка — в 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% — в 1.4 раза швидше порівняно з повним скиданням.

Реальний кейс. Наш клієнт скаржився — на сторінці каталогу у всіх один кошик. Виявилося, попередній розробник вивів $_SESSION['BASKET'] всередині template.php компонента catalog.section. Компонент кешувався на годину — кошик застиг. Перенесли виведення в component_epilog.php, налаштували тегований кеш на sale.basket.basket.line. Сторінка не втратила у швидкості, кошик став актуальним. Збитки від несправного кошика в пік сезону могли бути значними, а вартість виправлення — помірною.

CSS-підходи: BEM, Tailwind або гібрид?

Для великих проєктів (30+ шаблонів) використовуємо BEM — .product-card__price, .product-card--featured. Стилі ізольовані, конфліктів немає. У Бітрікс обгортки з класами 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+ років.