Adaptive layout of the Bergenson website

The Bergenson project was at the stage of developing a website for subsequent work on 1C-Bitrix. The design of all the necessary pages has already been prepared in Figma, and our task was to fully implement it in code.

It was necessary not only to create static pages, but to prepare a working frontend part of the project, which could be fully tested before subsequent integration with the CMS.

As part of the work, it was required:

• compare all the provided design;
• implement adaptive mapping;
• transfer all the main interface elements to the code;
• implement interactive components;
• add the necessary PHP logic for testing;
• ensure that the pages work correctly at different resolutions;
• to prepare the project for further integration with 1C-Bitrix.

The approved layouts in Figma were used as a basis. Additional development of the visual concept within the framework of the project was not required — our task was to accurately transfer the finished design into a working interface.

We have adjusted the entire intended layout, preserving the structure of the pages, the layout of the elements, the typography, the images and the interface states provided by the designer.

Special attention was paid to ensuring that the design worked correctly not only in the original resolution of the layouts, but also when changing the screen width.

The layout was made taking into account three main types of devices:

• computers and laptops;
• tablets;
• mobile devices.

The necessary changes in the location and size of the elements were provided for each resolution.

At the same time, the task was not to mechanically reduce the desktop version, but to adapt the interface to different screen sizes: changing the grid, block sizes, arrangement of elements and behavior of interactive components.

As a result, one frontend implementation could be used on different devices without creating separate versions of the site.

In addition to the static layout, interactive elements provided by the layouts were implemented.

The project included:

• sliders;
• drop-down menus;
• modal windows;
• tabs;
• accordions;
• galleries;
• mobile menu;
• dynamic interface elements;
• different states of the elements during user interaction.

The interactive part was implemented in JavaScript, taking into account the behavior of the elements provided by the design.

This allowed us to get not just a set of peer-to-peer pages, but a full-fledged interactive prototype of the future site.

Since the final integration with 1C-Bitrix was not performed at this stage, minimal PHP server logic was added to check the operability of some elements.

This allowed us to test the project closer to the actual conditions of use, and not just view static HTML pages.

In particular, test data and logic were implemented for dynamic elements, page switching, and other components that required operational behavior.

At the same time, the project architecture was not tied to a specific CMS — the ready-made frontend part could be transferred to the next stage of development and integrated into 1C-Bitrix.

An important feature of the project was the separation of the development stages.

On our side were:

Figma → HTML/CSS/JS → adaptive → interactive → test PHP logic

And the integration of the finished layout directly into 1C-Bitrix was supposed to be the next step.

Therefore, at the exit, the customer received not just a design in the code, but a ready-made frontend-the basis of the project, which could be used for further development of the CMS part.

After the layout was completed, the project was tested on various resolutions and in the main modern browsers.

Checked it out:

• page display correctness;
• adaptability;
• the operation of the mobile menu;
• interactive elements;
• switching states;
• how dynamic blocks work;
• the correct display of elements on different screen sizes.

This made it possible to identify and eliminate visual discrepancies and problems that are not always noticeable directly when developing in a single resolution.

As a result, a fully aligned and adaptive frontend part of the site was prepared for Bergenson according to the approved Figma layouts.

We have implemented all the provided design, interactive components and the necessary PHP logic for testing. The project has been tested on various devices and prepared for the next stage — integration with 1C-Bitrix.

What have you done

• we compared the entire project according to Figma layouts;
• implemented adaptations for desktop, tablet and mobile;
• We have developed interactive elements;
• implemented sliders, menus, modal windows, tabs, accordions and galleries;
• added mobile navigation;
• we have enabled minimal PHP logic for testing;
• implemented the operation of dynamic elements;
• we checked the display in modern browsers;
• We have prepared frontend for further integration with 1C-Bitrix.

Bottom line: the customer received a ready-made adaptive and interactive frontend part of the site, which could be used as a basis for further integration and development on 1C-Bitrix.