Tips for Advanced Webflow Projects

Landed a huge project request, and your client wants you to build it on Webflow?

Congrats! 😃 But this will be the most awesome project you've ever worked on, or your worst nightmare. The difference lies in the approach.

Advanced project often feature interesting challenges, like;

• Complex or unusual data structures
• Huge amounts of data
• Complex or unusual display requirements
• Complex administration requirements, such as multiple admins, with different access rights- or users or partners who need to be able to manage their own data.
• Complex integrations.
• Complex user-interfaces, like maps, graphs, charts...
• Billing transaction requirements, accounting ledgers, credits...

Why this matters

Webflow is extremely limited in a few areas that may be relevant to your project;

1. CMS limitations, such as the number of collections and fields you are allowed, the data types supported, and how items can related to each other with refs and multi-refs.
2. Collection list limitations, such as the number per page, the number of items in a list, and restrictions around nested lists.
3. Administrative limitations, particularly in the idea of users managing their own data ( e.g. an auction site ).
4. Billing transactions, accounting

Choosing a platform stack

Most likely, when you started this project, you were thinking of a Webflow-only environment. But those limitations above are often too restrictive for more advanced projects, and you'll need to use external services too.

Here are some popular stacks;

1. Webflow-only. Just Webflow, the CMS, ECommerce, Memberships and Logic.
2. Webflow + Memberstack. More popular when you need to display user-specific information such as a dashboard or account history.
3. Webflow + Zapier/Make. Useful when data is feeding in and out of your system, or even between different parts of your system.
4. Webflow + Wized + Xano. Provides a more developer friendly infrastructure on top of a Webflow-hosted site, an (optionally) a stronger and more secure data-storage facility for user-specific data, via Xano.
5. Webflow-designed, but custom-hosted, and an entirely custom-built back-end. This is the most advanced option, but requires programming skill.
6. > Check out Webflow's new DevLink, which is designed for React.

Know your stacks, because each of them adds capability, but also complexity and cost.

Project approach

Here are some tips. May they serve you well.

Nail down all of the details early. Once you choose a stack, make certain your client understands the design limitations of that stack, because changing the stack later can be difficult and costly.

Make sure they understand that feature changes may require a stack change, and that is rather like moving a house to a new foundation.

Don't be afraid to push back on features that add-little-value but-huge-cost. I've saved businesses many many millions by pushing back on useless crap. Clients often don't understand the relationship between features, complexity, and cost, so it's up to you to guide them.  

Before building anything, prototype it.

• Spend zero time on styling- just make the functionality work.
• Focus on the CMS structure for your data, and how that will funnel into the site design.  
• Code any special features you need, like interactive maps
• Build the important pieces, like if you need an ad-placement infrastructure, build that
• Work out who and how all the data will be administered.
• If you are using a heavier stack, like Webflow + Memberstack, or Webflow + Wized + Xano, use that in your proto to work out the mechanics.

Finally, after the client has seen and approved the details of how the site will function, go to town on your designer work, interactions, graphics, video....

You'll find this approach much more enjoyable.