Webflow Responsive Web Design Tool

Why Webflow Is the Best Web Design Program Right Now

Disclaimer: I have no current (or past) paid affiliation with Webflow. But I've been using the platform for about a year now, and I highly recommend it.

It seems like website builders are about a dime a dozen these days. And to be perfectly frank, the vast bulk of them are just awful.

Sure, they work just fine for the average inexperienced user to quickly get a personal website up and running … but for anything even remotely resembling professional use, you're better off looking elsewhere.

Webflow is a r a re exception to this rule. Built with a "code-first" philosophy, Webflow is an all-in-one web design tool that allows users to design, build, and launch responsive websites visually.

After having used the platform consistently for the past year, and after having tried many others, I feel confident in saying that Webflow is without a doubt the single best site builder currently on the market.

Is it perfect? Of course not. There are several things I'd like to change about the software if I had the chance, and I mention some of them below.

But regardless, Webflow is a fantastic tool that can help designers bring their mockups to life — without needing to enlist the help of a front-end developer or rely on poor quality DIY software.

What Is Webflow?

Launched in 2013 as a graduate of Y Combinator's startup accelerator, Webflow is a drag-and-drop tool for creating performant, responsive websites without the use of code.

It attempts to fill the space between DIY software like Wix and Squarespace, traditional content management systems (CMS) like WordPress, and actual front-end web development.

And it's designed to surpass them all in terms of ease-of-use, flexibility, and performance — and in this regard, it's largely successful.

Here's how it manages to do all of that.

Designer and Editor

The Webflow Designer is a Photoshop-like interface that allows users to automatically generate semantic markup by dragging and dropping HTML elements onto a canvas and styling CSS properties.

In contrast to the notoriously horrendous markup produced by DIY site builders and all-in-one WordPress themes like Divi, Webflow exports W3C-compliant code that can be instantly deployed as-is or handed off to developers for further customization.

The Designer interface is admittedly complex — especially for those without any prior knowledge of basic development. But overcoming this initial learning curve will be hugely rewarding in terms of what it can teach these users.

For instance, designing in Webflow requires (and encourages) thinking less like a graphic designer and more like a front-end developer.

Instead of "absolutely positioning" a bunch of elements onto a blank canvas, users create <section> and <div> elements, define CSS classes, and utilize modern layout modules like flexbox and grid. All with a visual WYSIWYG editor.

For this reason, designing in Webflow — combined with the excellent tutorials on Webflow University — can serve as an excellent stepping stone for designers looking to break into front-end development.

What's more: The platform also comes equipped with a pared-down Editor that can be used by clients to make basic edits to their website … without breaking the entire site structure in the process!

Webflow CMS

While launching a blog in Webflow might take more upfront work than it would with a native blogging platform like WordPress, the result will likely be well worth the effort.

Because WordPress, for all of its strengths, has never really excelled in terms of user-friendliness or ease of customization.

Users are often locked into their theme's default templates and styles. And so, customizing individual elements like post fields requires either adding third-party plugins or manually rewriting the underlying template files.

Webflow CMS, by contrast, bills itself as "the world's first visual content management system," allowing designers to define the structure and style of their dynamic content without messing with plugins, PHP, or databases.

This content can be hand-created, imported from a .CSV file, or added through Webflow's CMS API.

Users can then create Collections, or reusable templates for dynamic content types. For example, a website can feature collections of blog posts, authors, clients, projects, products, categories, and so on.

It's like having all of the upsides of using a database — without actually having to manage a database yourself!

Interactions 2.0

In my opinion, this is coolest feature that Webflow currently has to offer … even though it can sometimes be one of the more frustrating.

Initially released in late 2017, Interactions 2.0 allows designers to create custom CSS transitions and JavaScript animations based on page state and/or user interaction.

It is, in essence, an attempt to greatly reduce the headache of JavaScript DOM manipulation — and for the most part, it does this well.

Creating Webflow interactions is far easier (and faster!) than writing custom JavaScript animations. However, even after the recent update, the experience isn't the most intuitive thing in the world.

If you've never worked with code before, especially JavaScript, this feature will likely present you with the greatest pain point while learning Webflow … so come prepared for that.

Nevertheless, you can create some pretty incredible animations with this tool, if you take the time to learn it. (Just check out the landing page advertising Interactions 2.0!)

While I can't say I'm 100% comfortable using the Interactions panel, I'd still much rather work with this than write my own on.Click functions.

Deployment and Hosting

Webflow hosting is provided by Amazon Web Services (AWS) cloud computing platform and facilitated by a global content distribution network (CDN) powered by Fastly and Amazon Cloudfront.

The result is lightning-fast page loads and the peace of mind that comes along with never having to worry about server maintenance or updating PHP.

All hosting plans come equipped with free SSL certificates, HTTP/2 compliance, site search, form control, password protection, an automatically-generated sitemap, and automatic backups.

The main drawback to all of this? Hosting through Webflow isn't cheap— although it's still less than what you would pay with other managed hosting providers like WPEngine and Kinsta.

The "Basic" hosting plan costs $15 per month and includes most available features. But in order to use Webflow CMS, you'll have to fork over the extra cash for the $20 per month "CMS" hosting plan.

On the bright side, however, if you find that none of these plans work for you (or if you just don't want to spend the money), it's no problem!

Because all websites are coded in basic HTML, CSS, and JavaScript, you're not locked into a certain platform or theme. Just download your site files and deploy to whichever hosting provider you'd prefer.

Ecommerce (beta)

The latest — and most hotly-anticipated — addition to the Webflow suite of tools, Ecommerce was released as public beta in November of last year.

Distancing itself from such comparatively restrictive platforms as Shopify and WooCommerce, Webflow Ecommerce allows for full customization over all visual components of a typical online store.

This includes product pages, galleries and category pages, shopping carts, and checkout pages. With Webflow, you're not limited to any sort of pre-designed Ecommerce structure!

Achieving this same level of customization with a tool like Shopify would require spending thousands of dollars per month for a Shopify Plus plan and then taking the time to familiarize yourself with the platform's Liquid templating language.

The platform also provides a simple solution for managing complex administrative functions like defining shipping regions, calculating taxes, and managing inventory and fulfillment.

Because it's still in beta, Webflow Ecommerce is still missing some core functionalities that might be expected from a full-featured Ecommerce solution — PayPal support is still lacking, for example.

But this is on the docket. Other future planned developments include support for digital products and subscriptions, customer accounts, and extensive product variants.

The Final Verdict

Standing far apart from the glut of low-quality DIY design software currently on the market, Webflow provides a powerful solution that is suited to most professional web design and development needs.

Such features as the Webflow Designer, CMS, and Ecommerce allow users to easily create full-featured, performant websites — without needing to learn code or contract with developers.

The platform does have its drawbacks, which include a less-than-intuitive animations interface and limited Ecommerce functionality. But even still, it is the best design platform currently on the market and one that's well-deserving of your attention.

This is true regardless of whether you're a professional designer or simply a business owner searching for a more powerful, customizable, and robust solution for your web presence.

Still not on board? That's fine. Head on over to www.webflow.com, and try it out for yourself!

If you are a small- to medium-sized business owner looking to leverage the power of Webflow for your business, head on over to bit.ly/asdnewproject to request a free quote for your next design project.