How to work productively on Webflow - Our experience in developing websites on Webflow
What is Webflow?
Webflow is a no-code visual canvas that’s used to make websites. It’s a SaaS application that allows you to build websites, landing pages, blogs, and online shops. Unlike other services, Webflow is very customizable. Somehow, it’s 18 times less popular than Tilda and 100 times than WordPress.
The workflow is simple: choose a layout template/start from scratch, drag and drop block here and there, pick whatever elements you need, upload some graphics, adaptives, and here it is.
Some of the Webflow’s features
Webflow University and responsive support — every issue we ever had we were able to solve through University or with the help of support right away;
Native CMS, resulting in simple and effective content management — it’s amazing for big websites, and it’s also possible to integrate it with your backend;
Huge template library for a variety of industries — Webflow features paid and free templates (we haven’t used them ourselves, but they might come in handy to you).
No items found.
We needed a tool that fits our agency’s tasks
We work by sprints, where one week is one sprint. That means we need to be able to design and make a website layout within just one week.
Here are some rules that help us to keep up with the pace:
The website should be made by the designer. Otherwise, some ideas could be lost in translation between designing the webflow layout stages;
Speed does matter, our incredible pace is our strong suit, and because of Webflow we manage to deliver high-quality results in this short amount of time;
We craft custom solutions, and that is why other platforms are not an option due to limitations in customization;
We do not make edits once the project is over, and so with Webflow, we teach clients how to use CMS so they are able to work with their website.
So, why Webflow? Because it’s quick, flexible, and robust.
Webflow versus other constructors
Webflow’s templates do not limit designers. Almost everything that our designer could come up with, could be executed on Webflow. For example, a horizontal scroll. But with other platforms, you’re always stuck with their limitations.
After Effects integration
Motion is a big trend in web design, and it’s only going to get bigger as we’ll have fewer and fewer technical limitations, and animation won’t impede the loading speed. In Webflow, thanks to Lottie and After Effects integration, it’s easy to take full advantage of the trend. You can make a complex animation in After Effects and then run it through a plugin to insert it as a .json file. First, you render it through the plugin, then import it to the Webflow project. Usually, it takes around 20-30 minutes.
In Webflow each element can be assigned with a class. For example. we need a header: color — blue, font Proxima Nova 48 px. We create this header once and then assign a class. Each time we need a header with the same style, we just create a new one and assign it to the class, style applies automatically. In other website builders, you would have to apply styles manually, taking away precious time that could have been used more efficiently.
Most of the traffic comes from mobile — on some of the projects that we had worked on, the share of mobile visitors was over 70%. It’s the reason why the mobile version is a significant part of any project in Embacy. Sometimes we redraw illustrations and rearrange some elements just for the mobile layout.
In Tilda mobile version contains all the elements from the desktop and you can’t remove or hide them. So you have to choose between a website that looks too stripped down on desktop or a website that seems overloaded on mobile. It’s restricted to moving elements within the canvas. These kinds of inconveniences impact loading speed dramatically. Webflow solves it with a “hide” button, so each element could be hidden. As a result, the mobile version looks better and works faster.
The two websites that look and function exactly the same could load very differently, depending on how well they’re developed. Exactly the same website would load 4.3 seconds if it’s made on WordPress, and 449 milliseconds if it’s built on Webflow. And the loading speed affects SEO too: a slow website would be way down in the results.
Integration with 3rd parties
Webflow supports a number of services like Shopify, Ecwid, and many others. There you can add e-commerce features, CRM, launch e-mail campaigns, and much more.
No items found.
Not so easy for newcomers
It gets longer to get into Webflow as it is a lot more complex than its peers. The flexibility comes at a cost, there’s a lot more to the features here than just tooling around with some templates.
We pay $70 a month so that two members of our team can work in Webflow simultaneously. The basic plan is $18 and there is also a plan for $12 but it is very limited. Webflow alternatives are way cheaper.
Webflow versus custom coding
Code without coding
In Webflow, the designer shows the app how the blocks are located on the canvas, and the app writes code for it. This code can be exported and be used on another hosting. And it’s a valid W3C code, meaning two things: it’s got great load speed, and it’s easy for a developer to work with it (unlike the code on other constructors, which makes developers scratch their heads).
Although the plans are pricy, Webflow is still way cheaper than a payroll of an in-house front-end developer.
Custom coding a whole website takes forever. Designing, coding, testing everything, ironing out the details, etc. Even with the most straightforward process and an experienced in-house developer, coding everything is still the most time-consuming option.
Designer is responsible
The designer and the layout designer is the same person which means:
one person is responsible;
the result turns out exactly as it was intended;
there is no waste of time for discussions and occasional arguments between the designer and the developer.
It’s upsetting when we make a design without control over its development. Right now, we have two battles with our clients’ front-end developers.
Technical constraints of Webflow
If you know how to code, they are non-existent to you. If not, you will be limited to what Webflow can offer by default. Search bars, sliders, complex animation will require extra knowledge.
If you are not hosting on Webflow, but have exported the code to your hosting, it will be difficult to make adjustments to it, because it will be simplified.
One screen for desktop and one screen for mobile
For desktop and mobile, you need to use only one resolution and the rest will be based on it. You can live with Webflow, but there are better tools.
What’s not so good
No edit preview. Just put it in production and see how it works;
No edit log. At least for the current version. Now the changes look like “something has changed on the main page”;
There is no way to roll back these changes when they are hanging in the draft;
There is no way to roll back these changes when they are hanging in the draft (staged for publishing);
The ability to change pages that are automatically generated based on content is pure evil. It changes content incorrectly, it looks weird. Webflow alerts that it is going to publish them. And finally, it doesn’t save them (fortunately).
To sum up
We use Webflow to build custom solutions fast.
We would recommend Webflow, if:
it is important to create unconventional results quickly;
you have very skilled designers and you’re weak on the front-end part;
you want to try something different from Tilda or Readymag.
We would not recommend it, if:
you have great front-end developers;
no one even knows what the design is and a Tilda landing still converts just fine.
No items found.
No items found.
No items found.
No items found.
Don’t miss out
Sing up to our newsletter to stay up-to-date
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.