Cofenster

Cofenster is a company from Hamburg, Germany, that provides an enterprise-ready video production solution with no experience (or fancy camera) required. We started our collaboration through the Webflow Experts program with the expectation of launching their new re-branded website as soon as possible. We started in June and were able to launch the website mid-July. My objective: Figma to Webflow – I transformed their newly designed website design file into a fully responsive website with smooth animations and an efficient Webflow CMS setup.

Their actual company software tool was not developed by me. I was responsible for refreshing their brand web presence because their previous website was outdated and was not looking as professional as it could have on some devices. The website update went together with their general re-branding.

Time for change

What really distinguishes the new website from the old one from a technical standpoint is the solid CSS and HTML structure I used alongside of the Client-first style system to develop the various components that are being used with SEO best-practices for Webflow websites in mind. It is important that components are built with all devices in mind and different changes the marketing team could want to make while still not breaking/falling apart. That way, cofenster can do more changes without needing to contact me which empowers them to work efficiently. I also provided short explanation videos to discuss topics with their design team, such as how to properly compress images so that their file sizes don’t slow down the website loading speed.

Modular approach

An interesting aspect of this project was the modular approach the design team was aiming for with the new website. This particular design system was called atomic design. With the website set up in a modular way alongside of the style guide I prepared for cofenster and external developers new pages can be created faster and existing pages can be modified by changing components. It was quite challenging to keep the modular approach in mind since it adds a new level of complexity to the components. Everything should be easy to change and control without breaking the design. There were some situations where I had to jump back and adjust the settings of a section or component to make it more flexible. This process was pretty valuable for me because I thought about new situations which I will now also keep in mind when building new websites. Apart from the style guide, I also added all components/modules I created to a component library page, so that all components are accessible at all times.

Image aspect ratios

Another thing I took from the Figma file to the Webflow website was the aspect ratios of the images in the design. In some situations, images can be cropped if the image aspect ratio from the uploaded image does not properly work for a section or component. That’s why I used a trick to add fixed aspect ratios to images wherever it made sense so that the marketing and design team doesn’t have to worry about this issue.

Special components

Pricing table

A component that stood out to me was the pricing table. Tables can be challenging to build in a visually appealing way that also works on mobile devices since you have to deal with a lot of rows and columns, obviously. This component was especially challenging because of the different look of some columns and different spacings in some dividing rows. However, I was able to create a nicely structured table that is super fast to edit. In multiple situations, I could have settled for a technically rather unsatisfying solution that would have been easier to implement at first, but it is my mission to set up sections in a way that is easy to edit and easy to work with.

For example, I wrote some lines of CSS code that automated rounding corners for the first and last items in each pricing column, used the same CSS class on all pricing table items so that edits to the whole component can be done in seconds. Each row also has an included tooltip that opens on hover of an icon placed to a label. I also provided an explanation video so that the design team doesn’t face any challenges when adding the tooltip text. Pricing tables can be hard to adjust to small devices so cofenster’s design team and I came up with a solution that was also used in multiple other special sections across the website.

Custom scrollbars for components

The special solution I was just talking about is a horizontal scrollbar for some sections that are purposely going out of the screen from the design itself. One of these sections with a horizontal scrollbar is the masonry grid that you can find across multiple pages. With the scrollbar, users can swipe on their mobile devices to move the focus and desktop users can simply drag the scroll control to move the component. Horizontal scrollbars are not supported natively in Webflow, so I used custom CSS code to create the functionality. By default, scrollbars don’t look great since they get the standard chrome scrollbar styles. However, with some custom CSS, once again, they looked super custom and professional. I had never done this before, so it was cool to see it working.

Special Splide slider

Before opting for the slider navigation that is currently in use for cofenster’s website, I created a custom scroll bar to navigate through the slides, using the Splide JavaScript library to make it work. After some research and testing, it worked. However, we didn’t keep it and went with a solution that was simpler and more reliable. Through working with Splide I learned a new skill that benefits me as a Webflow Expert Partner, since you can only come so far using Webflow’s native slider components.

Cookie consent

Cookies are an important way to get data from website users. Nonetheless, it’s a quite tricky subject since several data protection laws require website owners to implement the cookies carefully, especially in the EU. If ignored, there can be charges. I won’t explain all the rules here, but I will say how I managed to set up the cookie consent in a way that is legal and looks stunning. First, I used Finsweet’s Cookie Consent tool so that I was able to create the “accept” and “reject” functionality, alongside of the banner popup that let’s users customize their cookie choices.

I refined the look of the component according to the visual style of the website by adjusting different settings in the Webflow design interface and tweaked some animations to make it look and feel smooth. The cookie scripts are now triggered according to the user’s choices and get to the marketing team, if activated.

It was important to the design team, that the cookie consent is a smooth experience, just like the rest of the website.

Animations

To create a smooth experience across the whole website, I presented different animation styles to the design them to let them evaluate and I listened to their wishes to find the final style. We went for slide in animations that just give more life to the website since we all considered it a bit static without some exciting movement happening. Without being annoying, just to complement the website scrolling and interaction experience.

We were testing a couple of different external technologies like LuxyJS or Locomotive scroll too, but the additional technical requirements of these libraries made us settle with Webflow interactions. These are easier to control and there is less potential to break something.

Multilingual with Weglot

Users can select the language of their preference by using the language picker in cofenster’s navigation bar. This was one of the most challenging parts of the project since we were going for a custom language picker that looks smooth. I went with Weglot as the technology to make the switching between languages possible, since I felt like Weglot was a great solution for cofenster’s team to control the translations in an easy way. Also, the tool is a great solution for SEO and is not that bad for the website performance/loading speed neither.

Conclusion

Creating the new cofenster website was definitely one of my rather challenging projects but I am excited to see how it turned out. As I explained in this case study, I learned a lot from working on this website together with their professional design team. It is also quite an achievement that we got it to work within one and a half months. We will continue to collaborate if there’s any changes, they want me to make.