Honest Webflow Review 2020

Building a website used to be a ton of work. But now is 2020 and there are many different tools which can do a lot of the heavy lifting for you. In this in-depth Webflow review you'll discover why Webflow is my favorite of them all.

What we'll cover

• What is Webflow
• The Webflow Designer
• Hosting
• Pricing
• Integrations
• Who is Webflow for (and who not)
• Pros and Cons
• Takeaway

Most tools lack in two very important areas: Design freedom and code output. And this is where Webflow really shines. Let me explain …

Often it’s hard to design your page exactly the way you want with a lot of the website builder tools available. Either the handling of these tools is clunky or the customization limited. Most of the time, the generated code tends to be a mess. This, of course, is a big No-No if you’re a professional designer who wants to create websites for clients or for your own company.

I think this is what the Webflow founder, Vlad Magdalin, was trying to solve when he started his company. And boy did he succeed...

I’ve been using Webflow for at least 3 Years now. The pace at which they’ve been adding new features (in a very thorough way) is just astonishing. The more I used it, the more I realized how powerful it is. This is also the reason why I decided to write a review on Webflow and share my thoughts on it.

See, by now Webflow has become a full blown CMS – with custom content types and fields and integrated Ecommerce. The modern website builder also rocks a super cool interaction and animations system and even white labelling and client-billing. But we’ll get into all of that, no worries.

Please keep in mind that this tool has so many features that I won't cover every little detail in one Webflow review.

So let’s dive in, shall we?

What is Webflow?

Webflow is a visual website design and development tool. Think of Dreamweaver on steroids but with squeaky clean code output hosted on Amazon Web Services (AWS).

Webflow lets you build entire websites from the ground up (without writing a line of code) in a visual way. The big difference to all of the other tools out there is:

• You can build anything exactly the way you designed it (Pixel perfect)
• Webflow follows all the best practices of good HTML & CSS coding
• Blazing fast hosting through Amazon
• Easy integration of external services like Google Analytics, A/B testing with Google Optimize and much more
• A CMS with dynamic databases and custom fields with the ability to style every aspect of how those items get rendered on your page
• Integrated Ecommerce with full design freedom of every step including the checkout process (unlike e.g. Shopify)
• State of the art animations & interactions through an easy to use interface to make your designs come alive
• Client billing that lets you bill your customers the way you want it (including your own price tag)
• White labelling so you can sell Webflow as part of your service
• An easy to use editor that you and your clients can use without breaking anything

Sounds good? Let's move on to the actual Webflow review.

The Webflow Designer

The Webflow designer is where the magic happens. It's where you design and build your site. With everything HTML5and CSS has to offer (and none of the coding).

A panel on the left gives you access to all your content related stuff: Pages, page elements, your databases, Ecommerce products, and assets. It's also home to your search settings.

Let's have a closer look.

Add (Elements to your page)

Webflow gives you access to most standard HTML elements which you can just drag and drop from the sidebar onto the canvas. Here's the complete list of all the elements available (please just scroll past if that's a little to much detail for now):

Layout

• Section
• Container
• Grid
• Columns

Basic

• Div Block
• List Block
• List Items
• Link Block
• Button

Typography

• Heading
• Paragraph
• Text Link
• Text Block
• Block Quote
• Rich Text

CMS

• Collection List (from Dynamic Database)

Media

• Image
• Video
• Youtube Video
• Lottie Animation

Forms

• Form Block
• Label
• Input Field
• File Upload
• Text Area
• Checkbox
• Radio Button
• Select Field
• reCAPTCHA
• Form Button

Components (Premade Stuff)

• Background Video
• Dropdown Component
• Embed Custom Code (HTML/JS/inline CSS)
• Lightbox Component
• Navbar Component
• Site Search Component
• Slider Component
• Tabs Component
• Map Component
• Facebook Component
• Twitter Component

Layouts

Layouts are pre-made blocks of structured elements. Think of them as mini templates for common website sections like a sticky navigation, image galleries, subscribe forms or hero sections.

Symbols

If you use a design tool like Sketch or Figma you'll probably know how useful symbols can be. Webflow's symbols pretty much work the same. You can turn a selection of elements that you want to use more than once and turn them into a symbol for re-use. So if you change one instance of that symbol it updates all the other instances of that symbols on your site.

Example: Imagine a footer section which sits on every page. Want to change something in that footer? Just update one symbol instance and boom – all other pages get the updated footer.

Manage elements on your page (Navigator)

Think of the Navigator as your layers panel in Figma/Sketch/Photoshop. It shows you all the elements on the current page and the hierarchy (nesting) of them. You can select elements and move them around to change the order on the canvas or nest them inside other elements.

Pages

Use the pages panel to create new pages or edit existing ones. This includes things like the meta title, description and open graph images.

Dynamic Database CMS (with custom fields)

This is one of my favorite features in Webflow (and super powerful). You can create your own content types with custom fields which store your data exactly the way you need. The possibilities are endless… Create a blog, property listings, job boards, product listings or any collection of items with a custom data structure you need.

The best thing about all this is, you can style output however you like. Just design your layout and then connect the elements to your fields (e.g. your H1 to your title field). The templating is super simple and by far the best workflow I've ever seen in any website builder tool.

Fields you can use to store your content:

• Plain Text (Single Line & Area)
• Rich Text
• Image
• Multi Image
• Video Link
• Link
• Email
• Phone
• Number
• Date/Time
• Switch (Toggle)
• Color
• Option Select
• File
• Reference (to reference other database items)
• Multi reference (to reference multiple other database items)

Ecommerce

I haven't used Ecommerce myself in Webflow yet (so there's not much I can say from experience). But I can say this: If the Webflow team publishes a new feature, the feature tends to be very well implemented.

Again, design flexibility is where Webflow shines. You can control the look and feel of any aspect: Product listings, animations & interactions, transactional emails and even the checkout (looking at you Shopify).

Tog get paid, choose from any of the following payment providers:

• Secure payments powered by stripe
• Apple Pay
• Google Pay
• PayPal

Just like with dynamic databases, you can define your own custom product fields to structure the product data the way you like. You can add variants and list sale prices and soon you'll be able to create coupons, promotions and sell digital products.

Webflow Ecommerce also supports shipping regions and rules. Want to print shipping labels? Use Zapier (which lets you connect Webflow to all sorts of apps via the Webflow API).

Assets

Boring but necessary: A simple file browser where you access and view all your images and files that you use on your page. Nothing more, nothing less.

Settings

The last little tab is the settings area which is home to some search and backup related settings. The setting tab shows when your site has been last indexed as well as your past site backups. You can manually index your site and you can manually create backups of you site. But both of these are taken care of automatically anyways, so usually there's no need to bother.

Styling your Elements

Want to style an element and make it look exactly how you want? The sidebar on the right gives you a panel similar to Figma or Sketch. Let's call it the inspector. Here you can adjust things like colors, font sizes, margins, padding and so on. Basically almost every available CSS parameter available. Every element needs a CSS class. Either choose your own or let Webflow create an automatic class name. You can also use combo classes for better targeting and overwriting of single element properties.

Interactions

This feature alone would make for a lengthy review, so I'm gonna keep it somewhat short. Interactions in Webflow are a powerful timeline based animation and interaction system. It empowers you to animate pretty much anything on your page based triggers like scroll position, mouse click, hover, page load etc.

Animating most parameter of any given element like colors, opacity, size, position and more is just a matter of clicks. You can even import After Effects and Lottie animations without touching a line of JavaScript. This allows for some really advanced interactive animations and effects.

The Webflow Editor

Once you've designed and built out your site you'll probably want to hand it off to a client or content team. But how are they going to create and edit content? You don't want them to mess with your precious design (and we all know how that usually goes). This is where the editor comes in: Webflow's clean CMS interface to edit and manage your sites content in an easy to use form.

Inline Editing

Why not edit the content directly on the page? Because you can! In real time the way you see it (inline) without breaking anything. Cool, don't you think?

Onwards …

SEO in Webflow

But what about SEO? Well, it's easy to manage all the necessary on-page SEO settings like the meta title, meta descriptions, URL's (slug) and Open Graph settings. Don't want to do it manually for every page? Great. Because you can automatically define meta titles and descriptions by grabbing custom fields from your CMS collections.

Collaboration

Webflow is made for team collaboration (they even offer a team plan). It's easy to keep track of who has edited what before you publish a site.

Form Submissions

The Webflow editor also gives you access to all form submissions if you're using Webflows integrated form feature. And if you need to, you can download all submissions as a CSV.

Webflow Hosting

To host you site on Webflow just fire up your FTP, setup cPanel and … just kidding. Forget about all of that. Just enjoy super fast hosting on Amazon's Infrastructure (AWS) and completely hands off managed hosting.

How to connect a Domain in Webflow

If you create a new site, it comes with a free Webflow sub-domain (https://yoursitename.webflow.com). For most people this won't cut it though and you'll probably want to have your own domain. This can be done by connecting an existing domain that you already have elsewhere by pointing it to Webflow. Or you can easily buy one directly within Webflows interface through GoDaddy or Google Domains.

Staging

The sub-domain can act as your staging environment to test your site before you publish your masterpiece. Which is handy. Just turn off indexing so Google won't accidentally show it in search result.

Pricing

This is where things get a little complicated. But together, we'll figure it out. Webflow comes with different account plans and site plans. The combination will determine your monthly overall cost. See, I said it's complicated, but now worries … just read on and it'll become crystal clear (somewhat).

Webflow Account Plans

If you sign-up with Webflow, you automatically get the free (forever) account plan with a maximum of 2 projects (sites). The account plans in Webflow define how many projects (sites) you can create. But also the quality of staging (Free/Enhanced), the ability to export of code, white labeling and password protection features. If you need a team dashboard, you'll have to get a team account plan. Here's a quick overview of the pricing as of April 16th 2020.

Webflow site plans

Want to connect your own domain or use advanced features like CMS (with custom fields) or Ecommerce in one of your sites? Then it's time to upgrade this particular site to a site plan which fits your needs. Here again, a screenshot with the differences and according prices as of April 16th 2020.

Integrations

Webflow itself is already a powerhouse. By integrating other tools you can really push it to the next level. Need a membership site with gated content and monthly subscriptions? Use Memberstack. Want to run A/B tests? Integrate with Google Optimize. Here's a list of my favorite integrations:

• Memberstack (Membership Sites)
• Mailchimp (Emails and marketing automation)
• Google Analytics (Website Analytics)
• Google Optimize (A/B testing)
• Zapier (Connect Webflow to 2000+ apps through the Webflow API without writing any code)

Who is Webflow for (and who not)

Do you have a basic understanding of HTML/CSS and want to build a website or prototype without writing actual code? Then Webflow is a great (probably the best) option out there. The state-of-the-art website builder allows you to use almost any modern CSS feature. Even things like flex box & grids in an easy to use interface. You can build static or powerful dynamic pages with custom CMS fields and even an entire ecommerce store.

If you don't know how HTML/CSS works, then Webflow might be somewhat confusing to you. There are other tools out there that are simpler but also provide less design freedom. So I hope this Webflow review helped shed some light to make the right decision.

Pros and Cons

Pros: You can design every little detail and build powerful dynamic websites with slick animations and advanced features. Everything can be easily optimized for mobile with cascading overrides. Using integrations like Zapier, Memberstack and Google Optimize you can extend the functionality even further with endless possibilities.

Cons: If you don't know the basics of HTML/CSS, Webflow is going to have a steep learning curve. Also, you can't import existing websites into Webflow. You can add code snippets into your page, but they won't get rendered until you publish it. If you're a developer yourself, you won't be able to mess with the page code by hand. So that is that. One annoying thing I've noticed is that the editor behaves very buggy on my Safari Browser. It doesn't render buttons correctly and it somehow loses internet connection even when other sites have no problem. I've lost some edits of this article which was super annoying. So be aware of that. I hope this is getting fixed soon.

Takeaway

Webflow is the most advanced website builder out there. Period. This technological marvel is so well built that even experienced coders use it. It's just faster to use than to write the actual code by hand. The Webflow team is light years ahead of any competition and Webflow by far my favorite website builder out there. It's so intuitive that I often skip my design tool (e.g. Figma) completely and jump directly into Webflow.

So I hope, that after this Webflow review you are pumped to give it a try. Because you should. It really is that good.

Sign-up here for a free (forever) plan and start building your site within 5 minutes.