Why do we make websites on WebFlow?

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">How to work productively on Webflow - Our experience in developing websites on Webflow</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><div><p class="h2-style">What is Webflow?</p></div></div></div>

<div class="p-lr mt-32 mb-156"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><div><p class="h3-style">Some of the Webflow’s features</p></div></div></div>

<div class="p-lr mt-24 "><div class="g-7-15"><div class="transp-bl"></div><div><ul role="list"><li class="h4-style">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;</li><li class="h4-style">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;</li><li class="h4-style">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).</li></ul></div></div></div>

<div class="p-lr mt-56"><div class="g-7-15"><div class="transp-bl"></div><div><p class="h3-style">We needed a tool that fits our agency’s tasks</p></div></div></div>

<div class="p-lr mt-32 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><div><p class="h3-style">Here are some rules that help us to keep up with the pace:</p></div></div></div>

<div class="p-lr mt-24 "><div class="g-7-15"><div class="transp-bl"></div><div><ul role="list"><li class="h4-style">The website should be made by the designer. Otherwise, some ideas could be lost in translation between designing the webflow layout stages;</li><li class="h4-style">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;</li><li class="h4-style">We craft custom solutions, and that is why other platforms are not an option due to limitations in customization;</li><li class="h4-style">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.</li></ul></div></div></div>

<div class="p-lr mt-48 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">So, why Webflow? Because it’s quick, flexible, and robust.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><div><p class="h2-style">Webflow versus other constructors</p></div></div></div>

<div class="p-lr"><div class="g-7-15 mt-32"><div class="pt-13"><p>Webflow pros</p></div><p class="h3-style">Flexibility</p></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">After Effects integration</p></div></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">Classes</p></div></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">Mobile-friendly</p></div></div></div>

<div class="p-lr mt-24 mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">Loading speed</p></div></div></div>

<div class="p-lr mt-24 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">via Webflow Facebook group</p></div>

<div class="p-lr"><div class="g-7-15 mb-24"><div class="transp-bl"></div><p class="h3-style">Integration with 3rd parties</p></div></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15 mb-24"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Webflow cons</p></div><p class="h3-style">Not so easy for newcomers.</p></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15 mb-80"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr mt-24 mb-104"><div class="g-7-15 mb-80"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><div><p class="h2-style">Webflow versus custom coding</p></div></div></div>

<div class="p-lr"><div class="g-7-15 mt-32"><div class="pt-13"><p>Webflow advantages</p></div><p class="h3-style">Code without coding.</p></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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).</p></div></div></div>

<div class="p-lr"><div class="g-7-15 mb-24"><div class="transp-bl"></div><p class="h3-style">Cheaper</p></div></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15 mb-24"><div class="transp-bl"></div><p class="h4-style">Although the plans are pricy, Webflow is still way cheaper than a payroll of an in-house front-end developer.</p></div></div></div>

<div class="p-lr"><div class="g-7-15 mb-24"><div class="transp-bl"></div><p class="h3-style">Speed</p></div></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15 mb-24"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr"><div class="g-7-15 mb-24"><div class="transp-bl"></div><p class="h3-style">Designer is responsible</p></div></div></div>

<div class="p-lr mt-24"><div class="g-7-15 mb-24"><div class="transp-bl"></div><p class="h4-style">The designer and the layout designer is the same person which means:</p></div></div></div>

<div class="p-lr mt-16 "><div class="g-7-15"><div class="transp-bl"></div><div><ul role="list"><li class="h4-style">one person is responsible;</li><li class="h4-style">the result turns out exactly as it was intended;</li><li class="h4-style">there is no waste of time for discussions and occasional arguments between the designer and the developer.</li></ul></div></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr"><div class="g-7-15 mt-32 mb-24"><div class="pt-13"><p>Webflow drawbacks</p></div><p class="h3-style">Technical constraints of Webflow</p></div></div>

<div class="p-lr mb-80 mt-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr"><div class="g-7-15 mb-24"><div class="transp-bl"></div><p class="h3-style">Simplified JavaScript</p></div></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr"><div class="g-7-15 mb-24"><div class="transp-bl"></div><p class="h3-style">One screen for desktop and one screen for mobile</p></div></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div></div>

<div class="p-lr mt-24 mb-56"><div class="g-7-15"><div class="transp-bl"></div><div><ul role="list"><li class="h4-style">No edit preview. Just put it in production and see how it works;</li><li class="h4-style">No edit log. At least for the current version. Now the changes look like “something has changed on the main page”;</li><li class="h4-style">There is no way to roll back these changes when they are hanging in the draft;</li><li class="h4-style">There is no way to roll back these changes when they are hanging in the draft (staged for publishing);</li><li class="h4-style">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).</li></ul></div></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">We use Webflow to build custom solutions fast.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">We would recommend Webflow, if:</p></div></div></div>

<div class="p-lr mt-24 mb-56"><div class="g-7-15"><div class="transp-bl"></div><div><ul role="list"><li class="h4-style">it is important to create unconventional results quickly;</li><li class="h4-style">you have very skilled designers and you’re weak on the front-end part;</li><li class="h4-style">you want to try something different from Tilda or Readymag.</li></ul></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h3-style">We would not recommend it, if:</p></div></div></div>

<div class="p-lr mt-24 "><div class="g-7-15"><div class="transp-bl"></div><div><ul role="list"><li class="h4-style">you have great front-end developers;</li><li class="h4-style">no one even knows what the design is and a Tilda landing still converts just fine.</li></ul></div></div></div>

Why do we make websites on WebFlow?

You might also like