Looking Outside of WordPress — Our Webflow Experience
The good, bad and downright weird parts of Webflow: A WordPress developer’s point of view.
At The Taproot Agency, we pride ourselves in being experts at WordPress, using it as our go-to CMS and making it do whatever we need. So when the opportunity to build a website from scratch using Webflow came along, we hesitated.
I had originally dismissed Webflow as a newer, glossier version of Dreamweaver. No all-in-one web development application is any good, right? Shortcuts are taken, the code is sloppy and the finished work is flawed, all in the service of dumbing the experience down for the non-developer.
Fortunately, my assumptions were proved wrong. From building layouts and managing content directly on-page to creating interactions and animations visually, Webflow is a powerfully expansive tool that exceeded my expectations.
But the opposite is fair to say as well. While Webflow excels in all things visual, there’s plenty pragmatic functionality left to be desired. For simple designs with no complex logic or integrations, Webflow will easily hit the mark. Our project though did require us to dig a little deeper for both the design and development needs.
Learning Curve
There was definitely an initial learning curve that had to be overcome. One of the hardest things, looking back at it now, was actually getting used to the Style panel within the Designer and remembering where each option was located. It’s a well-designed interface, but for any newcomer, it can be a lot to take in at first.
Another initial struggle was changing up my workflow of having full-reign over my code to having to build visually. Yes, that’s the whole point of Webflow, but when you’ve been doing something one way for many years, it’s tough to retrain the brain.
Then, specifically, I had to get used to combo classes, symbols and working with dynamic content. Thankfully, Webflow has incredible tutorial training courses that will teach you literally everything you need to know.
Side note: Never have I enjoyed tutorial videos more than the quality productions created by the Webflow team. They pair a perfect blend of instruction, examples and humor to create a wonderful and simple learning experience.
Between the instructions from the tutorials and the natural knowledge gained from jumping into a project, I was kicking on all cylinders by the time I made it halfway through the markup of the homepage. So much so that I even deleted most of what I had worked on to rebuild it in a cleaner and more standardized manner after improving my workflow.
Framework
While basic page setup can be a breeze in Webflow, I was surprised that there isn’t an easy way to configure a responsive framework. Used to working in Bootstrap, we rely on the columning for layout consistency and natural responsive breakpoints. Yes, Webflow has defined breakpoints, and it’s easy to switch between views, but the only thing that adjusts is the browser width. You have to manually adjust your layout elements for each breakpoint …for each page. This is both tedious and time consuming.
To bridge the gap, I created my own style guide page that included column classes mimicking the widths of Bootstrap’s columns. This allowed me to easily define consistent widths for all page elements. But this was only good for the desktop view as recreating all of Bootstrap’s responsive classes would have taken too long and would have been too much of a hassle with Webflow’s additive combo classing system.
So while Webflow is fast and efficient at getting pages setup, if you want to build a properly responsive site for a complex design, it can be done, but it isn’t easy.
CMS Collections
One of my favorite parts of Webflow is how they handle their Collections, or the equivalent of a custom post type in WordPress. The ease of working within a Collection, how you can quickly jump between posts or add custom fields, is a great user experience. Then dropping in a Collection List onto your page, setting its parameters and watching it populate instantly, is a beautiful time saver.
Custom Code
Webflow does gives you custom code blocks, both globally and per-page, to do with as you desire. In theory, this gives you complete freedom, but it also creates a challenge because it’s completely detached from the Webflow Designer and will not parse custom code in that view.
While I understand why Webflow does this, it makes things inconvenient as the only way to see your code in action is to push it to a published site. As a result, troubleshooting becomes a bit more laborious and can potentially make your client’s editing experience different from the public view.
Writing custom code within Webflow’s editor, saving changes, publishing to a staging site, waiting for the publishing to finish and then reloading the page grew old pretty quickly, so I began to rethink the entire workflow.
The solution?
Spin up a completely separate server to house custom styles and scripts. This allowed me and my team to write our code in our preferred text editor, commit those edits to a Git repo and create an automatic deployment that was near-instant.
Doing this forced Webflow into our regular workflow (or some version of it, at least), sped up our process and gave us a redundant backup. I only wished I would have established this sooner.
While we did write a healthy chunk of vanilla javascript to fill in the gaps, we really did try to keep everything native within the Webflow Designer.
Animations/Triggers
That brings us to the Interactions panel within the Designer. This is probably, single-handedly, the coolest and most powerful tool within Webflow. Forget TweenMax or any other animation engine. Webflow does it all in-house.
There is an additional ramped up learning curve to the animations, and the UI can be convoluted, but, for the most part, once you get the hang of it, it’s basic repetition. That said, it is painfully easy to break animations when you make UI changes, so I’d recommend that you wait to do your most complex animations just before launch and after your other edits are in place.
Whether you want to animate on page load, page scroll, touch event or any number of mouse effects, it’s only a matter of setting up a trigger and configuring the elements you want to give motion. You can set an initial state (if an element needs to start off canvas or at zero opacity, for example) that doesn’t affect the element within the Designer, which is great for content editing purposes. That way you don’t have to alter your animation just to make a simple content change and then reconfigure it. You can also preview animations right away from the Interactions panel, speeding up your setup.
Finishing Up
There were times during the website development that I swore I would never use Webflow again. I became frustrated when things didn’t work like they seemingly should have, or when I had to create a workaround to fix something that should have functioned correctly out of the box.
But now that the site is finished, and I’ve found Webflow’s strengths, and know what I need to do to get around its weaknesses, I’ll definitely look for more opportunities to use it again in the future.
The fact that the Webflow team is regularly pushing out new features and enhancements to constantly improve their product and keep it relevant with the latest standards is all the more proof that it’s a great application that is more than just a gussied up development tool. It’s the real deal.
Lastly, here are a few things I would love to see available within Webflow in the future:
- before/after psuedo elements (oh how I missed those)
- a larger responsive breakpoint (ie. 1200px like Bootstrap)
- nested symbols
- symbol overrides
- dynamic custom data attributes
- a global Asset Manager (currently only available in the Designer, not CMS)
- CSS
calc()function - and lastly, for heaven’s sake, give us the option to add the humble but ever important
<hr>element within a CMS text block. Never underestimate the power of a good divider.
Check out the new realthread.com to see our Webflow work in action. Real Thread is a custom shirt printer based in Orlando, FL that specializes in super soft, water-based screen printing.
Taylor Perrin is a Senior Designer + Developer for The Taproot Agency, Tallahassee, FL.
