Greetings. I’m not exactly sure what to search for, so thought I’d ask here.
I’m a web designer/developer and I typically build sites with JAMStack (headless CMS, static site generators like Gatsby or Middleman) or Statamic (a flat-file monolithic cms).
For marketing sites, Webflow looks like an amazing solution for product pages: they’re highly custom, presentation quality and polish is paramount, and otherwise present complex data models. I’m typically doing these by hand or modular content (which Statamic excels at).
My question is this: can I design pages in Webflow and automatically integrate them with other platforms, like a static site? Even exporting pages manually would work… though something more automated would be better.
I understand that Webflow CMS has many capabilities for blogging, etc. I’m evaluating those separately from this discussion, as we have other existing publishing systems in play. I’m interested in understanding how we might use Webflow strictly for those custom pages, in this discussion.
Good questions. I started looking at webflow for the same reasons and asked myself very similar questions.
You can export a webflow site, drop it on a server, and be up and running, Two caveats: Forms will need a third part processor or script. Collections are not exported. Just the template page. You can export items via CSV and wire it into your backend / modify templates as you see fit.
Webflow CSS is clean and easy to work with. Works just fine as a base for a redo or implementation with Statamic or Gatsby. Just convert the pages you want to use as templates to a template. That part is up to you. I was just working on a Ghost template created in Webflow for fun. A Webflow “base” is only going to be as manageable as your structure and class naming is. Once I push a site that way, I am finding that I just write the CSS by hand while flushing out my ideas in the designer. Lots of BIG companies are doing this with Webflow as well.
I personally try to stay away from heavy interactions in this type of a workflow and add them in manually later.
When you have specific instances where you need help, feel free to ping me here. Cheers.
@webdev Appreciate the insights. I don’t need forms, we use Hubspot. I’m used to doing advanced styling by hand, and I’m mostly looking for ways to 1.) speed that up, letting me put more polish in, faster; 2.) democratize the process a bit, letting others add copy.
Why would you say you avoid designing heavy interactions in this scenario? Are you finding it too complex to build on outside Webflow afterward, or are you finding that building complex interactions is difficult with Webflow?
I target mobile first mostly, interactions are not that important to the kind of stuff I build. They rarely help the user (visitor) solve a problem. If I want cool visuals, or showcasing complex features, I think video is the way to do that for the most part. Video is shareable, portable, and potentially viral. I focus on speed and conversion. If interactions solve a problem for the user, I am all in. For me the use of web animations today is like how designers flipped out for Flash when it was new. Everybody wanted it. Nobody thought about why. But look, it’s spinning!
You should add some interactions to a site; and then look at the exported source, so you understand what you may need to support. The JS code is clean, but element bindings (not class) are hard to manage on exported sites. You need to reference back to that file with the data-w-id value added to the element. On a complex multi-element set of animations it can become confusing for some to follow. If you don’t change the data target, or class names, you can just replace the JS in your project to update animations.
I also end up refactoring the CSS sometimes, since I prefer targeting child elements of ID’s instead of maintaining lots of classes. Managing CSS with Sass is more maintainable for me and the ratio of content to code is higher. When I build complex dynamic sites for clients, I usually don’t need to touch the structure for years. Just adds, moves, and small changes. Client drives the content from my backend, servers / apps render the data. I am starting to put marketing sites just straight on Webflow. No need for much else most of the time, except for some client side JS.
Webflow rocks. It is a great tool in the kit. Hosting is awesome and very fast. Responsive image generation is a huge time saver. Fast prototyping data structures is a dream. There is really a lot to like, and it keeps getting better all the time.
One other thing to add. The Webflow community just plain rocks. Come join us.
Eyes are tired, brain is fried. Time to get some rest. Peace.
Appreciate the detailed response Webdev, looks like a really neat platform.
The key for me is finding the right ways to integrate it with existing tools, or using it at the right project stage. Only way to really find that out is use it, which hopefully I’ll get to do.
No problem. Webflow has lots of great info and video about the product in the University. That is a good place to get started. Let us know if you need help when you are ready!