Writing Better Web Code

Here’s something I find quite ironic. Many web designers like the simplicity that comes with web builders. Yet interestingly, the bulk of the web builders were created to eliminate the role of web designers and developers by automating the underlying code.

Funny, right?

But then again, there are web builders that are seemingly doing the opposite. Instead of reducing the role of designers and developers, they come with tools specifically optimized for such teams. Their principal objective is to facilitate design agencies with advanced tools.

How, you ask?

Well, Webflow is one of the prominent examples. And its role in the whole web design environment is something we’ll be looking into shortly. This Webflow review discusses all the critical features you need to know, the corresponding weaknesses, plus the cost of leveraging the platform for design.

But first, what exactly is Webflow?

Webflow Review: Overview

As you’ve probably figured out by now, Webflow is not your typical web builder.

Launched in 2013, this tool sells itself as a web design solution that combines professional code-free design tools with a powerful visual CMS, plus the user-friendliness of standard builders. So, think of it as a fusion between a web building solution like Wix and a CMS engine like WordPress.

Webflow

But, make no mistake. Webflow does not compete with the likes of Wix and Weebly. It offers a different set of features targeting a varying user demographic.

All in all, the most fascinating thing here is Webflow’s smart approach to the whole coding thing. It’s a code-free platform that happens to support code-editing for increased flexibility.

Confusing? Yes, I know. That’s why I took the time to keenly assess everything Webflow has to offer- from website design all the way to the content management system.

And here are the details…

Webflow Review: Features

Website Design

Webflow is a couple of things, no doubt. But its code-less web design tool has always been the principal offering here.

Well, it would be understandable if you confused it with Adobe Photoshop’s editing window before you start off. These two might look like twin siblings from far, but turn out to be quite different as you draw closer. To be more specific, you’ll notice that Webflow is an automation engine that largely operates on CSS and HTML.

Webflow designer

On it, you can comfortably introduce site elements then move them around accordingly without using code. The programming bit is handled by Webflow’s underlying framework, which systematically creates and edits your site’s code as you proceed with the design process.

If you’ve tried other code-less web designers, then you know that eliminating the programming bit comes at a cost of limited flexibility. Interestingly, Webflow’s design tool doesn’t follow this trend. So, I’ll be honest here and admit that it’s certainly one of the most advanced versatile website builders in the market.

Now, let’s face it. Advanced and simplicity are two things that are known to be like fire and ice when it comes to website management tools.

And true to form, Webflow is not one of the simplest builders you’ll find out there. Although its interface is exceedingly powerful, it’s seemingly complicated and might take some effort to learn the ropes accordingly.

For starters, Webflow doesn’t create the illusion of a completely codeless design process. So, don’t expect to jump right in and start drawing shapes on the canvas. Such an approach would substantially limit your customization ability.

Consequently, the system here cleverly embeds some aspects of coding as you build a website. If you intend to introduce a square mid-page, for instance, you’ll have to add a fresh <div> element, then edit its bottom-left and top-right points as zero along with fixed positioning.

What does this mean?

While you could go ahead and leverage Webflow without any programming knowledge, it takes a basic understanding of HTML and CSS properties to comprehensively capitalize on its sheer power.

However, if you prefer otherwise, simply tick against the “I don’t t write code” choice as you register. The system will subsequently expand its automation capability to handle a large part of the design for you.

That said, you can start off with a completely blank canvas. That’s the approach I prefer because I get to customize everything from the base.

A word of caution though. Leave this option to designers experienced with CSS and HTML. Otherwise, you risk mixing things up or getting stuck somewhere along the process.

The best approach for coding novices is taking advantage of Webflow’s pre-designed templates. It turns out the system offers more than 200 attractive templates, 30 of which are completely free. Paid ones, on the other hand, will cost you between $24 and $79.

After a thorough analysis of various themes, I noticed that they are noticeably different- with varying structures and features. Then the subsequent editing process allows you to change their elements’ backgrounds, color, layers, opacity, rotation, effects, position, size, etc.

Hosting

This goes without saying. That Webflow, like the bulk of web builders today, offers site hosting plus custom domains along with its design packages.

Webflow hosting

But, don’t expect the typical shared plan approach here. Webflow instead chooses to maintain the sites in-house, within what it describes as an “infinitely scalable server fleet”.

What does this entail?

Well, Webflow happens to own and control more than 100 datacenters across the globe. Combine that with CDNs ran by Amazon CloudFront plus Fastly- and the result is one solid system for hosting all types of websites.

Apart from handling any traffic size, Webflow guarantees optimal performance with milliseconds-long page loading times plus 99.99% website uptime. Its AWS-powered framework is particularly critical at providing a solid foundation for supporting comparatively large traffic loads from enterprise sites.

And since web security is imperative, Webflow’s hosting infrastructure is HTTP/2 compliant and users get relevant SSL certificates for their sites.

Content Management System

This is where content meets visual design. Webflow’s CMS essentially allows you to enter and manage your site’s content. In other words, you can add and edit any text or media on the precise page you’re building.

And if you’re managing an extensive web project with complicated structures, you’ll particularly appreciate the system’s ability to support manual adjustments of content aspects- including content types, team members, projects, etc- complete with customizable fields.

Well, all this is facilitated by CMS Collections- a feature that can be accessed right from the primary editor window. As soon as you generate a new collection, you can proceed past the type of content to define fields and introduce items. They are subsequently adopted as distinct web pages or lists integrated into pages you’ve created.

Webflow CMS

Confusing? Ok, consider this example- to establish a page displaying your organization’s workforce, you can introduce a “team members” collection, complete with items like social links, descriptions, names, photos, and employees’ names.

Now, that basically covers the CMS back-end. But, you know what? That’s not all. Webflow goes ahead to give WordPress a good run for their money through the Webflow Editor. This is where you spice up a published page with new content based on the pre-selected type.

In short, you get a comprehensive website that supports dynamic content like portfolios, articles, and blog posts- without installing additional plugins.

Collaboration

Admit it. Large web design projects are exciting. But, they can be increasingly cumbersome, especially if you fail to streamline all the parties involved accordingly.

Webflow has seemingly thought this through and makes a good attempt at facilitating collaboration for web design agencies with multiple team members. And there’s more- you can also invite other parties like clients, third-party designers, contractors, etc. Their roles and user capabilities depend on the corresponding privileges you set.

Webflow collaboration

If you’re dealing with clients, for instance, you can invite them to review their projects in real-time- with severely restricted usage privileges.

That said, I noticed that all site adjustments are reflected across the board in real-time. This helps collaborating team members avoid repeating tasks that have already been handled.

Overall Features

  • XML sitemap
  • SEO meta titles, descriptions
  • Image alt tags
  • Help Center
  • Community forum
  • Priority support
  • Email support
  • Custom domain name
  • Staging sites
  • Instantaneous updates
  • Custom URL redirects
  • 24/7 website monitoring
  • Quick load times
  • Google Domains Purchasing
  • Zapier integration
  • MailChimp integration
  • Google Analytics integration
  • SEO optimization
  • White label forms
  • CMS white labeling
  • Site password protection
  • Project organization
  • Website backups
  • Custom error pages
  • Custom favicon
  • Direct client billing
  • SNS components
  • Rich text
  • Lightbox
  • Background videos
  • HTML embed codes
  • Dropdown menu
  • Google maps
  • Sliders and carousels
  • Tab navigation
  • Customizable web forms
  • Website editor
  • Form submissions review
  • Open graph content
  • SEO tags template
  • CMS importation via Zapier
  • RSS Feeds
  • CMS API
  • 3D animations
  • CSS styling properties
  • Website templates
  • Optimized images
  • Web font families
  • Global Color Swatches
  • CSS3 flexible boxes
  • Custom code addition
  • Exportable code
  • CSS filters

Webflow Review: Pricing

Webflow’s pricing structure is seemingly complex for some users, while others praise its all-inclusive approach.

If you’re the type that hates numerous packages on a single platform because of the complex comparing process that comes with it, then you might find Webflow’s pricing plans a bit cumbersome. But, on the other hand- if you prefer multiple pricing options that suit different user levels, then you’re going to like how things have been organized here.

Now, to begin with, Webflow attempts to support three types of users- freelancers, solo designers, and design teams. Each category has its own set of packages with varying features.

Webflow packages

Here are brief descriptions of each plan:

For Freelancers:

Free Staging- Completely free.

  • 10 form submissions per month
  • 50 CMS items
  • 500 monthly visits
  • 2 static pages
  • Free webflow.io subdomain

Basic Hosting- $15 per month billed monthly or $12 per month billed annually.

  • 500 form submissions per month
  • 25,000 monthly visits
  • 100 static pages
  • CDN
  • Free SSL option
  • Domain creation

CMS Hosting- $20 per month billed monthly or $16 per month billed annually.

  • 3 content editors
  • CMS API access
  • 2,000 CMS items available
  • 1,000 form submissions per month
  • 100,000 monthly visits
  • 100 static pages
  • CDN
  • Free SSL Option
  • Domain creation

Business Hosting- $45 per month billed monthly or $36 per month billed annually.

  • 10 content editors
  • CMS API access
  • 10,000 CMS items available
  • Unlimited form submissions
  • 1,000,000 monthly visits
  • 100 static pages
  • CDN
  • Free SSL Option
  • Domain creation

Webflow for freelancers

For Designers:

Starter- Free.

  • Free staging
  • Client billing
  • Up to 2 concurrent projects
  • Free site building

Lite- $24 per month billed monthly or $16 per month billed annually.

  • Code exportation
  • Enhanced staging
  • Client billing
  • Up to 10 concurrent projects

Pro- $42 per month billed monthly or $35 per month billed annually.

  • Site password protection
  • White labeling
  • Project ownership transfer
  • Code exportation
  • Enhanced staging
  • Client billing
  • Unlimited concurrent projects

Webflow for designers

For Creative Teams

Team- $42 per month billed monthly or $35 per month billed annually.

  • Team dashboard
  • Site password protection
  • White labeling
  • Code exportation
  • Enhanced staging
  • Client billing
  • Unlimited concurrent projects

Large Team- Custom quote.

  • Bulk team member pricing
  • Team dashboard
  • Site password protection
  • White labeling
  • Code exportation
  • Enhanced staging
  • Client billing
  • Unlimited concurrent projects

Webflow for teams

Who Should Consider Using Webflow?

All things considered, we applaud Webflow for providing:

  • Free SSL certificate for security compliance.
  • Free integrated content delivery networks for reduced page loading times.
  • Advanced global website hosting in collaboration with effective systems like Amazon CloudFront and Fastly- for fast page loading speeds.
  • A versatile integrated CMS for dynamic content creation.
  • A staging environment for testing out and reviewing various website elements.
  • Optimized CSS and JS managers for advanced site management plus holistic control of animations and styles.
  • A flexible web building process starting with either a blank canvas or pre-designed templates.
  • A mobile-friendly web-design tool that produces exportable code in real-time as you build a site.

That aside, the drawbacks I’ve encountered along the way include:

  • Limited features for supporting ecommerce sites
  • A design process that heavily favors programmers
  • A limited number of website templates
  • A steep learning curve for beginners

Now, let’s bundle everything together. I bet you’ll agree that Webflow is an advanced web building system created for developers, designers, and agencies seeking increased versatility and control.

What are your thoughts?

Bogdan Rancea

Bogdan is a founding member of Inspired Mag, having accumulated almost 6 years of experience over this period. In his spare time he likes to study classical music and explore visual arts. He’s quite obsessed with fixies as well. He owns 5 already.