Адаптивная верстка сайта Bergenson

Проект Bergenson находился на этапе разработки сайта под последующую работу на 1С-Битрикс. Дизайн всех необходимых страниц уже был подготовлен в Figma, а нашей задачей стала его полноценная реализация в коде.

Необходимо было не просто сверстать статичные страницы, а подготовить рабочую frontend-часть проекта, которую можно было полноценно протестировать до последующей интеграции с CMS.

В рамках работ требовалось:

• сверстать весь предоставленный дизайн;
• реализовать адаптивное отображение;
• перенести в код все основные элементы интерфейса;
• реализовать интерактивные компоненты;
• добавить необходимую PHP-логику для тестирования;
• обеспечить корректную работу страниц на различных разрешениях;
• подготовить проект к дальнейшей интеграции с 1С-Битрикс.

За основу были взяты утвержденные макеты в Figma. Дополнительная разработка визуальной концепции в рамках проекта не требовалась — наша задача заключалась в точном переносе готового дизайна в рабочий интерфейс.

Мы сверстали весь предусмотренный макет, сохранив структуру страниц, расположение элементов, типографику, изображения и предусмотренные дизайнером состояния интерфейса.

Особое внимание уделили тому, чтобы дизайн корректно работал не только в исходном разрешении макетов, но и при изменении ширины экрана.

Верстка была выполнена с учетом трех основных типов устройств:

• компьютеров и ноутбуков;
• планшетов;
• мобильных устройств.

Для каждого разрешения были предусмотрены необходимые изменения расположения и размеров элементов.

При этом задача заключалась не в механическом уменьшении desktop-версии, а в адаптации интерфейса под разные размеры экрана: изменении сетки, размеров блоков, расположения элементов и поведения интерактивных компонентов.

В результате одна frontend-реализация могла использоваться на различных устройствах без создания отдельных версий сайта.

Помимо статичной верстки, были реализованы интерактивные элементы, предусмотренные макетами.

В проекте присутствовали:

• слайдеры;
• выпадающие меню;
• модальные окна;
• табы;
• аккордеоны;
• галереи;
• мобильное меню;
• динамические элементы интерфейса;
• различные состояния элементов при взаимодействии пользователя.

Интерактивная часть была реализована на JavaScript с учетом поведения элементов, предусмотренного дизайном.

Это позволило получить не просто набор сверстанных страниц, а полноценный интерактивный прототип будущего сайта.

Поскольку финальная интеграция с 1С-Битрикс на данном этапе не выполнялась, для проверки работоспособности некоторых элементов добавили минимальную серверную логику на PHP.

Это позволило тестировать проект ближе к реальным условиям использования, а не только просматривать статические HTML-страницы.

В частности, были реализованы тестовые данные и логика для динамических элементов, переключения страниц и других компонентов, которым требовалось рабочее поведение.

При этом архитектура проекта не привязывалась к конкретной CMS — готовая frontend-часть могла быть передана на следующий этап разработки и интегрирована в 1С-Битрикс.

Важной особенностью проекта было разделение этапов разработки.

На нашей стороне находились:

Figma → HTML/CSS/JS → адаптив → интерактив → тестовая PHP-логика

А интеграция готовой верстки непосредственно в 1С-Битрикс должна была выполняться следующим этапом.

Поэтому на выходе заказчик получил не просто дизайн в коде, а готовую frontend-основу проекта, которую можно было использовать для дальнейшей разработки CMS-части.

После завершения верстки проект проверили на различных разрешениях и в основных современных браузерах.

Проверяли:

• корректность отображения страниц;
• адаптивность;
• работу мобильного меню;
• интерактивные элементы;
• переключение состояний;
• работу динамических блоков;
• корректность отображения элементов на разных размерах экрана.

Это позволило выявить и устранить визуальные расхождения и проблемы, которые не всегда заметны непосредственно при разработке в одном разрешении.

В результате для Bergenson была подготовлена полностью сверстанная и адаптивная frontend-часть сайта по утвержденным макетам Figma.

Мы реализовали весь предусмотренный дизайн, интерактивные компоненты и необходимую PHP-логику для тестирования. Проект был проверен на различных устройствах и подготовлен для следующего этапа — интеграции с 1С-Битрикс.

Что сделали

• сверстали весь проект по макетам Figma;
• реализовали адаптив под desktop, tablet и mobile;
• разработали интерактивные элементы;
• реализовали слайдеры, меню, модальные окна, табы, аккордеоны и галереи;
• добавили мобильную навигацию;
• подключили минимальную PHP-логику для тестирования;
• реализовали работу динамических элементов;
• проверили отображение в современных браузерах;
• подготовили frontend к последующей интеграции с 1С-Битрикс.

Итог: заказчик получил готовую адаптивную и интерактивную frontend-часть сайта, которую можно было использовать как основу для дальнейшей интеграции и разработки на 1С-Битрикс.