Webflow — Does that even make sense?

Timothy Ovie
8 min readJan 14, 2021
Webflow homepage

Technology is continuously seeking ways to make things easier for busy humans on earth. Not only easier, but better too. If you could get the same work done by skipping the basics, (the kinds which are a total brainer) wouldn't you jump at that? The word "coding" to some folks interested in building websites is so frightening that they quit before venturing into it.

Webflow is one of the most superb creations ever. Since it's launched in 2013, it has outperformed both itself and its competitors in the market Being able to build things which need coding without actually coding? How awesome is that? Webflow is an online platform which lets you design and develop websites visually. It makes the process of designing, building and launching much easier than what you get using other website builders.

From the beginning of creating a website to its end, you don't necessarily need extra plugins to help you at each stage. It is the all in one package. You do all of these without needing to take a class in coding. Never mind the orthodox fellows who would say you're not a real programmer if you didn't write codes to build something. Who cares? Webflow has the vision to enable everyone to build for the web. No client will ask how you did back end development to come out with an amazing website for them.

Webflow comes with a Designer tool which translates your design choices into codes ready for production, a CMS tool used for creating content to be published regularly and a hosting platform.

No worries about a developer producing something different from what you designed and that's because you can do the development yourself right on the platform. Webflow's platform offers a world of possibilities to the professional website builder and the inexperienced business owner.

Webflow university homepage

To fully get the hang of its navigation system, you'd have to go through its tutorials. If you're new to coding, Webflow's university has got you. It is an impressive add-on to its platform. (Having some basic idea of HTML and CSS will be helpful). Lots and lots of helpful videos on everything on the platform are explained. First-time users have complained about Webflow being complicated to use. Do yourself a favour and get acquainted with it before you dive into the land of goodness. You'll be lost otherwise.

Once on Webflow's site, there is the "I don't write code" option. Selecting this makes the creation process even more simplified. You can begin creation on a blank canvas by dragging and dropping HTML elements and styling CSS properties or using predefined existing templates. (it has got over 100 of these).

various Webflow plans

Regarding Webflow's payment options, there are 2 plans; Site Plans and Account Plans.

details of the site plans

Site plans are for purchasing hosting and there are 4 of them.

There is a free plan where you use all features for free but with a sub-domain name. There is a basic plan where you're billed annually at $12 per month. This plan comes with an SSL certification, CDN as well as your domain name. The CMS Plan at $16 per month unlocks the static pages and gives you access to items created by the CMS. Charged at $36 per month is the Business plan. This is for larger businesses with more traffic. It has the same features as the CMS only at an upgraded level.

details of the account plans

Account plans is an advanced website building with added tools. It determines how much back end design tools will be available to you and how many projects you can work with. The free starter plan lets you work on 2 websites plus free staging. The Lite plan at $16 gives 10 projects along with code exporting tools. The Pro plan adds white labelling and site password protection. Webflow also allows for collaboration in case you're working with a team. The Team plan is billed annually at $35 per month.

All of these look pricey no doubt but considering what you're able to do on this platform, you can be sure you're getting your money's exact worth.

Why Use Webflow?

Webflow is the website builder's choice for several reasons. The most appealing is that it lets you execute projects quickly thus leaving you with more time to do other things. It accomplishes this by eliminating the hassle of coding. Professionals who know about website building know that this platform is good stuff. Let's look at even more reasons why you should use Webflow.

Webflow's Prototyping: Surely, pleasing your client as a web builder is at the top of your mind when executing a project. You want them to feel the website when you show them a mock-up design. Let's face it though, it is not going to be clear to a client how their website will turn out finally by merely looking at static mockups. Webflow's live prototyping through the staging link allows them to see what their website should look like at the end of the day. You get feedback from your client, make the necessary adjustments and continue the project without starting all over.

Webflow lets your client be able to edit their website after it has been launched. Through its CMS, they can change some areas of their website like the structure of the heading, paragraphs, links and images. They do this without being scared of breaking the website apart and without the need of installing extra plugins. You the designer makes sure of this in the setup stage.

It has an "in response" feature. If you've been building websites for a while now using other platforms, you understand that you have to create codes for website templates to fit different screens. There's the portrait, landscape, tablet screen and others to consider. A plus side to using Webflow is its template's response feature to any screen. It lets your project fit all types of the screen automatically without you running separate codes to make it do so. Thanks to this feature, switching layouts becomes easy with a click. Each template also has a description letting you know what type of site it is suitable for.

Webflow recently launched an E-commerce version for projects selling things online. It is still a work in progress but its completion will be envious. Some of its packages include product and inventory management, self-hosted checkout, custom carts and access to customer email. This function will help you take care of the ugly and boring parts of tax calculations, shipping regions and inventory management.

Hosting your platform on Webflow is highly advantageous. Its hosting platform is backed by Amazon Web Services (AWS) and Fastly. With this, you don't have to upgrade your hosting server to meet traffic demands. Its Content Delivery Network (CDN) allows your website to be served from a node geographically close to your visitors. No matter the traffic, your site's loading time is fast. Your website is always up to modern security standards with Webflow's Secure Socket Layer (SSL). All of these are at no extra cost. Talk about value for your money right? You also get automatic backup

Getting Started With Webflow

Webflow designer interface

Upon opening Webflow, you're faced with various tutorials to make your first-time experience as seamless as possible. If you're a first-timer, hold back your itchy fingers and do well to watch the videos. If you've got some previous experience, skip the tutorial process and dive in. This is how it'll be when you're in. You'll be looking at the Designer component of Webflow. Right in the middle is the canvas where creation happens. Make it come alive by dragging elements to it. You can change the layout of the canvas, add a form and insert media. However, you want it.

The Add panel at the top left corner is where the elements to be dropped on the canvas are. You'll find layout pieces, media elements and text blocks here. Hovering over any of these layouts will provide some description of them.

Then there's your Style panel where you're able to edit and style your dropped elements. Webflow lets you reuse classes by saving them for later. The Style panel has 4 tabs- Style, Settings, Style manager and Interaction.

Showing the way elements you've selected appear on the page is the Navigator. It acts as a preview and you can also rearrange anything here.

the CMS and pages panel on the designer interface

The Pages panel lets you move between pages.

Webflow's CMS is activated by clicking the stack icon on the left. On here you'll see different templates.

The Editor feature can't be accessed without logging into the Designer. Go straight to the Editor and a live preview of your content shows. Or you can visit your site and click on the Edit site button which appears when you hover over what you want to edit.

Before you get done building a website on Webflow with the free option, I bet you'll be hooked. Don't hesitate to explore even more options by starting a basic plan.

The Future is Now Here!

--

--

Timothy Ovie

Writer Of All Things • Technology Advocate • Community Builder • Philosophy •