Blog Software Development What is Webflow and how did we build an animal-saving website with it?What is Webflow and how did we build an animal-saving website with it?
We like trying new things. That is why we took it upon ourselves to see if websites built with a no-code tool can compete with those built with conventional coding. In this article, we will tell you all about our experience with Webflow and how we used it to create a life-saving landing page for pet owners.
Table of contents
What is Webflow?
Webflow is a no-code tool for web design. It allows you to build functional, interactive websites without writing even a single line of code. And while you could say the same about Squarespace or Wix, Webflow allows you to export your website as HTML code and use it on an external server.
What did we use Webflow for?
To learn more about what Webflow is and what it’s capable of, we came up with a little challenge for ourselves: we decided to use Webflow to build a landing page that we would submit to Awwwards.com — a platform where the world’s best designers show off their work. We’ve had some recent success with conventionally-made websites, one of them being about the color Very Peri and the other about Akzidenz-Grotesk typography. Both of them have been recognized and received Honorable Mentions from Awwwards.com.
We’ve learned that the secret sauce to creating a great web design is to tell a story about something that we are passionate about. That’s how we came up with the idea for the Plantarium — a digital place for pet owners. It helps to recognize every household plant that could be toxic for your pets. Was Webflow the right tool for the job?
Our experience with Webflow: its advantages and the things we liked
The first advantage of Webflow is pretty obvious: you don’t need any knowledge of HTML and CSS to build and publish a website. While this was to be expected from a no-code tool, we were under the impression that Webflow was created with graphic designers in mind. After all, they are the ones that might want to build product pages without the need to involve software developers. Or, build a website on their own and send them to the developers as code, thus saving everyone’s time.
We appreciate how Webflow reminds users of every available CSS property and its values, be it flex or grid property. Sometimes, for a PHP developer, it’s difficult to remember all of them, so this functionality gives Webflow an advantage over other solutions.
Of all the advantages of Webflow, there was one that came as a surprise: the delivery time of the final product. Building the Plantarium page took about 40 hours in total, and that included learning how to use the Webflow tool from scratch!
Pros and cons of Webflow
This was the first time that we used Webflow or even developed a website with no-code technology. The pros and cons of Webflow here are our subjective views, based on this limited experience. It’s entirely possible that some of the problems listed under the cons could be overcome by someone with more experience with this tool.
Webflow advantages:
- A big advantage of Webflow is that it allows users to assign various roles. For example, you can assign the role of “content editor” to let your copywriter work on the website’s copy. Normally, you would need to involve either a designer or a front-end developer to do that.
- Webflow offers a well-made knowledge base, called Webflow University. Their videos explain how to use Webflow in an informative and fun manner (source).
- Short delivery time: building the Plantarium page only took us about 40 hours!
Webflow disadvantages:
- Adding a new feature written in JavaScript comes with some limitations. You can incorporate your feature, but you won’t be able to see it in a preview. It will only be visible once your website is up and running.
- If you are using the free version, and you want to integrate it with a CMS (such as WordPress) you cannot do it, unless you’re on one of the paid plans. For freelancers, the cost of maintaining multiple websites can grow very high very quickly, as the hosting of every website would require separate payments.
- You cannot import existing code to Webflow, even if the code was generated with Webflow itself. If the website is already connected to your CMS, then making any changes and adjustments is going to be problematic. So far, you can only do that if you store your website as a Webflow project. The ability to turn your projects into code is one of the biggest advantages of Webflow. Too bad it doesn’t work the other way around.
Our thoughts and tips on how to use Webflow
In order to learn how to use Webflow, it’s nice to have some basic skills in web design and some spare time to spend in the Webflow University. With that knowledge, you can build a simple landing page using the available elements, such as basic HTML tags or more advanced pre-prepared blocks like slider, sticky nav, or hero. Even if only one member of the team is using this tool, the rest can see the website’s preview via the read-only access link.
Once your website is done, you can publish, and republish it, anytime you want on servers provided by Webflow, for free. Also, Webflow allows you to export your website as complete code, connect it with your CMS, and host it on your own servers. Unfortunately, in order to do so you will need to purchase a paid plan.
According to the score given by Google Lighthouse, the code exported from Webflow is of good quality, and the reason for that lies in the tool itself (source). As we were learning how to use Webflow, we noticed that it compels the user to follow good practices, for example, it asks for an alt text for every image.
The website that we built received high marks from Awwwards users, and was nominated for an Honorable Mention. We thoroughly enjoyed our experience with Webflow: it’s an intuitive, powerful tool that gives users the freedom to build any websites they like. We are curious to see how it compares to its competition, but one thing is clear: if this is what the no-code revolution looks like, we’re all for it!
Share this article:
