Whenever I build sites in Webflow, I’m always looking for ways to improve my workflow and increase efficiency.
Today, I’m going to share several tools that have allowed me to drastically reduce my build time over the past several months.
1. Client-First
Client-First is a code framework & naming convention, developed by Finsweet.
This framework is completely free, well documented, and it comes with a Style Guide that you can use as a starting point.
Here are the main benefits that I’ve found to using Client-First.
- Reduced decision fatigue. The system dictates best practices for many minor style nits; such as text weight, page max width, padding units, and so forth.
- Cleaner code. Since this system was built specifically for Webflow, there’s a strategy behind each class & style. Extra bloat is minimized, but I still have the flexibility to depart from the guidelines and build something custom if needed.
- Easier handoff. Clients always love to hear that I’m using an industry-wide standard for my code. Client-First is well known - but even without reading the docs, a newcomer should be able to understand what they’re looking at.
Working in Client-First was a bit of an adjustment at first, but the payoff was worth it. Now, when I’m reaching in my “toolbox” to build a particular element, I can easily see what styles I have to work with.
2. Relume Library
Coming in hot on the heels of Client-First is a paid resource: the Relume Library.
With Relume, I have access to over 800 pre-built sections & elements - ALL using the Client-First framework, and ready to copy/paste directly into Webflow.
- Skip the boring part. Relume provides the structure & layout for almost every basic section. Even if my end result doesn’t look much like the initial template section, I save a ton of time by not having to build out the scaffolding divs.
- Extra inspiration. Sometimes I like to just browse through the other sections in a particular category to see if there’s a new layout that I hadn’t thought of.
- Figma file. If you’re working on a larger project where you need to build designs in Figma, Relume has a matching Figma file that includes all of their Webflow components.
Sometimes I almost feel like I’m cheating or taking shortcuts with Relume, because using their resources gives me such a head-start on my development process. The extra efficiency and the time savings are absolutely worth the monthly subscription.
3. Keyboard Shortcuts
Webflow has a few critical keyboard shortcuts that have also allowed me to go from zero to hero.
- New elements. CMD/CTRL + E opens up the omni search bar inside Webflow. From there, you can hit the D key to get a new div, or you can type the name of any other element or component that you need.
- Add/rename classes. CMD/CTRL + Enter allows you to quickly add classes to your element, and CMT/CTRL + Shift + Enter allows you to rename the current class.
- Navigating the element tree. Arrow keys let you switch elements easily without ever touching the mouse. Left/right navigate between sibling elements, and up/down takes you to parent/child elements.
After a week or so of using keyboard shortcuts religiously, I realized that the few seconds I was saving by keeping my hands on the keyboard was really adding up.
I’m now able to create elements and classes without any lag time, and the momentum isn’t wasted on unnecessary mouse movements.
4. Process
In addition to these technical changes, I’ve also made some changes to my mindset and approach to web development.
I’ve been using Asana to track my tasks, and I’ve crafted some project phases that allow me to batch work and streamline my workflow.
Putting my process down on paper helped me to prioritize the most important tasks and avoid getting bogged down in unnecessary details.
Summary
Overall, these changes have allowed me to significantly speed up my Webflow development and deliver high-quality websites to my clients in less time.
Of course, there’s still a lot of room for improvement, and I’m constantly looking for new tips and tricks to optimize my workflow.
That said, if you’re looking to cut down on development time, I highly recommend you give Client-First, Relume Library, Webflow keyboard shortcuts, and process optimization a try.
Let me know how it goes, and good luck!
