Better structure in your Webflow projects with Finsweet's Client-First Style System

At No Dead Fish, we use Finsweet's Client First. Client First is a style system developed by FinSweet, a company from the United States and one of Webflow's community leaders. FinSweet is a true pioneer in using Webflow and they make everything they do available to their community. By giving us access to their way of working, resources and vision, we, as Webflow developers, can apply this way of working. This ensures that every Webflow developer who works with FinSweet tools and methods understands each other and can easily take over or edit projects because we all use the same structure and style. This is not only super handy, but also super scalable!

What is FinSweet's Client-First Style System?

About one year ago, in the month of August of 2021, introduced FinSweet their new styling system called Client-First. As the name suggests, it was born from the idea of putting the customer first. The back end of Webflow can be a maze for many if you're not familiar with the platform, the solution to this problem was the Client-First Style system. The goal was to ensure that everyone should be able to work with the website, including non-Webflow developers. Ultimately, we build websites for customers, it's important that our customers can understand and maintain/update their own website as they see fit.

Now a year later, FinSweet has updated the Client-First Style System, version 2. This new version offers even more features, works even faster and is even more streamlined than version 1. In addition, they have the documentation considerably expanded so that anyone who wants to get started with it can do so too. With more than 20 chapters, each strategy and line of thought is explained and described down to the last detail. It takes you some time to go through all of this, but once you understand it, structural building in Webflow is uniform and easy peazy in each of your projects.

Client-First Goals

FinSweet has set a number of goals with the system. By applying the system, you can also achieve these goals for your development process within Weblfow. The goals are as follows:

1. Create an organization system for each project
2. Work faster in Webflow with less effort/effort
3. Define a class strategy for each project
4. Standardize processes across pages
5. Build scalable, maintainable projects
6. Unify a building strategy as a team

From experience from previous years, when we started using Webflow, we at Online Winner learned that a system such as Client-First is essential or not essential if you want to be able to work with multiple people on multiple websites as a company. In the previous years, I mainly only worked on projects, but even then, you notice that it is difficult to continuously use the same structure for each project, with a system you can solve this problem and you no longer have to think about the structure and strategy. The only thing you have to think about is creating a website that will help your customer conquer the market.

What are the benefits of Client-First for your website?

In addition to offering benefits for us as a developer, it also offers benefits for you! As I said, Client-First provides a good technical SEO structure, accessibility, and also that you can easily and quickly find, modify, but also add content to your own website.

Search Engine Optimization with Client-First

By applying the basic structure used when developing a website with this system, we automatically apply a good SEO structure.

The basic structure of Client-First consists of a page-wrapper containing elements such as a navigation bar, footer and the main content of the page. This main content is located in the main wrapper. All content in the main wrapper is recognized as the most important content on the page because the main wrapper has the html tag <Main> has received. In addition, Client-First ensures that you work in a very structured way, which makes applying technical SEO to a website effortless.

Accessibility with Client-First

The above structure also has an impact on the accessibility of a website. Accessibility (or accessibility) is becoming an increasingly important theme in our society. That's why we take into account color, contrast, html structure, and labeling links and content with ARIA labels (Aria stands for: Accessible Rich Internet Applications). By taking accessibility into account, you help your fellow human beings navigate through your site and yourself by scoring better in Search Engine Optimization. A Win, So Win!

Easily manage your website with Client-First

In addition, Client-First also teaches us to build websites logically by giving a clear description to a class, the name of the class will then appear in the navigator as shown in the image above. For example, if you click section blog header you will be automatically directed to this element on the page. Client-First was created so that everyone can understand and use it. You don't need to be a developer, people who have never seen a Webflow website should also be able to understand what's happening on the website and where to find the content they want to modify.

‍

There is still a lot to say about the Client-First Style System, but in principle, everything is in the documentation who FinSweet made for us. In any case, we are very enthusiastic about it and recommend that every Webflow developer also use a system where they can work quickly. In addition to this system, FinSweet Webflow has even more to offer Developers like us that makes our life within Webflow a lot easier. For example, have you wondered how to add a filter to your Collection items? They have a solution for that and we'll be happy to tell you more about that in the next article!

Do you also want a website that is built in Client-First and is therefore technically SEO well put together, scores very well on accessibility and is also easy to edit for you and/or your team? Take contact join us! Then we will be happy to help you with your online challenges and ensure that you can also score online.