Webflow Tips N' Tricks
Creators gravitate to a visual development environment like Webflow from both the design side & the development side, & those backgrounds tend to heavily influence how users use the tool. Do they err toward augmenting the build with custom code? Do they adjust their designs to the accommodate the native limitations of Webflow? I've seen builds that are so stripped down that they lose all usefulness to the user. And I've seen builds that are so complicated that the client loses the ability to easily update the site through visual editor. (These builds likely weren't a good fit for Webflow as a platform from the start.) Heck, I've even made some of these suboptimal builds myself. But over the course of many years of development, I've found a sweet spot that tends to work best for augmenting Webflow, augmenting the platform's cabilities without compromising it's usefulness as an editor.
Webflow Tips N' Tricks is my attempt to document some best-practice solutions to common problems with Webflow development.
This project began with a CMS-driven map component. There are a number of example projects that exist, but most of them were missing key functionality. Anna Sabina's approach, however, was very close to what I wanted: a CMS-driven solution that can launch a pin's info window from the location list. After adding some functionality (responsive map zooming/positioning based on bounding coordinates, map theming, location categorization, & a few default settings related to map controls & scroll behavior) & applying some styling (a sticky solution for mobile viewports so that the map & the locations are together on the screen at all times), it was good to go.
That the project was built on Knockout was a point of emphasis for me, as any user cloning the project would also clone the framework. But I also added thorough documentation so that the solution can be implemented into existing projects or from scratch.
The third project was a simple mobile optimization. Instead of stacking sibling cards, the script uses Slick Slider to turn them into a swipable slider. This reduces scroll time on mobile, making the page more scannable & increasing the visibility of content lower on the page.
As this repository continues to grow, I hope to continue articulating best-practices around Webflow augmentation. And as the no code space matures, to articulate the ways in which it's not a one-size-fits-all solution, & in which situations a coded platform may be a better choice.