You’re probably here because you’re thinking: “should I bother learning this new app?” In our in-depth review, you’ll find out all you need to know to make the decision.

Webflow is a web service for creating and running website which aims to fill in the blank space between the traditional site builders like Wix, classical content management systems like WordPress, and actually coding your website by hand.

The cornerstone principle of the Webflow philosophy is “smart codelessness” – the tool has been specifically created to allow people who want a website to do most of the work without ever touching their site’s source – while still working with clean, well-written code and not being locked into any single publishing platform.

Try Webflow for Free ›

This is good news for the visual types out there, since such approach may empower designers to unleash their imagination directly onto the web, possibly even skipping the graphics suites such as Photoshop or Sketch. Whether this is the only use case of Webflow, and whether this is a strategy that actually works in practice, will be discussed below.

Webflow Site Designer

There are three main components to Webflow’s offer: the code-less, visual web design tool, the content management system (CMS), and the hosting – the first one arguably being the flagship feature of the service. In this section, we’ll take a deeper look at the Webflow Site Designer.

What looks somewhat like a Photoshop window is actually more of a HTML/CSS automation tool, where the user is free to add, position and style elements as they please, while the underlying system automatically generates the markup and all other necessary code. The interface is rather complex and takes some time to get used to, yet it’s undeniably one of the most powerful and versatile real-time website builders in existence today.

Let’s make it clear right from the start: you won’t be able to simply draw a shape in the middle of the canvas: instead of offering a naive way of slapping together a visual of a web page, Webflow keeps it real by acknowledging that there’s always actual code behind each element, and that such code gets exponentially messy if you don’t consider the way HTML and CSS work. In other words, to draw a square in the middle of the page you’ll need to add a new <div> element (a “container” or a “section” in Webflow terms), set its positioning to “fixed” and its top-right-bottom-left positions to 0 – this is real life, kids!

Yes, the Webflow builder panel consists of actual CSS properties, so in order to fully appreciate the power of this tool, one should be familiar with HTML/CSS. However, if you mark the “I don’t write code” option during the sign-up process, Webflow will automate a significant part of the builder for you, for example handling the media breakpoints to ensure responsive behaviour (i.e. generate tablet- and mobile-friendly code for your page on the fly).

Needless to say, it wouldn’t be possible to cram every single CSS feature into the Designer – which is why Webflow simplifies most less-useful or less-frequently used parameters and makes the wording more user-friendly: from providing pre-defined options for most parameters, to introducing toggles that show or hide “advanced” features and more granular control.

It is possible to start from a blank canvas or use any of the pre-made templates, some of which even come with ready-made site structure. There are over 30 free and 100 premium templates in the Webflow library, with the key difference between these two groups being the level of detail as well as included assets like styles and images. The paid themes range from $40 to $80 and are the creations of the Webflow community, i.e. professional designers and developers outside of the company.

For the reasons outlined above, starting from a blank canvas is mostly recommended for those who already possess at least some practical experience with HTML/CSS and are comfortable arranging the building blocks from scratch. If you haven’t coded before and also if you have but want to familiarize yourself with Webflow’s toolkit first, tweaking a pre-made template is highly advisable.

Apart from static content, animations are an essential part of the Webflow design tool, adding an extra layer of interactivity to the resulting websites which can be daunting to achieve and test using more traditional tools. Firstly, you can add transitions and transforms directly to any element using the same right sidebar with element properties – which is a real time-saver as most of such CSS rules are tedious to write by hand and many developers use one or another auto-generation tool in any case.

The real fun stuff starts in the “Interactions” panel, accessible from the tab with the lightning icon at the top of the right sidebar: there you can add animations based on the page’s state or the user’s interactions with a specific element (e.g. hover, click). Essentially it’s a Javascript automation tool, which can potentially replace 80-90% of your ordinary JS file for a standard website – menu animations, element fly-in-outs, hover states, and what not.

Take Webflow for a Spin ›

The remaining sidebar tabs contain the Navigator (a HTML tree) and the Style Manager (CSS hierarchy) which are useful as overview tools but add less value compared with the panels discussed above.

Overall, the Webflow team have managed to create a very comprehensive coding automation toolkit which works as a semi-visual editor; the degree to which it simplifies the process of creating attractive web pages with clean code will be appreciated by anyone who has ever tried writing their website by hand.

Content Management System

Apart from on-site editing, i.e. the possibility to change any text or media right on the page you’re designing, Webflow CMS allows manually defining custom content types (blog posts, projects, team members, etc) with fully customizable fields, which can greatly improve the life of those who manage larger web projects with complex structures.

This comes in the form of CMS Collections, accessible from the tab with a stack icon on the left side of the main editor view. After creating a collection, which is essentially a specific content type, you can set the fields and add items – to be used both as individual pages or as lists / grids on existing static pages; for example, you can add a “team members” collection to create a page showing your company’s people’s photos, names, descriptions, social links, etc.

Apart from the CMS back-end, there’s also the Webflow Editor, which allows adding new content of the existing type on a published website – useful both to the creators of the website and their collaborators, as well as to their clients. What this means is that you get a fully functional website with both editable static pages and dynamic content like blog posts, portfolio projects, etc, without the need to install any plugins.

The fact that it offers multiple content types, of which blog posts are just one option, means that Webflow eats WordPress and other open-source systems like Drupal for breakfast when it comes to CMS flexibility. The flip side – it will take some time to get used to; however, the Webflow University (which we’ll discuss in detail below) can ensure the learning curve is as steep as possible.

One might get a feeling that Webflow strives to make the content management part as seamless as possible, in order not to steal the spotlight from the Site Designer – which is not a bad thing, considering its primary value proposition. In any case, Webflow’s CMS is still much more flexible and diverse than that of WordPress core or popular site builders like Wix.

Deployment and Hosting

Publishing your creation to a live URL is a breeze in Webflow: clicking the corresponding button on top of the Designer screen will call a drop-down of available deployment options, which include a subdomain of the webflow.com domain (typically recommended for testing purposes) and a custom domain. With the next click you can publish to any or both of these locations without having to worry about the details – everything else is processed in the background, automatically.

Webflow’s hosting services follow its “start building for free, add hosting to go live” principle: you can design a prototype (up to 2 static pages) in their staging environment, i.e. on a webflow.com subdomain, and then connect your own domain name (not included) by upgrading to one of Webflow’s hosting plans. The latter range from the basic, $12 per month* option with a 25k monthly visit limit, to the $36 per month* business version with more features and a 1m monthly visit limit (* with annual billing).

In addition to being an integrated solution, there are several advantages to Webflow Hosting that can really make a difference for your website’s performance and your webmaster workflow:

  • Since it is based on the distributed infrastructures on some of the largest cloud providers in the world (Amazon Cloudfront and Fastly), it can scale seamlessly with your traffic demands, removing the need to manually upgrade your hosting server
  • A built-in content delivery network (CDN) at no additional cost ensures that your website gets served from the node that is geographically close to your visitors, no matter where they are located
  • The advanced distributed infrastructure means fast loading times and close to 100% uptime for your website, regardless of traffic spikes or even malicious attacks
  • A built-in SSL (secure sockets layer) certificate at no additional cost ensures that your website complies with the modern security standards out of the box – no setup or prolongation required

Considering the above factors, Webflow Hosting is a scalable, ready-to-use hosting with a built-in CDN, priced on par with the best self-managed solutions like Digital Ocean as well as traditional website builders. Its value-for-money is a great complement to the other capabilities of this online suite, making it a full-cycle solution for web creators and potentially letting you save hundreds of dollars per year on CDN, SSL and other extras which otherwise need to be purchased separately.

Webflow eCommerce

The team behind Webflow have recently announced the upcoming eCommerce module, which is expected to bring full online shopping capabilities to the toolkit. While the beta version is still in development, the announced features include product and inventory management, custom card, checkout, and other endpoints, full control over customer emails, as well as self-hosted checkout.

The main competitive proposition pitched by Webflow is the possibility to fully customize your online store’s every detail, from product grids and payment pages to how the purchase notifications look like. This can be contrasted to the current state of affairs in the ecommerce website building software like Shopify, Wix, or evern WooCommerce + WordPress, where one needs to exert considerable effort to achieve such granular control.

The exact release date for Webflow eCommerce beta hasn’t been announced yet, but we’ll keep you informed about all developments and update this article as things progress.

Webflow Pricing

With regards to paid plans, it is important to understand that Webflow has two different systems of premium tiers: one for your overall account and one for each individual project (i.e. websites you build).

When you begin working with Webflow, the latter will probably be more important and topical, so we’ll start with project-level pricing, which is basically cloud hosting for each of your websites: there’s a limited Free plan that allows you to publish up to 2 pages on a webflow.io subdomain as well as several paid plans for deploying to your own custom domain.

The Basic plan will cost you $12 per month (annual billing), unlocking automatic SSL, CDN, as well as custom domain deployment which is easy to set up and even easier to use. The CMS plan, at $16 per month (billed annually) will allow you to deploy not only static pages but also items created by the content management system (blog posts, projects, etc). The Business plan, priced at $36/mo with yearly billing, is mostly a scaled-up version of the previous plan, suitable for larger websites with significant traffic.

Then there are account plans, which set the maximum allowed number of active projects and other professional parameters: while the Free account plan allows you to work on 2 websites and use free staging, the Lite plan (at $16 per month with annual billing) includes 10 projects and code export tools, letting you use the Webflow-generated code on any other platform of your choice. The Pro plan ($35 per month, billed annually) adds white labelling and site password protection options – suitable for those who regularly work on full-fledged projects for third-party clients.

When you visit Webflow’s Pricing page, it can get a bit confusing because of the way they group plans based on whether you need one site, many sites, or work as part of a team – essentially, the “I just need one site” option will offer you pure hosting (i.e. the per-project plans we discussed earlier) while the other two will collectively offer a Lite plan for $16 and a Pro/Team plan for $35, as well as a Custom plan for large teams. This still adds up to just two specific account-level plans described above, apart from the free and the custom version.

Any account plan can be combined with any hosting plan, including free ones, e.g. you can be on a Free account plan and only pay for deploying a particular project on your custom domain – or use a paid account plan and free hosting for rapid prototyping.

You can choose between monthly and annual billing cycles for all premium plans, the latter coming at a 20% discount, which can add up to significant savings over time, especially for the more advanced plans.

Pros and Cons of Webflow

To recap, let’s list the advantages and the not-so-strong sides of Webflow’s user offer, as compared to other similar website builders and popular content management systems (we’ll not include any standard features like mobile-friendliness as well as those items which are common among most competitors, like on-page content editing):

  • Pro-grade real-time web design tool with built-in mobile friendliness that seamlessly generates clean, exportable code as you create
  • Create your design by editing one of dozens of free and premium templates, working with a wireframe or starting from blank canvas
  • Advanced CSS and JS managers allowing for both granular control over styles and animations as well as easy site-wide management
  • Fast and easy two-click deployment to a staging environment and/or your custom domain right from the Webflow Designer
  • An integrated CMS with a flexible custom content type constructor which can be used to create any type of static or dynamic content, from pages and blog posts to projects, reviews, team members, etc
  • Advanced distributed hosting powered by the big names such as Amazon Cloudfront ensures maximum page load speed and minimum downtime for your visitors
  • Integrated content delivery network (CDN) at no additional cost ensures both speed and security for your website as the content gets served from the optimal geographic locations and benefits from the added security of the CDN layer
  • Built-in SSL certificate at no additional cost (usual expenses $50-$100 per year) to ensure compliance with current web safety standards out of the box
  • A rather steep learning curve expected from those who have never dealt with web development previously
  • With the Webflow’s e-commerce kit still in beta, online shop capabilities require additional polish and minor improvements to be called an outstanding feature

Based on the features and product offering, read below for our verdict on Webflow and recommendations to prospective users.

Webflow vs WordPress

Before comparing Webflow with the most popular content management system in the world, we first need to make an important distinction: there are two separate “types” of WordPress available: the free, open-source, self-hosted, community-driven wordpress.org, and the paid version on wordpress.com with integrated hosting and dedicated support. While they both use pretty much the same codebase, there are significant differences in most other areas. For the purposes of this review, we will consider wordpress.org since it is the (by far) more popular WP flavour.

Despite all the differences, at their core both Webflow and WordPress have been created for making websites – however, each approaches this task with a different philosophy. While they both feature a content management system and a rendering engine (without which it is impossible to create a website at all), WordPress goes the way of modularity, while Webflow aims at making the entire experience as integrated and seamless and possible.

What this means is that WordPress is famous for offering thousands of free and premium plugins as well as visual templates (themes), making it almost infinitely flexible and customizable. The flip side of this abundance, though, is the problem of choice as well as a high proportion of poorly made and insecure extensions.

Webflow, on the other hand, is not as versatile, but can help achieve almost any conceivable setup and feature by providing built-in capabilities. Some of them are even beyond what wordpress.org can offer, e.g. integrated hosting with custom domains and two-click deployment, built-in SSL certificates for added security, or fast CDN. Compared to a WordPress + third party hosting bundle, this is a much smoother experience.

Where Webflow really shines, though, is the visual builder (Webflow Designer) – there’s little point to even trying to describe how vastly superior it is to any WP content builder plugin, let alone the core WordPress capabilities.

Another important advantage of Webflow is support and education: being run by a dedicated company rather than a loose community of volunteers, it can afford to offer a customer support guarantee WordPress will never be able to provide, by definition. Webflow’s knowledge base is consistent and easy to digest, as opposed to a rather patchy one in case of wordpress.org.

Overall, Webflow looks like a more well-rounded solution for anyone who is serious about creating websites and values smooth workflows as well as seamless experiences. The all-in-one structure lets you forget about the unnecessary details and focus on what really matters – designing and developing beautiful, solid web pages.

Should I Use Webflow?

After analyzing its various features, one can conclude that Webflow strives to be an advanced integrated toolkit for web creators who value both flexibility and efficiency. The combined power of its Designer, Editor/CMS, Hosting, and (now also) eCommerce offers, is on par with the best custom web development setups, while requiring much less upfront costs and setup time as well as ensuring constant support and issue resolution.

Try Webflow for Free ›

In a product landscape dominated by simplistic site builders and clunky open-source CMS’es, Webflow is a hybrid solution especially well-suited for those who are prepared to spend a certain amount of time getting used to its powerful features for the sake of a unique mix of capability and automation.

Your Opinion?

Thank you for taking your time to read our analysis of Webflow! Have you found this review helpful? Got something to add or disagree with certain points? Let’s discuss in the comment section below:

Pour your heart out

This site uses Akismet to reduce spam. Learn how your comment data is processed.

19 comments

the best prototyping tool I’ve found so far that actually produces usable code as well

5/5

I’m very fluent in HTML and CSS. Can I use Web Flow as an alternative to tools like Sketch or Invision Studio when I’m doing design concepting (for eventual presentation to clients)? I like the fact that it seems to also handle the code behind the scenes, which would save me time (vs doing static designs and then having to turn around and code them from scratch).

Just curious how the layout features compare to other tools (like Sketch, Adobe XD, Invision Studio, etc.)

Thx!

It is a good question to consider, we will add a separate section comparing Webflow with design tools rather than other CMS/builders in a short while. It will take some time to draw up an in-depth comparison, but from the top of my head, the closest of the three you’ve mentioned is probably inVision Studio, the others are arguably more design tools that anything else and rely on “drawing” rather than creating with CSS. However, Webflow is still more versatile than just a prototyping tool – it’s also a CMS, a hosting, and (now also) an e-commerce platform.

thank you for teh post it is very very niice kudos

any idea when theyre going to release the ecommerce platform as well?

It is still in development, so the specific date hasn’t been revealed yet, but we are keeping track and will update the article as soon as it becomes known!

whoa complex stuff

4/5

teh videos in the knowledgebase are a life saver, without them it is quite hard to grasp everything by yourself imo

Thank you for your helpful review, great! I’m a complete beginner. Can I just start with a template and see where it takes me? When I adjust the template can I damage the code and thus slow down or otherwise downgrade the site? And how is the customer service in your opinion? Thanks!

5/5

In fact, it is recommended to start with a template rather than a blank file if you’re a beginner – this way the learning curve will be much smoother. If you adjust the elements using the visual editor, the code will adjust itself automatically (that’s the beauty of it). Regarding customer support – we are going to add an entire section on it soon, yet the overall impression is quite positive.

Are there any coupons or promo cods for Webflow? Most other website builders (and web services in general) usually offer some sort of discount..

4/5

so far so good

5/5

web juggernaut

so did I understand correctly: the Webflow product is more suitable to those who know how to code and just want to automate most of the things?

Hello web juggernaut! Well to some extent yes, Webflow might not be the most well-suited option for complete beginners. But its as graphic as it gets when you use the visual editor, helps learning the css properties will only do you good in the long term

you can also use it if you dont know howto code, like me :)

I can see you’ve been revising the review and adding new sections, nice work

Not sure you can compare Webflow with the Wixes and Weeblys of this world. It produces beautiful code, extremely fast, with great mobile control and flexible production. Unlike the other commentator here, I can’t code, but I have over 90 live sites made with Webflow and I love it.
Yes, it doesn’t have the marketing of the drag and drop builders; but, as you say, it is great for freelancers and agencies – allowing sites to be exported and worked on after initial production.
A huge step above the other builders and fantastic support. If you want something better than a drag and drop, Webflow is a brilliant start.

totally agree comparing Webflow to Weebly is like comparing a toy car to a real one that you can drive around

5/5

In general I found the review to be a good effort.

While it is true that elements in Webflow are dragged from panels and placed into the design page, that’s where the similarity ends. In Webflow you must enough about html to know where that element can, or can’t, be dropped and how where it’s dropped will affect it and other elements. You can’t just drag things around until they look good.

Bottom line, in my opinion (and being able to write code), Webflow is not the tool to choose for casual users, especially those just wanting their own site. While the user of Webflow doesn’t need a comprehensive understanding of html and css, for any chance at success, they’ll have to spend quite a few hours learning at least the concepts and the names of the elements (tags) used in html in order to have a successful design.