Webflow Way vs. Finsweet’s Client-First: What They Are and How They Compare

Prior to last month’s Webflow Conf, Webflow launched Webflow Way - a comprehensive set of best practices for developing in Webflow. Both of these events helped us forget about the major service disruption earlier this summer. Today, Webflow is experiencing better days.

Best practices are always welcome - especially when they come straight from the platform’s creators. If they’re missing, space opens for third parties to shape the conversation. One of the strongest voices is Finsweet, the creator of Client-First.

In this article, we look at how these two systems compare, what they have in common, and what sets them apart. Per authors’ definition:

• Client-First is a set of guidelines and strategies designed to develop organized and maintainable Webflow projects. 
• Webflow Way is a collection of best practices that help you get the most out of Webflow to deliver high-performing, scalable web experiences.

Client-First

Client-First focuses on three main challenges in Webflow projects:

• Naming conventions
• Project organization
• Consistency

Naming conventions help you use the right classes and variables. Thoughtful project organization lets you navigate the structure with ease. Consistency ensures you can apply changes without breaking something else.

This makes Client-First projects easy to understand and manage. Even clients without much Webflow knowledge can work with them. For developers, it allows smooth project transitions and improves the developer experience (DX).

Key Concepts of Client-First

Client-First comes as a clonable project that you can duplicate in Webflow to start your build. What you get is a structured setup that includes a style guide with predefined classes and variables.

To use Client-First-based projects effectively, we need to get familiar with its key concepts. From there, we can adjust the system to our liking.

• Class strategy - how to use and manage utility and custom classes
• Page structure - explanation of the default structure of individual web pages
• Sizes and rem - using REM units helps build fluid, responsive websites
• Variables - variables support consistency and ease of maintenance
• Typography - dive into the project typography with utility classes
• Spacing strategy - having a flexible and consistent spacing system is crucial for easy development
• Folders - folders help organize and control classes

As you can see, Client-First is very design- and development-centric. While it touches on other areas like SEO and accessibility, its primary goal isn’t to cover every corner of the Webflow platform.

Agencies and individuals can apply for Client-First certification. 

Webflow Way

Webflow Way is Webflow's official set of best practices. It’s designed to help users get the most out of the platform and deliver high-performing, scalable web experiences.

Its coverage is broader than Client-First. Design and styling make up just one chapter, called Design Systems.

Webflow Way covers the following topics:

• Design Systems: Guidance on creating and implementing consistent design systems within Webflow.
• CMS (Content Management System): Best practices for structuring and managing dynamic content.
• SEO (Search Engine Optimization): Strategies for optimizing Webflow sites for search engines.
• Localization: Advice on building multilingual websites and adapting content for different regions.
• Optimize & Analyze: Techniques for improving website performance and utilizing analytics.
• Collaboration: Recommendations for effective teamwork within Webflow projects.

Similarly to Client-First, you can test your knowledge and unlock a badge to showcase your expertise.

How They Compare: Similarities and Differences

Both Webflow Way and Client-First aim to improve the quality and maintainability of Webflow projects.They approach this goal from different angles.

Similarities:

• Promote Best Practices: Both systems advocate for structured and organized Webflow development.
• Improve Maintainability: They both aim to make projects easier to update and manage.
• Enhance Collaboration: By providing clear guidelines, both ensure smoother teamwork on projects.

Differences:

• Depth vs. Breadth: Client-First offers specific guidance on class naming and project structure. Webflow Way provides broader recommendations across more aspects of the platform.
• Official vs. Community-Driven: Webflow Way is the official stance from Webflow. Client-First originated from the Webflow community (Finsweet). It has become a widely adopted standard.
• Integration: Webflow Way is tied with the platform's features. Client-First is a method applied within Webflow.

xfive's recommendation

Both Webflow Way and Finsweet's Client-First offer valuable frameworks for Webflow development. We recommend adapting both.

Webflow Way delivers a comprehensive overview of best practices across the entire Webflow ecosystem, helping you leverage the platform’s full potential.

Client-First provides a practical system for structuring projects, making them well-organized and easy to hand off. Even if you don’t adopt it, you can still draw inspiration from many of its solutions.

In the next article, we’ll share how we aligned Client-First with our design system in Figma. This not only simplified the design handoff but also sped up development and QA.

--

Looking to design and develop your website in Webflow? Contact us!