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.

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.

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 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 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.

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, the CMS part of Webflow 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 later) 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

Finally, Webflow offers paid hosting services to its users, under the “start building for free, add hosting to go live” principle: you can design a prototype (limited to 2 static pages) in their staging environment, i.e. on a webflow.io subdomain, and then connect your own domain name (not included) and transfer the entire thing to one of Webflow’s hosting plans. The latter range from the basic, $12 per month* option with 25k monthly visit limit, to the $36 per month* business version with more features and a 1m monthly visit limit (* with annual billing). Apart from the setup described above, there are also specialized offers for those who create websites for a living (more on that – in the next section), which include a set monthly fee for the additional features as well as the hosting fees.

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
+ Auto-generated code with easy export
+ Granular control over styles and animations
+ Custom content type constructor

– Comparatively steep pricing
– Little focus on content
– No e-commerce capabilities
– Rudimental marketing tools

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

Should I Use Webflow?

The particular set of features and their prioritization make the service’s focus quite clear: freelance designers, web agencies and organizations with strong visual focus will find it a really handy tool to streamline their activities. The last point is an important one: it should be noted that Webflow does not do anything that other, existing tools can’t already achieve: teams have been designing with Photoshop and creating eye-candy websites using traditional development toolkits for ages. Webflow can compete in cases when the traditional designer-coder collaboration isn’t enough for the designers, and they wish to take more control over the entire process, leaving the developers with auto-generated static code. This isn’t to say that it’s not a viable working mode – it’s just not for everyone.

As for the “everyone”, i.e. people and organizations wishing to create a functional website for themselves, Webflow does little to stand out among the competition: by focusing its efforts on visuals over functionality, this site builder lacks the feature variety that allows webmasters to actually do stuff after going live, like promoting their websites, selling products online, or communicating with their audiences. In addition to that, Webflow’s hosting plans are priced significantly higher than those of similar site builder services, with the cheapest option being almost 2x more expensive than such competitors as Weebly (which, by the way, provides a custom domain name for free with its Starter plan).

To sum up, one cannot deny that Webflow does a good job of being a highly capable drag-and-drop web design tool, yet its feature set and pricing make it useful for professional web designers with an allergy on code, as well as web agencies with a very specific philosophy (“design first, everything else second”). All others can safely choose alternative services like Weebly for a simpler, more expandable and functional solution.

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

4 comments

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?

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.

In general I found the review to be a good effort. However, toward the end it slipped a bit with the paragraph that started with “To sum up” when the article used the term “drag-and-drop”, which Webflow is not if the intention is to compare it to so-called drag-and-drop site builders. In other words, it’s not a valid comparison.

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.