Why we use Client-First in Webflow

Introduction

Keeping up with the latest Webflow development techniques is essential for creating exceptional websites in the ever-evolving world of web development. A framework approach that has gained significant traction is Client-First, a philosophy and set of best practices specifically tailored for Webflow developers. 

Paddle on to find out more about Client-First...

‍

What is Client-First in Webflow

Client-First is more than just a buzzword; it's a comprehensive approach to web development that places the client's needs and user experience at the forefront of the design and development process. It revolves around a series of principles and strategies that prioritise ease of use for both the developer and the client. In practical terms, it is how the Webflow website is developed and the consistent class-naming principles used.

At its core, Client-First in Webflow seeks to accomplish several key goals:

Create an Organisation System for Projects

Successful web development projects are built on a solid foundation of organisation. Client-First encourages the meticulous structuring of projects to ensure that all elements are easily locatable and comprehensible. This not only streamlines the development process but also allows for smoother collaboration among team members.

Enable Speed and Flexibility in Webflow Designer

Speed and flexibility are paramount in today's fast-paced digital landscape. Client-First equips developers with strategies and techniques that help them harness the full potential of Webflow Designer. This means quicker design iterations, faster adjustments, and ultimately, more efficient project timelines.

Define a Strategy for Class Usage in the Project

Consistency in class usage is vital for maintaining a cohesive and visually appealing website. Client-First provides clear guidelines on how to structure classes and ensures that they are used consistently throughout the project. This not only enhances the website's aesthetics but also simplifies future updates and maintenance.

Standardise a Core Structure Shared Across All Pages

Consistency isn't just limited to class usage; it extends to the overall structure of the website. With Client-First, you establish a core structure that is shared across all pages, creating a cohesive UX. This standardisation helps users navigate your site effortlessly, regardless of where they land.

Create a Webflow Build That is Scalable and Easily Manageable

Websites should be designed with the future in mind. Client-First emphasises scalability, ensuring that your Webflow build can grow and adapt as your client's needs evolve. This means less hassle when adding new features or content down the line, ultimately saving time and resources.

Help Developers, Clients, or Anyone Understand the Project

Clarity is key in successful web development projects. Client-First fosters a level of transparency that allows developers, clients, and any stakeholders to easily understand the project's structure, decisions, and objectives. This promotes smoother communication and reduces misunderstandings throughout the development process.

Client-First in Webflow is a holistic approach that empowers developers to create exceptional websites that not only meet their clients' needs but also ensure a smooth and efficient development process. By placing the client and user experience first, adhering to best practices, and prioritising organisation and scalability, Webflow developers can elevate their projects to new heights. Whether you're a seasoned professional or just starting your web development journey, embracing Client-First principles can make a significant difference in your webflow projects.

‍

Is Client-First free?

In the world of web development tools and resources, cost is often a significant consideration. When it comes to Client-First, the short answer is a resounding yes, Client-First is free to use. It's important to note that Client-First is an open-source framework created by Finsweet, a dedicated team of web developers and designers who are passionate about Webflow.

Here's a closer look at why Client-First is indeed free:

Open Source

Client-First is an open-source project, which means that its source code is publicly available for anyone to access, use, and contribute to. This open nature of the framework encourages collaboration and community-driven development.

Community Contribution

While Finsweet initially created Client-First, its growth and maintenance rely heavily on community contributions. Webflow developers from around the world have embraced this framework and actively participate in enhancing its features, fixing bugs, and keeping it up-to-date.

No Licensing Fees

Unlike some proprietary web development tools or frameworks that come with licensing fees, Client-First is completely free to use. There are no hidden costs or subscription fees associated with implementing Client-First principles in your Webflow projects.

Continuous Updates

Client-First is a living project that evolves alongside the ever-changing landscape of web development. Thanks to the dedication of Finsweet and the wider community, updates and improvements are regularly released, ensuring that the framework remains current and relevant.

‍

What is Client-First V2?

In the dynamic world of web development, staying up-to-date with the latest tools and frameworks is essential for creating exceptional websites. Client-First V2 is an eagerly awaited update to the Client-First framework, and it brings a host of improvements that promise to enhance the UX for both developers and clients. Let's dive into what Client-First V2 entails and why it's a significant step forward.

Clearer Explanations and Defined Concepts

One of the most notable aspects of Client-First V2 is its commitment to providing clearer explanations and better-defined concepts. In the previous version, Client-First V1, there was a recognised need for improved content organisation and clarity in explaining certain critical topics. V1, while valuable, left room for further refinement and accessibility.

Enhanced Content Organisation

Client-First V2 introduces a revamped content organisation method that makes it easier to navigate and comprehend the principles behind Client-First. The framework adopts a systematic approach, ensuring that each topic is presented in a logical sequence for improved understanding.

Precision in Explanation

Perhaps the standout feature of Client-First V2 is its commitment to precision in explanations. Each Client-First concept is now meticulously defined, leaving no room for ambiguity. This precision empowers developers to grasp the nuances of Client-First more easily, enabling them to apply it effectively to their projects.

Introducing ‘Strategies’ in Client-First V2

One of the exciting innovations in Client-First V2 is the introduction of ‘Strategies’. These Strategies serve as key pillars within the framework, providing focused guidance on essential topics. Here are some of the core strategies in Client-First V2:

Classes Strategy

This strategy offers a comprehensive understanding of how classes are used in Client-First V2 projects. It emphasises consistency and best practices, helping developers create cleaner and more maintainable code.

‍

Components are better defined

Client-First V2 is more specific in the use of components — and more specific when using underscores!

‍

An example of this is in V1 Initial release, the ‍underscore in class name = component

The V2 release with Folders offers ‍underscore in class name = folder

[folder-name]_component = component

‍

Core Structure Strategy

Ensuring a standardised core structure across all pages is essential for a cohesive UK. The Core Structure strategy guides developers in achieving this goal, resulting in a unified and user-friendly website.

Typography Strategy

Typography plays a critical role in web design, and Client-First V2's Typography strategy delves into the details of typography choices, ensuring that fonts, sizes, and styles are thoughtfully selected to enhance readability and aesthetics.

Spacing Strategy

Proper spacing is crucial for a visually pleasing and user-friendly website. The Spacing strategy equips developers with the knowledge and techniques to create balanced layouts that maximise user engagement.

‍

These strategies, along with others introduced in Client-First V2, serve as the cornerstone for a more refined and accessible framework. They provide a clear roadmap for developers to follow, ensuring that Client-First principles are not only understood but also implemented effectively in their Webflow projects.

‍

What is a Client-First page structure?

In the world of web design, page structure is the architectural backbone that holds a website together, it's the foundation upon which all content is organised and presented to the user. Client-First Page Structure is a specialised approach that has gained acclaim in the Webflow community, and it's not just limited to a single type of website; it's versatile, adaptable, and suitable for small sites, big sites, beginner projects, and advanced endeavours alike.

‍

The Core of Client-First Page Structure

At the heart of Client-First Page Structure lies a set of classes and design principles. These classes form the building blocks for creating a robust HTML foundation around your page content. No matter where you are in your web developer journey, Client-First provides a framework that empowers you to structure your web pages with confidence.

Universal Applicability

One of the standout features of Client-First Page Structure is its universal applicability. It can be used on projects of any size, from huge multi-CMS Collection Webflow migrations, to a landing page, or even a massive Ecommerce platform, the Client-First framework remains consistent and adaptable.

A Language for All

Client-First is designed with accessibility and understanding in mind. Seasoned users will instantly recognise the familiar structure of a Client-First website, but even those unfamiliar with the framework will find it approachable. This accessibility is made possible through the use of human-readable class names, which offer a glimpse into the purpose of each layer within the structure.

One of the core reasons we adopted it at Paddle Creative is it allows us to hire the best Webflow developers, in the knowledge they already speak our development language.

Layers of Div Blocks

Think of Client-First Page Structure as a series of layers comprising Div Blocks that envelop your page content. Each layer serves a distinct purpose, helping you construct a web page that is not only visually appealing but also logically organised and user-friendly. These layers act as a guide, streamlining the design and development process.

Page-Wrapper

At the outermost layer of the Client-First Page Structure stands the ‘page-wrapper’. This Div Block envelops every element on your page, serving as the overarching parent container. The beauty of using a page-wrapper element is that it allows you to easily copy the page contents to other pages. The page-wrapper also contains core elements including global-styles CSS, navigation and footer.

Main-Wrapper

Beneath the page-wrapper lies the ‘main-wrapper’. Embracing the <main> HTML tag, it encapsulates the primary content of your page, encompassing the essence of your website's offerings in distinct sections.. This layer ensures that the core message and elements are structurally unified.

Section_[Section-Identifier]

The ‘section_[section-identifier]’ class is your trusty companion for enhancing workflow efficiency within the Webflow Designer. Its primary function extends beyond the canvas—it's a tool for organisation and navigation. By assigning unique identifiers, it categorises sections, streamlining your design process and simplifying navigation in the Designer's view.

Padding-Global

‘Padding-global’ plays a pivotal role in managing the global horizontal spacing of your page's content. It dictates the left and right padding, ensuring that the content is thoughtfully spaced and aligned. This class maintains consistency and coherence throughout your website, contributing to an aesthetically pleasing user experience.

Container-[Size]

The ‘container-[size]’ class system introduces a unified and adaptable container system for housing your page's content. This versatile structure accommodates all or most of your page content. By employing the container- class, you maintain a consistent content width, enhancing readability and visual harmony across your site.

Padding-Section-[Size]

Within the Client-First Page Structure, ‘padding-section-[size]’ serves as the guardian of global vertical spacing within sections. It bestows top and bottom padding to the content within a section, ensuring a balanced and visually appealing layout. This class system maintains a consistent vertical rhythm, enhancing user engagement and content legibility.

Using Your Own Class-Naming System in Webflow

While you have the flexibility to create your own naming and organisation system in web development, it's important to note that doing so comes with certain limitations.

Custom systems may lack the clarity and consistency that established frameworks like Client-First offer. They can make collaboration with other developers more challenging, as understanding and navigating your codebase might not be as intuitive for others. Additionally, custom systems may not provide the same level of documentation and community support that widely adopted frameworks do, potentially leading to a higher learning curve and more room for errors.

In contrast, using a well-defined framework like Client-First can help streamline your development process, enhance project organisation, and improve overall maintainability, making it a valuable choice for many web developers.

‍

What is the difference between Wizardry and Client-First in Webflow?

While we’re talking about Client-First, it’s useful to know what other options are out there. Two notable methodologies in Webflow, Wizardry and Client-First, stand out as popular choices for developers looking to streamline their workflows and create exceptional websites. Let's explore the key differences between these two approaches…

Origins and Creators

Wizardry is the brainchild of Timothy Ricks, a respected Webflow expert known for his innovative approaches to web design and development. It reflects his personal vision and strategies honed over years of experience.

Client-First, on the other hand, is a creation of the Finsweet team, a collective of web developers and designers. It's a community-driven framework designed to provide a systematic and collaborative approach to web development in Webflow.

Philosophy and Approach

Wizardry is renowned for its focus on advanced techniques and creative solutions. It empowers developers to push the boundaries of Webflow's capabilities, often leading to unique and innovative designs.

Client-First, as its name suggests, prioritises the client's needs and UX. It emphasises clarity, organisation, and systematic structure, making it a strong choice for projects where client communication and content management are paramount.

Organisation and Clarity

Wizardry allows for a high degree of flexibility in naming conventions and structure, which can be an advantage for experienced developers who prefer customisation. However, this flexibility can sometimes lead to less consistency and may require careful documentation.

Client-First, in contrast, provides a predefined structure and class naming conventions, enhancing clarity and organisation. This consistency can simplify collaboration among developers and clients, ensuring that everyone understands the project's structure and objectives.

Community and Support

While Wizardry has a devoted following and active community, it is primarily driven by Timothy Ricks and his personal contributions. This means that updates and support may be more closely tied to his availability and vision.

Client-First benefits from a community-driven development model. It receives contributions from Webflow developers worldwide, ensuring that updates, improvements, and support are readily available and reflect the collective wisdom of the community.

Use Cases

Wizardry excels in projects that demand cutting-edge, custom designs and functionalities. It's an excellent choice when you need to push the boundaries of what Webflow can do.

Client-First shines in projects where client collaboration, clear organisation, and scalability are essential. It's a valuable framework for agencies and developers who want to ensure client satisfaction and maintainability over the long term.

‍

In summary, both Wizardry and Client-First offer valuable tools and approaches for Webflow developers, but they cater to different needs and philosophies. Your choice between them should depend on your project requirements, your familiarity with the methodologies, and your preferred balance between customisation and standardised structure. Whether you opt for the innovative freedom of Wizardry or the collaborative clarity of Client-First, both can empower you to create remarkable websites in Webflow.

‍

Why Paddle Creative use Client-First

Let’s be clear, we do not have any affiliation with Finsweet and we can use any naming convention we want. However, having tried every Webflow naming convention out there (including a bespoke system) here are the key reasons we chose to go all-in on using Client-First for all of our client projects.

Easy for clients to understand

Ths clue is in the name - Client-First. This class-naming convention was first developed to allow the end-user, marketers and website managers to understand how to manage their own website. Client-First is empowering business owners, marketers and agencies to manage sites through an easy to understand system. You can look at the Element panel in Webflow Designer and understand what every element is and what it is used for.

Work with the best Webflow Developers

As Client-First has become a universal development language within Webflow, it means we know developers who join us to become Paddlers speak the same language as we do (and our clients). In a time before Client-First, every developer had their own development system within Webflow. This made it very hard to quality control Webflow development. With a universal language, there are now clear do’s and don’ts that our whole team can follow.

This means that if we have a developer who is a Client-First pro, their Webflow development will likely be of good quality. That is the first hurdle to attracting and finding the best talent to build world-class client websites.

Compatibility

Client-First has fast-become the leading class-naming convention used by Webflow developers. This means there are more projects out there using this system than any other. The benefit of this is if we want to integrate other components from other builds, or even third-party applications into Webflow, the fact we are using Client-First makes this really simple to accomplish.

Webflow now allows us to create world-class web apps. We can harness the power of Webflow, paired with Wized to create bespoke web applications. Client-First is baked into both our Webflow and Wized workflows, meaning developing web apps is a much more robust process.

Lowers the Learning Curve

Client-First prioritises lowering the learning curve for users. The framework is designed with the goal of ensuring that individuals unfamiliar with Webflow can easily comprehend a Webflow project without encountering unnecessary barriers.

Even if an individual has never encountered Client-First before, a project structured in accordance with Client-First principles will present itself as organised and accessible. This dedication to clarity is crucial for minimising the learning curve, as it establishes uniformity across projects and workflows.

The Client-First strategy aligns perfectly with this mission. Its naming conventions are intentionally simplified to cater to non-technical users. The HTML build structure adheres to simplicity and clear definitions. Class usage is optimised to prevent the need for excessive combo class stacking, thereby enhancing the Webflow UX.

Measurement units within Client-First are standardised to one unit, the REM, ensuring consistency throughout the project. Complex calculations are kept to a minimum, reducing complexity and streamlining the development process.

It's important to note that the Client-First Fluid Responsive method is an optional feature that can be effortlessly added or removed from any Client-First project without requiring extra configuration. Enabling or disabling this feature does not alter the core build strategy, providing flexibility while maintaining the framework's fundamental principles.

Accessible and Responsive out of the box (almost)

Whilst it is not true to say a Client-First Webflow build will definitely be responsive and accessible - it will definitely make it easier to accomplish. Any Webflow site, no matter the naming convention, can be built good or bad. But Client-First, by its nature, allows for Webflow websites to be built responsively. 

Client-First embraces the simplicity and versatility of REMs (root em units) for sizing elements within a web project. By utilising REMs, Client-First ensures consistent and accessible design throughout the website. This unit of measurement is based on the root font size, allowing for scalability and adaptability across different screen sizes and resolutions. Client-First's reliance on REMs promotes a fluid and responsive design, making it easier to maintain design integrity and user experience across various devices.

We won’t go into too much detail about the advantages of REMs here because we’ve written a whole resource about REMs being the better option, but here’s a little information. REMs enable developers to create designs that are inherently responsive, as the sizing adapts proportionally to the user's preferred font size settings, providing an inclusive user experience. 

Additionally, REMs simplify the process of adjusting design elements across the site, reducing the need for complex calculations and ensuring consistency in design, all while adhering to best practices for accessibility and usability.

Speed of Webflow Development

By using Client-First, we have a system that is suitable for ANY Webflow development project. All of our Webflow developers know the system and we know we can develop at speed, whilst maintaining quality. Why is this important? We can deliver sites fast, and reduce costs for you. All whilst maintaining quality.

‍

Conclusion

In conclusion, the choice to utilise Client-First in Webflow is a strategic one, driven by its inherent value in creating organised, scalable, and user-friendly websites. With Client-First, web development becomes a collaborative and efficient journey that benefits both developers and clients, making it a valuable methodology in the ever-evolving world of web design. Importantly, it empowers developers to deliver projects that are not only visually appealing but also easy to manage, ensuring long-term client satisfaction and project success. 

Want to know more? Get in touch today!

Client-First's commitment to clear structure, simplified class naming, and an accessible framework not only streamlines the web development process but also places the client and user experience at the forefront.