What is Webflow?

Webflow is the next-generation web development platform.

Webflow is a visual web development platform that empowers you (or your team) to build, design, collaborate, and launch sophisticated solutions visually - without knowing how to code.

But it's hard.

When launching your solutions to market, turnaround time plays a critical role in your success when capturing (and keeping) the attention of your customer base.

Take too long to launch or react slowly to the ever-changing market conditions, and someone else will do it - capturing your customer's attention before you do.

*"Time-to-market plays a crucial role in modern web design.

Most product teams want to minimize the time required to go from the idea to a ready-to-use product without sacrificing the design quality along the way."* - Smashing Magazine

The problem is...

There are too many moving pieces that need to be done by expensive individuals who are each expert within their own set of tools.

You have to rely upon designers to create the visual aspects.
Marketers to create the voice and draw attention from your audience.
Programmers to pull everything together and code the final solution.
...and so on.

Many tools are involved, from many different people, across many disciplines.

"Ultimately, CSS is just about styling - which designers are used to doing in complex visual tools like Sketch, Figma, and Photoshop - but other than Webflow, there's never been a production-oriented tool that provides the power of HTML and CSS visually." - CSS Tricks w/Chris Coyier

Hidden costs.

Then, once you build your online property, you must keep a relationship with all of these professionals to maintain and update your site regularly.

Maintenance is the hidden cost of time and money, and you'll often overlook it.

The solution.

The solution is to remove the need for many people across many disciplines, each using their own complex tools.

Reduce the number of tools used in a sophisticated (and custom) web development process, and instead empower the only the experts who can capture the attention of your customer base to do so - quickly, without spending years learning the technical details of web development.

Webflow provides this power without sacrificing quality and removes the painful parts of web development.

But how?

How Webflow works

To understand how Webflow works, you must first understand how the browser displays web pages.

You use HTML, CSS, and sometimes Javascript to accomplish this.

HTML (Hyper Text Markup Language) is a markup language. You add tags around your content to tell the web browser how to display it.

A good example is a link:

The above is how you hand code a link in HTML, which the web browser renders to look like this:

Sometimes you want to remove that underline in your link, and you may want it to be a different color.

To make those changes, you add CSS styling (Cascading Style Sheets):

The above code adds CSS style to your HTML, and the browser renders your link like this:

But whoops!

You didn't want that shade of red, nope. You wanted a darker, more rich red.

So you go back to your code editor and try a bunch of different codes, refreshing the web browser each time until you get the dark rich red you were looking for:

Ahhh, that's better.

But wait! The font size is tiny. It's hard to read. Let's bump it up a bit:

You added font-size: 16em; to your CSS.

Reopen the web browser, reload the page, and I don't know what the heck 16em is, but this is what it does:

Well, that's too big!

Let's reopen our text editor, try a different value, reload the web browser, and see how that looks.

Several tries later, and I think you've nailed the size:

Much better.

But that was a slow, manual process by an expensive programmer and/or designer for a tiny element in a vast sea of HTML and CSS used to build a complex website.

Webflow.

Here's how you do the same in Webflow.

Drag a link element into the designer:

You change the decoration style to "none," and that removes the underline.

Notice a funny thing that just happened.

You saw the change live in the designer. No opening a web browser, reloading the page, flipping back to a code editor, etc...

You get to preview your changes instantly.

Even better, those few clicks just generated this code behind the scenes:

Now change the color:

Let's make it a darker, richer red:

The visual designer instantly updates every color change you make, and you see your changes in real time.

Now, change the font size:

Again, you see the font size change in real time.

Now add the link text. Just tap on the link within the designer and type in what you want:

Now add the URL for your link:

Boom 💥 done.

And you can preview everything right in the designer or publish it to your live site:

Open up the live site, and there it is.

That was a lot of screenshots to illustrate how to do this, but point & click is far easier than learning all the bits & pieces you need to do this:

Where do you even start?

I'll tell you where. By hiring an expensive programmer 😡

The nice thing about Webflow is you can export all of the code it generates:

You can take that code and host it anywhere, hand it off to a programmer, a designer, whatever.

It generates standards-compliant code that anyone familiar with it will understand.

And you didn't program any of it.

Design systems.

For the web design aspect, this all starts with a design system.

A design system is a collection of reusable components used to build websites. These are composed of HTML and CSS, and they help to create a high-quality, consistent look & feel across your entire site.

Since the components are reusable, once you've created them, you reuse them, and your site build speeds up dramatically.

Examples.

Some common and popular web design systems are Twitter Bootstrap and Google's Material Design.

For example, Material Design has nine types of buttons:

Here are all of Twitter Bootstraps buttons:

These are pre-configured, reusable components of HTML and CSS that both design systems expose to you when creating your site.

You copy and paste the code into your design and you didn't have to spend your time creating that element yourself (or relying on software engineering resources).

*"Enter into the product development cycle meant lots of meetings and getting many people up to speed and in sync.

Creating low-fidelity wireframes and ensuring that engineers could build what the creative team needed.

Once approved, create pixel-perfect high-fidelity mockups and get buy-in from everyone on the creative team.

Now they were ready to start lobbying various product managers to get slotted some time from an engineer to do the work.

To make that happen, they needed to write and submit tickets to the product team ticketing system.

Those are classically a blocker. So tickets go in, never to be seen again.

More lobbying is needed.

Finally, there is some engineering availability, and the build begins.

It gets reviewed, goes through revisions, is approved, and is moved to the quality assurance team to ensure these updates don't negatively affect the rest of the site.

Once that team signs off, it sits and waits. Until the current 3-week cycle ends and it gets released to the live site.

Only to discover there is a typo.

Wash. Rinse. Repeat."*

The miserable uphill battle.

Removing the process, empowering those who traditionally could not do this, and using Webflow as the design system removes all of that pain.

Webflow as the design system.

Instead, Webflow is the design system.

This is how Webflow allows you to create buttons:

Notice how there is no button widget. Just the primitives to create the button.

Looks intense! Overwhelming?

It's not once you get into it.

This is far, far, far simpler than reading through and learning the HTML spec, the CSS spec, and the Javascript spec.

That takes years of trial and error versus days to weeks of learning Webflow.

...and Webflow goes to great lengths to ensure it's easy to use.

You get a ton of pre-sets when you start.
Cloneable components & templates
An actively helpful community.
Free university platform.
Extensive lessons.

This applies to you, anyone on your team (who is non-technical), or anyone you hire.

That all translates into a quicker time-to-market and lower costs.

No more limitations.

You just went from using a design system like Twitter Bootstrap or Material Design that only offers a handful of buttons to a limitless number of differently styled and interactive buttons.

No more cookie-cutter designs.

Yours are now custom and unique; you don't have to hire expensive programmers or designers or spend time learning it all yourself.

Here are some fun effects that a community member created with Webflow buttons, remember this is just a tiny fraction demonstrating what you can do.

No more limitations.

You have complete control, visually, over what traditionally only those who knew how to code could do (manually and laboriously).

Problems with design systems.

Traditional design systems have a learning curve. First, you need to learn their way of doing things and know how to hand-code your site to add that design system into.

With Webflow, you need to learn how Webflow works, and you're done.

The benefit of Webflow is once you've learned how it works, there are no more limitations like other design systems.

With traditional design systems, sites all start to look the same.

It's easy to spot websites using those design systems, and your site begins to look very "cookie cutter."

Instead, Webflow gives you the visual tools to create your components, your classes, your styles, your layout, your custom animations & interactions, and all of them are reusable.

This benefits your ability to create a custom and unique online property quickly.

Why use Webflow?

"The market is filled with site builders that promise to be universal solutions for any design challenge, but when it comes to practice, they fall short on both the design and development side." - Smashing Magazine

Webflow is built for professionals.

Most tools hide the complexity of web development and limit what you can do.

They dumb it down.

Instead, Webflow exposes all of it.

This allows you to create flexible solutions as if you had opened a text editor and coded it yourself.

...but without the years of trial & error.

They expose all the standard tools and protocols developers use to create those exact solutions.

That might sound scary, but you'll find out (fast) that it's not with Webflow's visual build environment.

It removes the need to learn all these things before you start becoming productive.

Developers will quickly grasp Webflow's UI.

Experienced developers, designers, or even inexperienced non-technical folks can quickly grasp Webflow's visual environment.

Exposing them to non-technical folks who haven't, or don't want to, invest that amount of time in starting to create impactful solutions.

No more memorizing archaic commands and granular attributes. Nope.

Marketers, customer service, and non-technical folks who know what the customer needs and how to communicate it can start building and maintaining your online properties quickly.

But if you have experienced programmers and designers, the tool will also be familiar to them.

With Webflow, you're not leaving anyone out.

It's flexible.

Classes and reusable styles are core to Webflow.

Classes and reusable styles are how web developers build solutions today, and Webflow exposes this within their Visual Designer.

Use modern layout tools like Flexbox and CSS grid.

Yet another standard tool that professional web developers rely upon, Webflow exposes within their visual tool.

These have traditionally been very complex topics. However, Webflow becomes very straightforward even if you're not an experienced programmer.

Publishing is just a click away.

Need to make changes, quick? No problem. Now your marketing team can make the update and publish it instantly. The same goes for your designers.

Flexible and powerful CMS (ditch WordPress).

Now you can integrate your content management system into your custom web designs. Before you were forced to rely upon programmers to update the code files that the designers mocked & prototyped.

Build completely custom interactions and animations.

You create custom interactions and animations through Javascript code. Webflow gives you a visual interface for generating custom code for this, integrating it into your custom designs, and the ability to preview your work instantly.

Start learning with Webflow University.

Webflow has probably spent more time building its learning resources than its visual designer. Seriously.

Their videos, tutorials, and learning material are second to none.

Webflow is the only solution that has gone to such lengths to ensure you can get up to speed quickly with any aspect of their tool.

And the best part is they make learning fun (and funny):

How popular is Webflow?

Webflow is the most popular website builder found within the top 1 million websites on the internet.

To understand how popular Webflow is, I wrote some custom software to figure it out.

I took the top 1 million websites on the internet and searched it against the top 50,000 Webflow sites.

I did this for Webflow's competitors as well. WordPress, Squarespace, Wix, and Joomla.

I crunched all of that data and charted it. The above graph shows the aggregated results over the last 12 months.

Webflow is by a far margin the leader. Webflow has more sites in the top 1 million internet sites than any other platform.

Meaning, Webflow is the most popular web development platform to use.

If you're serious about your product and its site. If you're serious about ranking in the top 1 million sites on the internet, then Webflow can help.

Search growth.

Webflow has grown search volume by a massive 78% over the last two years. Webflow is growing faster in the last several years than any other competitor by far - follow this link to see all of that data.

Webflow reviews.

Webflow is the most popular website builder amongst reviewers.

I've taken a sample of 4,000+ reviews across two independent review services, read through them, and pulled out the most discussed features of each service.

It was a lot of work 😅 Phew!

Here are the high-level results.

The positives:

It is the most customizable service.
Webflow has the most advanced features.
Webflow has the least limitations, meaning it's the most flexible among its competitors.
Webflow by default (without any plugins) creates the fastest websites on the internet.
Webflow has the best support & help amongst it's competitors.

The negatives:

Webflow has the highest learning curve amongst all of it's competitors. Why? Because it's the most advanced and customizable. It doesn't dumb down its feature set.
It's the least beginner friendly. Again for the above reasons.
Webflow has the highest costs, with Squarespace coming in a close second.

All that customization and advanced features come with a learning curve and higher cost.

But remember, this is without all the cost of add-ons and plugins required by the other platforms. This compares the "base" cost, not the cost of what it takes to rank in the top 1 million websites on the internet.

User experience.

Google and most industries measure "user experience" by page speed. So if the website is snappy and loads quickly, it's known to have a good user experience.

Webflow is the most popular by User Experience.

Continuing with my custom-built software, I've taken the top 50,000 sites for each website builder (250,000 sites in total) and run each of them through Google's page speed insights tool.

While Webflow (in the chart above) is the leader, it's only by a small margin.

Why?

If you're serious about your site's user experience, then you spend the time, money, and effort to rank highly for this metric.

It matters that much.

And if your web development platform doesn't give you this out of the box (as Webflow does, and the others don't), then you do whatever it takes to make that happen.

That needs to be represented in the chart above, and it's not. Webflow gives you this out of the box, while all its competitors do not.

Who uses Webflow?

Turns out, a lot of companies, agencies, and professionals use Webflow.

I've done a massive amount of research, digging deep into some of the recognizable names, big and small, that have transitioned to Webflow:

What were their issues before using Webflow?
What was important for any new solution to have?
What happened after they migrated to Webflow as a solution?
What problems did they encounter during this transition to Webflow?

Here are some of the results.

Discord

"Before using Webflow, Discord would get a bunch of requests every quarter for new pages - marketing, sales, website pages, etc...

But everyone was so heavily focused on product engineering work. The company's mission was to make the core product amazing.

Marketing, sales, and new website pages suffered. So maybe one new page per quarter would get created."

HelloSign (now owned by Dropbox)

"HelloSign uses Webflow for all of the website marketing pages, without any developers needed. The marketing and design team owns the entire process.

They have a quick turnaround time, full autonomy, and..."

Less Annoying CRM

"...simple copy updates had to go through the engineering developer cycle. Taking programmers away from focusing on improving the core product.

Less Annoying CRM needed a solution that empowered the non-technical marketing team to have full control to experiment, update, create, and improve any aspect of the public-facing site.

So they started looking for other solutions..."

Pacific Funds

"The Pacific Funds website is their primary marketing asset playing a crucial role in displaying their funds to potential customers, and as a tool for their sales team to communicate with their advisors and investors.

*Pacific Fund's biggest challenge with their existing setup was the lack of agility and control to create and update site content, as well as testing creative campaigns.

Their last major update was six years prior. They simply didn't have the time and resources to take on this challenge with their legacy setup.

Getaround

"Before Webflow, the Getaround public-facing website pages were built into their main product codebase.

It was owned by the software engineers.

That means, the only folks who could make changes were the software engineers. So everything needed to go through the engineering development lifecycle.

...and that could take weeks."

SmugMug

"There wasn't one single person on the SmugMug team that could dedicate themselves full time to their website. Sound familiar?

The website only saw attention when engineers and product managers had spare time.

Which was rare."

Upwork

"The Upwork teams were always falling behind. They couldn't get their updates onto the live site fast enough to keep up with marketing trends.

With their legacy approach, updating pages that followed their brand guidelines or simply adjusting copy was too time-consuming.

Upwork's marketing and design teams didn't have access to edit the landing pages themselves. Even the smallest of copy changes, fixing a typo, had to go through the normal Jira ticket filing workflow."

Dell Computers

"Dell uniquely uses Webflow.

Instead of removing engineering resources from the process, they use Webflow to deliver high-fidelity prototypes.

This approach is far from the norm but turns out, it works well for the company.

This allows their team to have a super quick turnaround, versus going through wireframes, review, the mockups, review, etc..."

Dig into each of those company links. You'll find some impressive uses of Webflow and interesting stories of how they've used Webflow successfully.

What can you build with Webflow?

What websites are a good fit for Webflow, and which are not?

Marketing websites
Blog websites
Ecommerce websites
...and so on

Marketing websites:

These are good to use with Webflow as you want to change them often and you want them to look unique to your brand and voice (versus cookie cutter).

Text, images, layout changes, colors, making it look new and refreshed every once in a while (for a new season) - in all of these cases, you want to be independent of a software engineer, developer, or programmer.

Speed rains supreme.

Marketing teams want to be able to make the changes themselves (or work directly with a designer) without waiting for a programming resource.

In many companies, engineering resources are costly. They must be devoted to making the best product instead of fielding copy & color change requests.

With other platforms, like WordPress, changing the page copy can be done, but design and layout require a developer.

With Webflow, you provide the visual interface to make and publish those changes without a developer.

If you need a basic template and nothing custom, use another platform and get the cheapest template.

If you need to create a custom-designed page (or website) that doesn't look like any other site online, without the costs of hiring or using a programmer - you want to use Webflow.

*"The rest of the company saw that almost every department uses Webflow for some aspect of their work today.

Product teams, legal, custom support, etc... Their bots & apps team used Webflow to create a big launch and use it to communicate this launch to their customer base.

Again, no product engineering is required. No waiting for programming resources to become available.

A small team within the company had the autonomy to jump onto Webflow, pull from their consistent branding, and put together a successful launch quickly."* - Switching to Webflow

Blog websites:

Personal blogs, company blogs, and media companies.

The latter (media companies) is better suited to something other than Webflow. Why? Webflow did not design its service to host the blogs of thousands of users like Medium.com does. Medium is a media site.

Beyond creating a media site, there are more reasons that a company what's to take their blog in-house. Discord is a great example.

*"But after several years, it was glaringly apparent that an upgrade was needed.

Discord as a brand was evolving. Not only did it want to grow its customer base, it also presented its brand consistently to that customer base.

The Medium platform had too many limitations from this perspective.

There needed to be more control. For example, they couldn't track metrics important to the company, and cross-promotional marketing was something they had zero say in.

If they created a blog post on Medium about their company, having Medium suggest another blog post from their competitors wasn't beneficial.

Suddenly, this was very apparent, and there was no solution within Medium to address these needs."* - Companies Who Use Webflow

If you're an individual or company with one dedicated blog per product, and you need to keep brand & voice control, then Webflow is perfect.

Ecommerce websites:

If you need complete design control over the Ecommerce store without programming resources, Webflow is the option.

That said, if the Ecommerce store is large with many custom options, Webflow won't give you that.

It's less powerful than something like Shopify from an Ecommerce custom options perspective.

But when you're building a premium brand and need granular level control, the value of Webflow becomes obvious - if you want to avoid relying upon engineering resources and want quicker turnaround times.

Examples:

Here are some great examples of that control.

Webflow features

Webflow features is a big topic.

To make sense of it, I've broken it all down into five categories:

New Features

*"Over last year (2022), Webflow had a total of 42 new (major & minor) features, enhancements, and updates to their platform. In addition, Webflow is consistently releasing at least one per month.

I've gone through all of the release dates one by one. Aggregated them and charted them for a better visual of how often this happens."*

Here are the results:

webflow number of feature updates per month

For some context, most companies release major features every six months. Cutting-edge tech companies reduce that down to 6 weeks. Webflow is pumping out at minimum one new feature every four weeks (sometimes more).

It's impressive.

I take a look behind the scenes by crunching the numbers. Here are Webflow's new features and their deep dive analysis.

Recent Features

*"This aggressive cycle of consistent (and significant) feature releases has translated in Webflow growing at a faster rate than any of its competitors (from a search traffic perspective).

They've grown organic (not paid) search traffic by 78% over the last two years (as sourced from the top search engine marketing tool).

That's people going to Google, searching for a fix to their problem, and ending up on Webflow's site as the solution."*

That's no joke.

The velocity at which Webflow releases features drives more users to seek out the platform (via search) as a solution than their competitors.

Popular Features

"I researched thousands of independent user reviews for Webflow, aggregating the most popular area's, and these are the two that consistently come out on top compared to Webflow's competitors."

Customizable:

Advanced Features:

According to user reviews, these are Webflow's most popular features and are head-and-shoulders above the competition in these areas.

And this makes sense.

Remember, Webflow embraces web design standards instead of hiding them.

Moreover, Webflow exposes you to them through a visual interface instead of limiting you behind a few drag-and-drop widgets.

Webflow can do almost anything visually that you can hand code in a text editor.

Top Wishlist Features

*"Webflow doesn't post a public roadmap, but they do have a public wishlist, and within that wishlist, they mention if a feature is currently in development.

Reviewing the top-voted features gives you a good indicator of what's important and how they think to approach their next set of priorities."*

User login and subscriptions.

This wishlist feature has been launched, known as Webflow Memberships, and you can use it today.

Multi-language sites and CMS fields.

Native multi-language support has been announced for launch in 2023. Until then, many other third-party language solutions work great.

Webflow desktop and offline applications.

A popular wishlist item is a offline version of Webflow. But I'm still determining if that'll ever happen. Taking a complex web application and turning it into a desktop application is no small task.

Webflow has many other feature requests that add more power for their users than this one, so I wouldn't expect this to happen anytime soon.

Real-time filtering and sorting on the website with faceted navigation.

Another popular wishlist feature, but real-time filtering and sorting, has yet to have a lot of feedback from Webflow staff, most likely because there are many free and paid third-party solutions that offer a ton of flexibility already.

CMS slider.

"Webflow does have an HTML slider element, but the problem is it's not bound to the Webflow CMS. This is what people are voting for on the wishlist."

Workflow automation.

Zapier is loved but also the bane of Webflowers. Why? It's price and the fact that it's a third-party service to rely upon.

Enter Webflow Logic.

This is Webflows native answer to replacing Zapier. Well, starting to replace Zapier 😄 It's still in Beta and isn't fully featured, but they are working on it. And you can use it today from within the Webflow Designer.

GDPR

European Hosting to comply with GDPR.

Something high on the wishlist but has yet to be enabled. Hosting your site on European servers. While you can't do it with Webflow hosting, you can export your site and host anywhere, including in Europe.

So, there is a solution, just not the friendly one-click solution everyone wants - and the reason beyond this wishlist feature.

Check out the top Webflow wishlist features and deeply dive into each one.

Current Features

"Fair warning, this is a deep dive. It'll give you a comprehensive overview of all the features and allow you to skim through for the specific features you're looking for."

I've exhaustively broken down Webflows current features into top-level categories so it's easier to zero in on exactly which feature you'd like to know more about:

Hosting
Support
The CMS
The Editor
Ecommerce
Integrations
Accessibility
The Designer
Webflow Logic
Marketing & SEO
Webflow DevLink
Figma to Webflow
Website Management
Webflow Memberships
Interactions and Animations

Webflow has a lot of features. And that's because HTML and CSS have a lot of features. Webflow exposes those features in a visual designer so you don't have to go through the painful process of learning every little detail before becoming productive.

That's the power of Webflow.

Add on top Webflow University for a straightforward approach to learning anything you need, along with the Webflow Forum when you have direct questions.

Webflow developers

What is a Webflow developer?

"Web designer vs. web developer: Webflow bridges the gap between the two." - Neither will exist in 10 years.

Traditionally in the web development process, the designer mocks up the site in something like Figma, then a developer takes that mocked-up design and hand codes it into a website.

Obviously a slow process.

So what ends up happening is that a company spends a budget on creating a new site, and then it sits.

It's never updated to reflect current market conditions.

It gets stale.

"Their last major update was six years prior. Unfortunately, they didn't have the time and resources to take on this challenge with their legacy setup." - Pacific Funds

"As a result, Getaround went eight years without any significant public-facing redesigns. Unfortunately, that means no major marketing initiatives for those areas of the website." - Getaround

The problem.

In traditional web development, there is a concept of separating different folks with different skills.

You'd have front-end developers, back-end developers, database administrators, designers, marketers, etc.

This describes the slow, expensive, and error-prone workflow from above.

After some time, the concept of a "full-stack" developer became popular in programming frameworks.

Now one person with the "full-stack" skillset could do all (or most of) the jobs themselves.

They could design (with the help of a design system), do the front-end development, work with the database, and do the back-end development.

This hugely sped up and lowered the costs of software development.

The problem today is that with almost every platform (other than Webflow), the notion of "full-stack" does not exist. So they are attacking the issue of the front-end developer and leaving the rest for you to figure out.

Enter the Webflow developer.

The Webflow developer is just another way of saying "full-stack" developer.

And Webflow takes it another step by offering all of this within a visual designer backed by many learning resources.

Webflow even offers a dedicated site with vetted experts that you can hire.

The solution.

With Webflow, anyone can have permissions added to create or update most any aspect of your Webflow site.

This creates quick turnaround times and doesn't bog down expensive engineering resources that, in the past, were required to change the simplest of things, like the copy on a button.

The line is blurring.

Marketers, designers, and whomever naturally learn web design concepts through Webflows visual designers.

No need for a handoff.

Handing off designs to developers.
Handing off marketing copy to software engineers.
Handing off database (CMS) requirements to programmers.

Builders.

The jobs of designers, developers, marketers, database administrators, etc., are converging, and we are ending up with a distinct hybrid role of "builders."

Summary

These building blocks help you understand if Webflow is the right solution for yourself, your team, or your agency.

They help you to learn if you can rely upon Webflow as a platform to meet your needs today and in the future.

They can help you provide the confidence that you're dedicating time, money, and resources to a mature company versus a startup that may disappear next year.

It can help you understand the level of help you can expect to get when you need it.

Hiring Webflow developers is cheaper than hiring and building a team of designers, programmers, and marketers - it also gets the job done more quickly.