Webflow - A no-code web development platform that I fell in love with

This post is in no way sponsored or endorsed by Webflow.

The joy of finding a platform that allows you to quickly and easily build websites, with enough flexibility for the range of websites you build, is incredible. Our standard approach was, and sometimes still is, to build custom solutions for our clients. This worked well for projects that had specific requirements and budgets that justified a custom solution. However, this left us in a position where we weren't able to support the needs of smaller projects without a larger than needed overhead. We refused to use WordPress due to the tedium that is their platform and we tried many different platforms — SquareSpace, Wix, Contentful, along with several others.

On discovering Webflow a few years ago, we had dismissed it. Either because we were too high and mighty with our own solutions, or it was just too early for the platform to be worthwhile for us. It is likely the former, but I like to believe it could just as likely be the other.

A few years later we stumbled across it again, after it raised a whopping $72 million in funding, and we gave it another try. Straight away, it was obvious that the money was put to good use. The platform seemed to be easy to use for both us and what we would expect for our clients, it was expansive, not expensive, and allowed us to turnaround projects much more quickly than we were used to. All that free time was going to become dangerous.

Before using it for client projects, we started experimenting with it for our own website. When we were ready to remove the training wheels we asked a few clients if they would be happy for us to migrate them from our legacy systems.

The system was such a pleasure to use that it took me back to when I started learning how to code. Creating the layouts, although no special feat when using the tools we were accustomed to — raw code — gave me such joy because it was just so intuitive.

After being comfortable enough with it and confirming that it was a good solution for our clients, we decided that this will now be the platform of use for projects that don't require custom solutions.

Why share our secret sauce?

Although this platform has become such a valuable tool for us, it doesn't make sense to hide it away. Having people jump the WordPress ship and migrate to, in my opinion, a better platform benefits us. The more the platform is used the more it will be developed, the larger the community will be, and the better the industry will be for everyone. Most importantly, we believe that clients deserve better than what they receive with many solutions being sold to them and want to promote those solutions.

It's also unlikely that potential clients will decide to attempt to build their websites themselves. If this were the case then these clients wouldn't be interested in our services and choose to do it themselves, regardless of the platform. Sometimes, this is what we would suggest to smaller businesses that are better of investing their money on more important areas of their business.

“I can feel web developers shudder at the thought of a no-code web development platform, bringing them back to Adobe Dreamweaver back in the early 2000's.”

So, what is Webflow exactly?

Webflow is a web development platform that can be used to build websites without writing any code. I can feel web developers shudder at the thought of a no-code web development platform, bringing them back to Adobe Dreamweaver back in the early 2000's.

This was my reaction to Webflow at first... How could it build something better than what I can build without having to write any code? Well, it does, and it makes my life a whole lot easier.

Now, although Webflow supports all standard functionality that a website or an online shop require, it also allows for more technical features. With the possibility of embedding custom scripts and markup to whichever part of a web page, or overall website, this means that some interesting results can be done.

Some interesting projects we created in Webflow

Since starting to use it about a year ago, we've created at least 15 projects on it. These projects have varied quite drastically. From simple landing pages that can be put up in a day to custom apps being embedded into a page to process XLS files and render the data.

Below are some examples of the different problems we've managed to solve with Webflow.

Landing Pages

View landing page

Our client was launching a digital marketing campaign that would direct users to different landing pages. These landing pages would offer the users PDF resources or a free consultation call after filling in a form. We embedded a MailChimp form onto the landing page, and provided the client with options to create new pages as they please that connected to different MailChimp forms and different resources for the user. The client could now create as many campaigns as they pleased and direct users to different resources, while collecting their information.

All this, hosted on a subdomain of the client so as not to affect their existing website.

A landing page.
A landing page

Embedding a price calculator

View calculator

We had built a custom solution for our client. Part of this project was a price calculator where users can customise options and receive an accurate quote. The prices were supplied by the manufacturer as XLS files and contained up to 50 options per product. The job of inputting this data became tedious and so we built a processor that would take the XLS file and spit out processed data that can be rendered in the calculator.

All that has nothing to do with Webflow. But since we were upgrading their calculator, we thought it would be a good time to move the project over to Webflow. Not wanting the client to manage their content on two separate systems, we used the Webflow API and had all data managed in the Webflow editor.

The client would upload the XLS file to the product page, a script in the product page would load the app that was hosted on AWS, that app would call a Lambda function that would fetch the XLS file from Webflow and process it. The resulting data was then rendered by the app which was rendered in the product page.

It seems overly complicated, but it was the most simple solution and resulted in the client only needing to upload a file when creating the product in the Webflow editor.

The calculator app rendered in the product page

Laying out a weekly schedule for a gym

View website

Our client has a regular schedule of classes at their gym. The requirements were to present the schedule to their customers and allow them to book through the system. A booking system was found that provided booking URLs for the different classes. The goal was now to create the weekly schedule without complicating things for the client.

Each class obviously had a start and end time. The opening hours also had a start and end time. The solution on how to position and size the class based on the time and length of the class was simple — find the offset from the start time to the opening hour and calculate the percentage of that to the number of hours the gym was open.

An explanation: If the gym opens at 8am and closes at 8am, that's 12 hours. If a class starts at 10am and is 1 hour long this means that it starts 2 hours after opening (which is 16.66% into the opening hours) and 1 hour is 8.33% of the opening hours. This means that the class needs to be positioned at 16.66% from the top and have a height of 8.33%.

This was handled by less than 20 lines of code, and if our CTO had written the script, it would have been far fewer.

The client then had to create the schedule for each day and define the start and end time of each class. The system positioned everything automatically.

The schedule with classes laid out appropriately

What to do with all this spare time

I'm hoping that this spare time will allow me to write more articles on Webflow.