Webflow Review 2024: Complete Guide For Web Developers and Businesses

After more than 10 years of experience working with Webflow, we found that Webflow is a top-notch website builder—an excellent tool for encouraging novice users to learn HTML, CSS, and even JS. And for web developers it offers fully customizable features, making it easy to advance Webflow site functionalities.

There’s no surefire way to predict the tech future, but we can confidently say that Webflow is taking the world by storm.

In this Webflow review, we’ll go over the pros and cons, and have an in-depth look at why and how this website builder enables users to design and develop websites.

Reddit Highlights

• “If it’s good for the dev, it’s good for the client. The relationship is a factor to consider alongside the end product.”
• “Webflow is definitely challenging a lot of old school guys and I think that it’s a good thing.”
• “Using Webflow also prevents clients from installing a bunch of plugins, which is usually where the problems come from with updates.”

What is Webflow?

Webflow is a “low-code” visual development platform that empowers users to intuitively build, test, and launch completely custom websites.

In the realm of Webflow development, proficiency in basic coding languages—HTML, CSS and JavaScript—is a necessity. But more languages crop up in addition to these when working with other website builders (such as WordPress).

As described by the Webflow team, "Webflow is a visual way to build the web”.

In other words, the code writes itself as you build everything visually.

Let’s start with an example.

Picture yourself as a composer working on a new musical piece. As you’re playing an instrument, you are simultaneously jotting down musical notes—essentially, creating the composition.

This explains the dual nature of work—in the Webflow case, there's the immediate act of creating the visual elements, followed by the act of writing the actual script to ensure ease of use.

It’s true that a new generation of no-code website builders is taking the digital world by storm.

As one of the customers said, “It is a crazy good website builder”.

Known as a “no-code tool”, Webflow, though, runs on basic code principles. This ensures accessibility for users with limited experience. But also positions this tool as an ideal choice for professional designers and web developers.

Also, businesses that require larger, complex websites with more advanced version control like GIT, intricate documentation, and change-tracking, should hire Webflow developers.

Because scaling a site with quality in mind can only be achieved if crucial steps to building a site from the ground are defined properly (right from the start).

What is Webflow Used for?

With Webflow, users can build professional-looking websites using the power of a drag-and-drop visual design interface.

This website builder offers a versatile toolkit for creating a range of online experiences. It provides the flexibility needed for diverse projects since it uses industry-standard development principles.

From sleek one-page portfolios to impactful SaaS and marketing websites, Webflow does it all.

What Programming Language is Webflow?

Webflow is not a programming language, but it does support custom code.

Rather, it would be better to ask: What coding languages can we use inside Webflow? We can use HTML, CSS, and JavaScript programming languages for web development.

So, Webflow developers excel in developing and maintaining Webflow websites using low-code knowledge. To elevate a design system that evolves businesses, they test different design and development variations to guarantee optimal configuration for lead generation and sales.

Who Is Webflow For?

Webflow is for individuals and their personal needs, as well as for solopreneurs, entrepreneurs, agencies, brands, startups and their business needs.

In other words, Webflow is for those who want to build a completely custom website by themselves without coding knowledge. And for those who want to invest in a robust website developed by Webflow experts who make use of low-coding knowledge.

The first group is not interested in (personal and business) growth, while the second group wants to maintain their real web and business performance.

The following questions arise now.

Is Webflow Good for Beginners?

Webflow is an ideal website development tool for beginners, but deploying its capabilities requires a steep learning curve. That’s when Webflow University can help.

Do Professionals Use Webflow?

Besides being the best drag-and-drop builder, Webflow is a powerful visual code editor, offering extensive customization options for web developers.

However, this flexibility requires a profound grasp of web design and development principles.

What Types of Websites Can You Build with Webflow?

Whether you aim to purchase products or services online, build personal brands, present your work (portfolio), or scale your business through a robust online presence, Webflow stands by your side.

Here is an overview of the website types that you can create.

Webflow is great for portfolio websites since it offers templates and features to simplify the process and help you attract clients.

Venture capital (VCs), startups, software as a service (SaaS) companies, marketing agencies, and businesses with different requirements will all benefit from it. Webflow projects are great for businesses that want to grow awareness of their focus product, boost the number of linking root domains, and drive traffic.

This strategic approach can lead to thousands of new sales opportunities, ultimately resulting in a 5-10x (al least) return on investment.

On the other hand, Webflow is not the best for e-commerce websites. It allows your to accept only two credit card payments using Stripe and PayPal, so it doesn’t handle any means of electronic payments. And this can directly affect your conversion rates.

If you want to take payments in physical stores, it's worth noting that Webflow lacks an integrated POS kit, including card readers or receipt printers.

Additionally, there is no functionality to synchronize your online and offline sales data within the platform. In contrast, shopping online is more convenient and time-saving than visiting a physical location.

Webflow Features & Capabilities

From templates and a variety of form elements to flexible layout systems, animations, and integration with other platforms, Webflow helps you have the website you’ve always wanted.

Let’s uncover its features.

The Webflow Designer

With the Webflow Designer, you can manipulate HTML content, define CSS properties, and create interactions—all without coding knowledge.

The code writes itself as you build everything visually, which means adding ‘design’ to the website HTML structure through the Style sidebar.

Instead of writing out HTML, you can find and add your content and your structure directly. Instead of writing  CSS for style and layout, you control those properties in the Style panel. And instead of managing complex JavaScript, things like 3D interactions, animations, you control all of this visually.
‍Webflow University

After you build a website, this feature generates clean, semantic, web-ready code that web browsers can display easily. It is possible to export that code and hand it off to a developer or you can publish your domain in one click.

For example, you can add styles in the Breakpoint settings that will apply on larger screens.

However, you have only three options when it comes to the screen size:

• 1920×1080
• 1440×900
• 1280×720

In Webflow, for example, there is no option to apply your design to 1366x768 screens. And that’s the second most common screen resolution, according to StatCounter.

But if you add a responsive breakpoint tag (e.g., the one you want to adapt in a certain way), you shouldn’t have any issues.

That's why we like responsive design and the use of custom code to define breakpoints.
‍Stefan Savanovic, Founder of Nube

Here’s what a responsive breakpoint tag developed by our Webflow professionals looks like in code:

So, when writing custom code, you can easily apply design to screens suitable for Tablet, Mobile Landscape, Mobile, etc.

Furthermore, you can set spacing (e.g., breathing room outside - margin or inside - padding) inside and outside each element in the Style panel.

Here's how it appears on our homepage (padding-top: 12.5rem and padding-bottom: 20rem).

Remember that the Webflow Designer looks like Adobe Photoshop, so it can be intimidating for those who aren't familiar with it.

Webflow Animations

With a high degree of control over the actual code, Webflow makes it easy to develop compelling CSS animations and JavaScript interactions.

The animation workflow is quite intuitive for users who don’t know how to code. But from a web developer's standpoint, it makes more sense to define Webflow animations through a style sheet language (CSS).

Let me elaborate on three cases.

1. For simple animations: Webflow experts prefer CSS animations because they are more intuitive for the web. These animations are written in custom code, and clients don't need to make any adjustments afterward. In simpler terms, there is no need to modify these animations frequently.

1. For complex animations: When web developers want to integrate some intricate animations, they use a more complex animation library, such as GSAP.

1. If clients want to build and manipulate the animation afterward, then they use the Webflow animation feature. It includes around 20 built-in triggers for elements, offering effects like slide, flip, grow, shrink, and more. And remember, you don’t have to be a coding expert to add these dynamic effects, you just have to choose the right option.

It's been a while since I've used that panel. When you know the functionality of CSS, GSAP, or a similar advanced library, then the Webflow animation feature is no longer an option. But it’s indeed a useful, simple, and intuitive solution when you don't know how to code.
‍Stefan Savanovic, Founder of Nube

The bottom line is that individuals without coding expertise can build a website with dynamic interactivity with Webflow's animation feature.

Basically, you do not need extensive Javascript expertise to create animations. It’s like making a perfect cake without even knowing a recipe.

You can set up animations to activate only on specific devices (in case you might want an animation on desktop but not on mobile).

This allows you to elevate your website's user experience, showcasing your products or services in a more captivating manner.

The Webflow CMS

Webflow’s content management system (CMS) lets designers, web developers, editors, and content producers to add and edit content right on the live web pages.

And when you're ready, you can just click publish.

On the flip side, the Webflow editor (or Webflow CMS) enables anyone to create or update the website’s content—from images to colors, text to videos and numbers—across the site without the need to navigate through the Webflow Designer.

The website admin can invite teammates or clients so they can edit and add new content anytime.

It looks like this:

You just have to add your first and last name, EMAIL as well as your password.

In case you need assistance, you can go to the Help & Support and find the General (FAQ) section to become more knowledgeable.

Therefore, dynamic changes, such as blogging, adding additional elements, team members, etc., can happen only through a database called the Collections.

A collection serves as a place for setting up specific information. For instance, blog posts, categories, projects, clients events, FAQs, or other similar content.

Subsequently, editors can effortlessly complete the details and add content to the website. Here is what the "Case Studies" collection looks like from the Editor.

The Webflow’s CMS Structure

Items are organized within a collection. And fields are grouped within the items. The collection thus serves as the primary container for the content.

For example, if we have a collection of Webflow blog posts, each blog post is an item. And each item, or blog post, has fields of content.

Collection Lists vs Collection Pages

Here are two ways to use your collection in a project:

• Use a collection list to incorporate collection content in various sections of your design
• Use a collection page; design a single collection page, and the same layout will be applied to all your other collection items

Collection pages are automatically generated for each collection item.

Collection pages will only be generated as actual pages when a design is added to the respective page. In a sense, when you create a CMS collection, the "template" page will be automatically added in Weblow.

However, these pages are only generated and added to your sitemap when design is applied to your template.

SEO Tools and Optimization

Webflow is an excellent visual canvas for SEO (search engine optimization). It lets you excel at many SEO tasks (e.g., everything you want to add, edit or manage) without coding.

For example:

• schema markups (through Custom Code)
• page titles
• alt tags
• URLs
• meta descriptions
• 301 redirects
• hreflangs
• canonical tags

So—Yes, SEO and Webflow work well together.

For example, you can enhance search engine visibility with Webflow by adding schema markup—a special code that improves how content appears in search engines—for better SEO results.

But that's not all.

Automate SEO tasks by generating On-SERP factors (meta titles and descriptions) using CMS collections fields.

Nonetheless, it’s still important to include either your main keyword or other relevant keywords in the title.

This goes beyond utilizing exact-match keywords; it refers more to including queries that are relevant to the page’s content and target user intent efficiently. SemRush Team

Next, take control of indexing, manage URL migrations, and improve accessibility with Webflow's user-friendly tools for sitemaps, 301 redirects, and alt tag editing.

For more complex SEO features, Webflow simplifies the addition of hreflang tags for a multilingual site. It’s an HTML attribute facilitating language and geo-targeting for webpages with multiple versions.

Additionally, the platform enables easy implementation of canonical tags, crucial for specifying the main version of a page and avoiding competition between similar or duplicate content in search engine results.

Regarding the sitemaps, you can use an automatically generated XML sitemap, create your own, or hire Webflow experts.

Sitemaps (i.e., lists all of a website’s important pages) are important not only to SEO but to clients too. Why?

Clients usually get their sitemaps in an appropriate file from website designers.

Here's a step-by-step guide on how to enable sitemap generation in Webflow:

1. Go to the Site settings

1. Switch the button on (Sitemap)

Done!

Overall, Webflow excels in terms of technical SEO. Its flexibility and ability to generate clean code, along with the provision of alt text for each asset, set it apart. And since it features lightning-fast site speeds, it can directly affect your conversion rates.

These capabilities are often lacking in other drag-and-drop builders.

For more SEO tips, check out our Webflow SEO article.

Unlimited Backups and Security

I’m sure we're are all afraid to lose our data—whether in a digital or non-digital form. Backups (i.e., copies of data stored in alternate digital locations) are thus essential in recovering data.

To help you restore your site (e.g., hacking, hardware failure) and save your information, Webflow offers automatic website backups. And all plans provide unlimited backups.

It also offers end-to-end SSL security. This means that all data passed between the web server and browsers stays private.

Webflow Customer Support

Webflow exclusively provides customer support through email. The team is available Monday to Friday from 6 am to 6 pm Pacific Time, aiming to respond within 24-48 hours.

While lacking phone or live chat support in its regular plans, Webflow's active user forum serves as a valuable resource. However, most of Webflow's key competitors (e.g., Shopify, Wix and Squarespace) offer phone and live chat support on their regular plans.

A full scope team comes in handy here. You can count on a reliable Webflow agency to be your ultimate partner, supporting you every step of the way.

Webflow Ease of Use

While the learning curve is straightforward for web developers, it is not as user-friendly for those new to web development. There is, however, no better place to learn everything about Webflow than Webflow University.

One Webflow community contributor, Danny Figueroa, wrote of his experience:

“I’m no engineer, and that’s why I love Webflow. Just by using Webflow, I was able to complete my knowledge of HTML and CSS. And as a bonus by association, Javascript… limitedly.”

Therefore, coding a website with Webflow is a process suitable for those who have previously used code to perform actions on websites.

Webflow Templates

With Webflow templates, beginners can easily build websites. However, challenges arise when clients pass their prearranged Webflow templates to the Webflow agency, anticipating further changes.

In such cases, it's advisable to place trust in your Webflow agency and allow them to build your Webflow site from the ground up.

But the positive aspect for newcomers to website development is the extensive variety of Webflow templates available (2,000+).

Whether you need e-commerce, personal, or business templates, you can browse templates by popular tags (i.e., agency, blog, portfolio multi-layout etc.), and each of these allows you to further search by category, language, style, features and type.

Here is an example of responsive agency website templates:

Webflow Integrations

Webflow integrations link your software to external tools, enabling the exchange of information between them. This connection facilitates the sharing of data, providing you with extra features.

There are many integration types.

Webflow offers a wide range of integrations to enhance the functionality of your Webflow site.  The Webflow integrations library contains  240+ integrations.

From anti-spam, assets, analytics and targeting tools to content marketing, customer engagement and domains (etc.), these integrations let you easily automate workflows, add multiple Webflow projects, manage blogs, increase lead customer engagement and so much more.

For example, Bannernote is a no-code customer engagement tool that lets you gather input and manage banner campaigns from a single dashboard.

And Webflow understands that businesses have a better chance to forge profound connections with their audience by actively engaging customers across various channels.

That's why it supports 19 customer engagement integrations in addition to other types.

Here are some integrations worth mentioning.

Webflow Integration with HubSpot

It’s easy to set up and integrate, with no learning curve, your Webflow site with HubSpot’s marketing and CRM platform.

This makes it easier than ever to configure your mission-critical sales and marketing automation right inside of Webflow. And Webflow provides a seamless way to embed HubSpot forms and chatbot.

Right in the page editor interface, you can map the fields in your Webflow form to an existing HubSpot form.

When you connect HubSpot to Webflow, you are assured that the right data will be captured and stored correctly.

Webflow Integration with Shopify

If you are looking for a way to make Webflow and Shopify work, you can do it through a dynamic Shopify Buy button and CMS collection.

You can add products from Shopify to Webflow CMS to design a store that is tailored to your needs.

Here is a great example of the Shopify website built by a Webflow developer.

Webflow Integration with Zapier

Zapier is an automation platform that lets you integrate your work apps into streamlined workflows to power your lead generation in the easiest way possible.

But can you connect your Weblow account to Zapier? Yes, you can - follow the step-by-step tutorial guide on how to connect your account to Zapier or leave everything to your Webflow experts.

Zapier lets you connect over 1000 apps with the Webflow API and, once you connect your Webflow account to Zapier, you can automate various CMS and Ecommerce actions in Webflow.
Webflow University

This way, startups, small and medium business, as well as enterprises can automate their work in minutes and discover automation that leads funnel and customer retention with Webflow and Zapier (i.e., simple no-code visual platforms).

Webflow Plugins

The Webflow plugins refer to individual services you can add to your Webflow project, whether you want the browser extension to be set up or adds-on to enhance your web application development.

There are also a bunch of custom Webflow plugins made by developers. With these, you can filter collection items, chatboxes, and even slide images around.

In some cases, employing Webflow's Integration API is vital to incorporate custom plugins into your customized website.

With Webflow's Integration API, you can integrate Webflow with other tools or services.

Now, let's delve into the widely-discussed Figma to Webflow plugin topic.

Figma to Webflow Plugin

So, can you import Figma to Webflow?

Figma to Webflow Plugin is a solid solution when you want to import your Figma files into Webflow CSS and HTML.

There is, however, room for improvement in this process.

Let me elaborate.

A designer uses auto layout in Figma - adding any object or layer to an auto layout frame. It is then possible to convert its designs into the form of responsive flexbox structures to clean Webflow HTML and CSS.

In simple terms, you can transfer designs from Figma to Webflow.

But here is where the problem arises.

There is a practice in Webflow with naming classes. In other words, web designers are creating class names. Just like in coding practice, a concise list of names tends to result in better usability and readability. When names are defined and re-used efficiently, it’s easier to read and follow the whole process.

Therefore, the class naming system involves assigning names to classes, which serve as utility foundations for designs.

This naming practice is crucial for organizing the exported files (from Figma to Webflow) during the development phase. And to ensure a seamless transition from design to development, designers need to rearrange and name each layer individually in Figma.

This is definitely time-consuming, so we recommend using this plugin only for simple landing pages.

The bottom line is that after you import your files, there’s still some room for improvement. It’s great that Figma to Webflow can speed up the whole process (e.g. if you want to build a single landing page), but if you want a more robust website with a lot of pages, don’t think that one click will fulfill your needs.

And here is what a community contributor at Reddit thinks of it:

To streamline simple designs (such as those it converts), I prefer using a component/section library and resizing them.

Then, he continues:

Rather than having it done automatically and spending time debugging something I didn't build, I would rather spend an extra 1-2 hours building from scratch (or using a starter template).

He concludes that the plugin could be definitely improved. And our Webflow team agrees with that.

Now, here comes the positive aspect of this plugin.

There are some additional features, from variables syncing, 20+ prebuilt layouts and responsive structures, automatic style guide creation to the 50 CSS declarations that are supported, as well as the practice of exporting vector nodes as SVGs.

Let's now look at the pricing for Webflow.

Webflow Pricing

There are two main types of Webflow plans:

• Site plans: These include website plans for landing pages, blogs, and business websites, as well as e-commerce plans tailored for online retailers.
• Workspace plans: These include website plans for in-house teams, freelancers or agencies.

The Webflow team should put more effort into defining pricing plans.

Here is one of the negative aspects.

As the owner of the agency workspace, you are the only one able to access the client's Webflow account. However, other members in the agency workspace (9 of them) are not allowed to do the same.

Except in the case you purchased the additional freelancer workspace plan for each member.

The bottom line is that this can result in additional expenses.

Webflow's pricing structure is thus complicated and could definitely be improved.

Here is a complete overview.

The differences between the general Site plans involve:

• the number of pages that can be built (2 on “Starter” differentiates significantly from 150 on “Basic”, “CMS”, and “Business” - not to mention “Enterprise”)
• the number of CMS items (50 on “Starter” differentiates significantly from 2,000 on “CMS”, or 10,000 on “Business”)
• the number of form submissions (50 on “Starter” differentiates significantly from 500 on “Basic”, 1,000 on “CMS”, or 2,500 on “Business”)

There is also a distinction between the amount of bandwidth and visitors and some special features that are included, such as the number of content editors who can access Webflow editor (3 on “CMS”)

Distinctions that can be seen in e-commerce site plans include the number of e-commerce and CMS items. Webflow offers a significant improvement by waiving transaction fees entirely with the Plus or Advanced ecommerce plan.

On the other hand, Workspace plans allow you to collaborate with a team and manage multiple sites. There are pricing models for in-house teams and for freelancers and agencies.

Take a closer look:

The differences between the in-house team Workspaces plans involve:

• the number of paid users (1 on “Starter”, 3 on “Core”, 9 on “Growth”, and unlimited users on “Enterprise”)
• the number of pages per site (2 on “Starter” differentiates significantly from 150 on “Core”, and “Growth”)
• the level of admin and design access (available on “Core”, “Growth”, and “Enterprise”)

As mentioned earlier, pay attention to additional expenses that might come with Workspace plans.

And if you want to know more about Webflow agency pricing, take a look at our pricing page.

In the next part of our review of Webflow, we will cover how to use this site builder.

3 Ways To Use Webflow

Finally, you can use Webflow in the following ways:

1. Design and host your customized website on Webflow yourself. And use the Webflow editor to update it.
2. Choose a reliable Webflow agency to design and host your website on Webflow. And rely on the development team whenever you need small or bigger changes to the website.
3. Design a site using the Webflow platform, export the site’s code, and host it on another server offered by hosting companies.

In the first option, web hosting and design are available through Webflow.

However, most users opt for the second option. Web design agencies build a reliable Webflow site hosted on Webflow’s servers, offering full ongoing support. And there are even some bonus features when partnering with some of the best Webflow agencies out there.

For example, you get free Webflow training. Therefore, you'll receive a free guide to help you or your team navigate Webflow Designer and Editor with ease.

Since we are a full-service Webflow development agency, we ensure all websites undergo rigorous speed and accessibility checks, resulting in the best Webflow sites available.

What’s more, Webflow offers an incredible online library via Webflow University—a wealth of tutorials, templates, lessons, and support—and access to experts when you need to enhance your web-building skills.

In the third option—exporting a Webflow website to a different server—most users are professional web designers and web developers who have experience updating and editing websites via coding, or businesses that have already chosen a trusted hosting company.

Conclusion — is Webflow actually good?

Webflow has truly revolutionized the way web developers and designers create and launch custom websites. And with Webflow University, it is possible for beginners to master the platform (website coding) in a relatively short amount of time.

In conclusion, there's no doubt that Webflow is an excellent tool for encouraging novice users to learn HTML, CSS, and even JS. But for web developers—it’s a cherry on the top.

With key features and a full list of the key Webflow pros and cons aligned, your next step is to define a clear goal for your new website.

Ask yourself: Do I want to build a site with short-term or long-term purpose? Is it to sell services or products? Do I need help incorporating a profit-driven approach into every design aspect? How can I create revenue-focused websites that seamlessly attract and retain clients?

Once you have answered all relevant questions, you should have an easier time deciding whether you want to build a Webflow website by yourself or hire Webflow professionals.

And remember: the platform is particularly strong when it comes to content management and custom website development (some extra perks can be realized through custom code). On the negative side, the platform is weak when it comes to e-commerce features.

It is our sincere hope that this was one of the most useful Webflow reviews you have read.

Best of luck with your Webflow project!

‍