What is Webflow Client-First and why should you use it?

What is Client-First?

Client-First is a set of guides and strategies created by Finsweet to help build Webflow web pages. Client-First is about creating a unified organizational system that can be used in all Webflow projects.

This allows anyone to jump into a Webflow project and understand how it is structured, and what the various elements do.

Client-First contains a set of specific naming of classes for structure and styling in Webflow. The objectives of these class designations are:

• Give a non-technical person the opportunity to operate the website.
• Be clear, informative and descriptive in the class naming.
• Give the reader as much context as possible about the purpose of the class.
• Reading a class name and knowing what its purpose is.
• No abbreviations and no confusion.
• Provide as much context as possible into the relationship between the class and the website.
• Create names based on techniques of organization by prefix and keywords.

‍

Div Block 59, no thanks!

Imagine that you have just started a new Webflow project and you want to give the single body a slightly larger font size. You create a Paragraph element, and then change the font size of that one element to 26px. The first time you do this, this item will get the styling class Paragraph. If you do it again on a new Paragraph item, the name will be Paragraph 2. Next time it will be Paragraph 3, etc., etc.

The problem with such naming is that they tell nothing about what they do or what they look like.

This is where Client-First comes into play.

In Client-First we have a predefined class called text-size-large. The name of this class explains what it does; a text of large size. This class can be reused on all the body texts on your website that you want to be a little larger than usual. If you increase the font size to text-size-large, this change will occur on all elements of your website that use this class. This is brilliant, because it ensures consistency for the entire website. It also allows you to get far fewer classes, which results in less code, and which in turn makes for faster web pages.

‍

Client-First can be a bit comprehensive to get into because there are a lot of class names to deal with. Many people also find that the way Client-First structures a website is a bit unusual. The longer one has used Webflow and built up their own habits, the harder it can be to make the jump to Client-First.

But it is definitely worth using Client-First. Especially in the long run.

Client-First doesn't have predefined classes for every possible case, and you can of course create your own custom elements just the way you want. But here, too, Client-First has recommendations for what you should name these custom items of yours, so that the names make sense to you and others.

Fortunately, Client-First also includes many great guides, as well as clonable templates that you can download and use as a starting point. And best of all, it doesn't cost a single penny. To begin with, we highly recommend checking out Finsweet's Own Introduction to Client-First.

‍

Why We Use Client-First

We use Client-First on everything we create in Webflow. We do this for four main reasons:

1. Anyone on our team can jump in and collaborate on a project, and understand project structure and styling classes
2. The customer can do the same, as well as other external Webflow developers
3. Client-First streamlines our processes and allows us to build websites faster
4. Client-First provides better SEO and strengthened universal design

‍

How to Learn Client-First

You will not regret it! Finsweet, the creators of Client-First, have several great guides on their own website which we recommend taking a look at. Feel free to start by checking out their introduction guide.

After you read up a bit, we can highly recommend using Client-First on your next Webflow project. You'll quickly experience how intuitive the system is, and hopefully regret not getting started with Client-First sooner.

Can I convert a previous Webflow project to Client-First?

Yes, it is possible to convert a previous Webflow project to Client-First. But it is a large and time-consuming task that requires a lot of manual work. It will require especially a lot of work if:

• The website is big.
• The naming convention in your existing project is very different from Client-First.
• The project was built by someone other than yourself.

In any case, it will take a lot of time to convert a previous Webflow project to Client-First. It's probably faster to start from scratch.

If you want to convert, you have two options:

1. Convert your existing project to match Client-First.
2. Start from scratch by building a new project with Client-First.

From experience, we can say that most often starting from scratch is faster than trying to convert the existing project. But if you still prefer to master your existing project, you can take a closer look at ClientFirst's guide in How to convert previous projects.