Webflow - Pros and Cons

Recently we decided to update our 0ld, not so special website to something new, interesting and exciting. After quite some research, we decided to go for Webflow as our CMS and website building tool, as it offered tremendous possibilities to individualize our site. You might wonder, have we regretted our choice?

First things first, we are quite content with Webflow. Its infrastructure has never failed us and the page is up and running just fine while looking very good. You can take a look here: View Site

However, as everything in life, Webflow has both pros and cons, I will list everything that I have personally noticed. Let's get started:

Design Pros

When it comes to designing websites nowadays, layouts must adapt and change in many ways. The landscape of devices is extremely diverse, from smartwatches to mobile phones, tablets and 4K monitors, every internet-ready device must be supported.

Making layouts with Webflow

...is extremely fast and easily done. Webflow offers all relevant breakpoints (large, medium, small) directly within its UI, you just need to select which one do design currently, and it adapts the breakpoint per your design.

Changes cascade downwards, which means that every change you do in e.g. the tablet mode also affects the mobile mode as long as you don't change it in mobile view as well. Just like with CSS-breakpoints, actually. Adapting your layouts to various screen sizes has never been easier.

And SEO?

Well, Webflow instantly hints if something with your layout could negatively impact your SEO ranking. This includes missing header tags, too low contrasts etc. this helps you to be as accessible as possible.

Additionally, Webflow is able to directly add meta tags to your webpage as well as add open graph properties and twitter properties so that your sharing card looks amazing.

Design Cons

When starting with Webflow, you'll quickly realize one thing: It's huge. Overwhelmingly huge. Getting started by creating your first project, pages, etc. can be cumbersome and very hard to learn, especially if you have never worked with a website builder and a CMS before.

When it comes to me, I really love coding stuff, including websites. Therefore, the switch to a low-code tool like Webflow was intense at first. But, as with pretty much anything: You get used to it. Soon, I learned to appreciate the ease with which you can design and build with Webflow.

Note that Webflow offers awesome learning videos and resources in its University

The thing with classes...

...that triggered me personally a bit is, that classes have always global scope. When you know it, it's fine. But, well, at first I didn't know. In Vue.js, scoping CSS is easy:

<style scoped lang="scss">
...  
</style>

At first, I thought that all styling classes in Webflow are bound to the page/component that you are currently editing, but they are actually available globally and influencing the style globally.

So whenever you wonder why your header is suddenly pink everywhere, well you might have forgotten to duplicate a class before changing it. Duplicating decouples the class from its parent, which is equivalent to scoped styling.

Deployment Pros

Webflow shines with a blazingly fast CDN that serves all your assets, ensuring high speed loading times anywhere in the world.

Plus, when testing new features and functionalities on your website, Webflow offers a staging area before you deploy it to production. The staging area ensures that you can test your page under real-life conditions and deploy when ready. However, the staging area has certain restrictions based on the workspace plan that you pay. More on the pricing later.

General Cons/Restrictions

Important: This is not really a drawback of Webflow, but rather a restriction that needs to be considered before using this tool.

When choosing to use Webflow for your landing page, you get a great building tool with flexible ways of using on the one hand, on the other hand you get an ecosystem that restricts you to only use its own components. Whenever you decide to switch in the future, you must develop everything from scratch again. Unless you use a workspace plan that is more expensive, those usually have the option for code export.

Pricing

Webflow can be cheap when it's only for one, small landing page with little to no CMS content. However, when you decide to build a huge site with many CMS items and maybe even more than website, it can become expensive.

For example, you build a landing page for your company and want to explain each department of your company, the companies goals, subsidiaries etc. The content itself should be changeable via the CMS, and you want 5 people to work on it. Generally, Webflow offers two different plans, a workspace plan and a site plan. The workspace is the plan for building and designing websites and then staging them. When you are ready to deploy to production, you need a site plan, where you can use your own, custom domain.

The basic site plan that might be suitable for you is CMS, which is priced at $23/month. You might even need the business plan for $39/month, depending on your needs.

However, to use the nice staging area that I described earlier and e.g. code export, you need to purchase at least the core workspace plan, which is priced at $19/month. This plan enables you to use the staging area with all sub-pages.

As you would like to have 5 people working on it, you must pay for 4 additional limited users, that can design and build pages but have no administrator settings. Each seat is priced at $15/month, which results in $60/month for 4 additional limited users.

Totalling to around $102/month for one landing page with dynamic, CMS content and many subpages. But: this site can not be localized, and depending on your business needs, you might want to localize your site into different languages. This starts with $9/month per language (not including the base language), up to three languages are additionally supported then, if you need more you must purchase the pricier plan with $29/month per locale.

But keep in mind that the pricing always depends on your needs and can therefore not be generalized.

Is Webflow worth it?

Short answer: Yes, for landing pages. Both static and interactive, that need to be inviting and good-looking.

Detailed answer:

Webflow offers you many tools and features to build a beautifully looking, well performing and secure website. With their university, you can learn and try out many new things in web development, such as complex animations. Using Webflow can be cumbersome, but after some learning curve, you will be able to quickly build top-notch websites and deploy them within seconds. In our case, which was a simple company website, Webflow was worth it as it helped us build an astonishing looking website and additionally saved time, which we could use for other, important coding tasks.

However, when it comes to complex Web-Apps, I would use Webflow as an extension rather than for the entire app because it would become very pricey pretty fast. Building the web-app itself I would use my preferred tool set Vue.js, Vite and Nest.js. Webflow would be serving as a way to build the landing page and promote the app itself.

Thank you for reading! If you have any comments, feel free to leave them.