Brandon WatkinsFounder, Flowlabz
On this page6 chapters
Webflow is powerful enough to build almost anything and flexible enough to do it wrong in ways that won't show up until a client tries to edit their own site six months later. Most Webflow "tips" lists cover the basics. This one covers the stuff that actually matters in production.
Architecture and Naming Before You Build a Single Section
1. Set up a style guide page before anything else
Your first page in every Webflow project should be a hidden Style Guide page. Put all your global styles there: heading sizes, body copy variants, button styles, colour swatches, form elements. Every visual decision in the project derives from this page. When the client changes brand colour mid-project (they will), you change it in one place.
2. Use combo classes, not one-off overrides
One of the most common Webflow antipatterns is applying inline style overrides to individual elements because it's faster in the moment. Six weeks later you have 80 elements with inconsistent padding and no way to update them globally. Use a base class with a modifier combo class for every variation, card + card--featured, btn + btn--outline. Your future self will thank you.
3. Name everything as if you're handing off to a stranger
Webflow's auto-naming is catastrophic. A project full of "Div Block 47" and "Section 12" is unmaintainable. Name every div, section, collection list, and symbol with its purpose: hero-content-wrap, testimonials-grid, nav-cta-group. This makes custom code targeting trivial and collaboration far less painful.
CMS: Build It for the Client, Not for Yourself
4. Map the CMS schema before building any templates
Most CMS architecture mistakes happen because the builder starts with the design and retrofits the CMS fields to match. Do it backwards. Start by listing every piece of content the client will need to manage, group it into collections, and define the field types and relationships. Then build the design around the data model.
Common fields designers forget to include: SEO meta title, SEO meta description (separate from the body copy summary), a featured image with alt text field, a publish date (separate from the Webflow created date), and a boolean toggle for "featured" or "hide from listing."
5. Use reference and multi-reference fields deliberately
Reference fields let you create real relationships between collections: blog posts referencing authors, projects referencing categories, team members referencing departments. These are far more maintainable than duplicating information across collections. The limitation is Webflow's 20-field cap per collection, so plan your schema before you hit it.
Client handoff rule: Every CMS collection should be buildable by a non-technical client using only the field labels. If a field is called "Body Copy Alt 2, DO NOT LEAVE BLANK," you've failed. Rename it, add helper text, or restructure the schema.
Interactions and Animations
6. Use scroll-into-view triggers over scroll position triggers
Scroll position-based animations are fragile. They break when content shifts, when viewport heights change, and on mobile. Scroll-into-view triggers fire when an element enters the viewport regardless of its position on the page. For 90% of reveal animations, scroll-into-view is the right choice.
7. Lottie for complex animations, native for everything else
Webflow's native interactions handle most UI animations well: reveals, hover states, tabs, accordions. For complex icon animations, looping illustrations, or animated data visualisations, a Lottie file will always outperform anything you can build in Webflow's interaction panel. Keep interaction complexity in proportion to maintenance cost.
Custom Code Done Right
8. Page-level vs site-level custom code
Webflow gives you both a site-wide custom code head/footer and per-page custom code. Site-wide code loads on every page. Every unnecessary script here is dead weight on every page load. Only put code in the site-wide section if it genuinely needs to run everywhere. Analytics, fonts, and global interaction scripts belong there. Page-specific scripts go in that page's custom code section.
9. Use custom attributes to bridge design and JavaScript
Webflow's custom attributes panel lets you add data-* attributes to any element without touching code. This is the cleanest way to pass configuration to custom JavaScript: animation delays, video IDs, toggle targets, API parameters. It keeps your JS generic and your configuration in the designer where it belongs.
Performance Before You Publish
10. The pre-launch performance checklist
Run through this before every launch:
- Images: Every image uses Webflow's responsive srcset. No images wider than 2400px. Hero images are WebP or AVIF.
- Fonts: Google Fonts loaded with
display=swap. No more than 2 font families, 4 weights total. - Third-party scripts: Any non-critical script loads with
deferorasync. - CMS images: Compress images to under 500KB before uploading. Webflow resizes but does not heavily compress.
- Unused classes: Run a clean-up pass before publishing. Webflow's style panel shows class usage counts.
The Handoff Is Part of the Build
A Webflow site that a client can't maintain confidently is an incomplete project. Build an Editor Guide covering: how to add a blog post, how to update team members, what fields are required vs optional, and what they should never touch. This document is the difference between a client who feels empowered and one who calls you every time they want to change a headline.
The best Webflow builds aren't the most technically complex ones. They're the ones where the client is still happily updating their own site two years later without a support contract.
If you'd rather hand the build to a team that works this way by default, Webflow is one of the ways we deliver our website design and build projects, and we take on Webflow development white-label for agencies too. Here's how that works. For the CMS side, read structuring Webflow CMS for clients who actually use it.
