Why do we make websites on WebFlow?

In Embacy we are making websites and landing pages, but we don't have any developers on our team. Designers build the websites themselves on WebFlow. Here's why.

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).

We’ve been using Webflow for three years now. It has a decent library of templates that could be customized to your needs. Native CMS makes it easy to manage.

CMO for PRAVO TECH, Case.one, 2nd.law

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 pros

Flexibility

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.

Classes

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.

Mobile-friendly

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.

Loading speed

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.

via Webflow Facebook group

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.

WebFlow workspace

Webflow cons

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.

Cost

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

Webflow advantages

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).

Cheaper

Although the plans are pricy, Webflow is still way cheaper than a payroll of an in-house front-end developer.

Speed

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.

Webflow drawbacks

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.

Simplified JavaScript

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.

Don't be a stranger

Subscribe and never miss a story

Got it! Now check your email
Oops! Something went wrong while submitting the form.

Also read

Design articles

Digital Design Digest for April

Case Stories

Heartcore: A Kind VC

Design articles

Digital Design Digest for February

Design articles

Visual Hierarchy In Web Design

embacy

Want to recieve our awesome stories?

Got it! Now check your email
Oops! Something went wrong while submitting the form.

© Embacy. 2020