Дизайн и вёрстка на 1С-Битрикс: подход и компетенции
Что мы понимаем под дизайном страниц на 1С-Битрикс
Дизайн в контексте 1С-Битрикс — это не отдельный артефакт «макет в Figma» сам по себе. Это макет, учитывающий, как устроен ваш сайт изнутри: какие компоненты используются, как работают шаблоны вывода, какая структура каталога, какие поля у инфоблоков. Без этой связи макет либо не получится реализовать корректно, либо потребуется его глубокая переделка на этапе вёрстки и интеграции.
Мы начинаем дизайн на 1С-Битрикс с аудита текущего шаблона и компонентов. Понимаем, что останется без изменений, что поменяется только визуально, а что нужно переделать полностью. Только после этого передаём задачу дизайнеру, а после согласования макета — верстальщику.
Адаптивная вёрстка и кроссбраузерность
Вёрстка идёт под три брейкпоинта: десктоп, планшет, мобильный. На каждом сайт должен сохранять читаемость, удобство и логику взаимодействия, а не просто уменьшаться пропорционально. На смартфоне меняется не только размер шрифта, но и расположение блоков, поведение меню, формат форм, размеры тап-зон.
Проверка выполняется в актуальных версиях Chrome, Firefox, Safari, Edge и Яндекс.Браузера. Отдельно тестируем в мобильном Safari на iOS — он часто ведёт себя иначе, чем десктопные браузеры, и многие неочевидные баги проще заметить именно там. Также проверяем на реальных устройствах iPhone и Android разных поколений и производителей.
Работа с компонентами и шаблонами 1С-Битрикс
В 1С-Битрикс есть концепция шаблонов компонентов — отдельных файлов, которые отвечают за визуальное оформление функциональных блоков: каталога, корзины, форм, новостных лент. Правильный путь кастомизации основан на копировании шаблона компонента и выполнении всех действий в копии. Это позволяет менять дизайн без правки самого компонента и без потери совместимости при обновлении CMS.
Иногда задача требует доработки ядра — например, если нужна нестандартная логика, которая не закрывается штатными возможностями платформы. Это редкие случаи, и решение всегда принимается осознанно. В таких ситуациях изменения фиксируются в документации, чтобы при следующем обновлении 1С-Битрикс вы или ваш разработчик точно знали, что было кастомизировано и как поддерживать эти участки кода.
Это особенно важно для редакции 1С-БУС, лежащей в основе интернет-магазинов: обновления приходят регулярно, и сломанная вёрстка после очередного апдейта — довольно типичная проблема для сайтов, сделанных по принципу «как получится».
Передача макетов в разработку
Если у вас уже есть готовый дизайн от стороннего дизайнера или агентства, работаем с ним. Принимаем макеты в Figma, Sketch, Adobe XD, Photoshop. На первом этапе проверяем их на полноту: есть ли стили шрифтов, прописаны ли состояния элементов (hover, active, disabled), описаны ли поведения форм и интерактивных блоков, продуманы ли мобильные версии.
Если макет «сырой», фиксируем недостающие места и предлагаем варианты: либо доработку выполнит сторонний дизайнер, либо мы берем ее на себя. Дальше идёт согласование сроков и стоимости, после чего стартует непосредственно верстка.
