A Few Prerequisites About Webflow

What is Webflow?

Webflow is a web design software. To put it simply, this tool lets you customize every pixel of your site and access all dimensions of your website without having to code anything. You have complete control over your website's visual appearance without being forced to touch HTML, CSS, and JavaScript—those mysterious terms that give you control over a site's presentation.

But thanks to Webflow and its "design first" philosophy, there's no need to stress about coding. Basically, with its interface, you just need to drag and drop the elements you want to integrate into your website and build your pages. As you've probably figured out, Webflow lets you customize your website with virtually no limits and without the constraints of code!

If you've ever used Adobe software, you'll quickly notice that its interface is somewhat similar to Webflow's: it's ultra-visual for creating and launching your site! You decide where to place your elements, then you can modify sizes, colors, insert interactions, animations, etc...

But that's not all! Webflow offers, among other things, a CMS (Content Management System) to its users, allowing them to create and manage a blog, and an API (Application Programming Interface) that lets you connect Webflow with tons of other applications (like Mailchimp, for example). And recently, Webflow has added an e-commerce section, also very flexible in terms of customization.

💡 Note: If you want to build an e-commerce site as massive as ASOS, this isn't quite the solution you need yet! At this stage, Webflow e-commerce is better suited for selling digital products.

Who is Webflow For?

Since Webflow's goal is to offer software that lets you create your website without getting your hands dirty while still having very clean code, the software adapts to everyone! Whether you're a beginner or seasoned expert, Webflow is an excellent tool if:

• ‍You have little experience and knowledge but want to launch your customized website without coding!
• ‍You're a developer and want to, for example, run tests or trials for your clients, or quickly create websites simply.

In conclusion, Webflow is for... pretty much anyone:

• ‍Professionals like developers or UX/UI designers, and users with strong skills, or anyone ready to dive in!
• ‍People wanting to customize their websites from A to Z without restrictions but who aren't code experts.
• ‍Collaborators who want to share creations with each other or with clients, thanks to the ability to work as a team on Webflow.

Why Use Webflow?

Challenges with Other CMSs

Whether you're an expert or beginner, it's important to understand the problems commonly encountered when creating a website:

• ‍Separation between visual and code: Website design takes time partly because the visual is first conceived and created using a wireframe. Then developers code the website from this wireframe. There are therefore multiple creation cycles to consider. This design-technical separation also poses problems in optimizing site performance—a design that doesn't integrate technical performance considerations can result in a "pretty" but very slow site. ‍
• Code complexity: Coding isn't accessible to everyone. Certain interactions are particularly complex to implement, like animated transitions, and require technical knowledge. Learning to code is clearly useful and important in today's digital world, but it takes time, and with Webflow you can skip it! ‍
• Screen adaptation: People who want to create a website must also ensure it adapts to different screens. Thanks to Webflow, you can easily verify that your project adapts to different devices and even modify your mobile version without touching the desktop version. This allows perfect optimization of user experience and performance very simply. ‍
• Plugin multiplication: On most CMSs, you can't escape plugin hell! First, they slow down your website, then they're often the source of security vulnerabilities, and finally they require regular updates (almost daily when you have many). Conversely, on Webflow, everything is integrated.

As you've understood, Webflow is THE solution for solving the problems we commonly face when designing a website.

Ease of Use

Professionals will tell you that creating a website doesn't happen overnight. There are multiple design phases and different tools: whether for prototype development, coding, or site design and graphics.

💡 Note: When we talk graphics, we distinguish:

• Elements created outside of Webflow
• Site style

But with Webflow, this entire process is simplified!

It provides you with an all-in-one design and development solution. This will save you time and therefore money. Not bad, right? Specifically, Webflow makes your life easier through:

• ‍Its interface that lets you create your design directly in the tool and "skip" the technical integration part since the two merge perfectly. ‍
• Its CMS that lets you create custom collections—databases containing a type of content, like blog articles.

💡 You can then design templates that will facilitate publishing your future articles. You'll only need to insert your article into the collection and it will format automatically. Integration time for a 4,000-word article? 3 minutes. Yes, you read that right.

• ‍Its Editor tool that lets you create and modify content directly on your pages or simply control your SEO. ‍
• CSS classes that, once saved, let you apply a particular style to one or more elements on your website (the "Selector" section). It doesn't look like much, but honestly, this is fire! 🔥

Webflow Features

Visual Web Design Tool

Webflow has a design interface somewhat similar to Photoshop. Very practical—users only need to drag and drop HTML elements they're interested in into a container (the box model) and customize them using CSS properties.

Be careful though—the idea isn't simply to scribble a random shape in the middle of your page. It's an HTML and CSS automation tool—you don't need to worry about the code aspect since the Webflow system handles it automatically for you.

But to add, lay out, and customize your elements, you need to insert a container—a <div> element—then use CSS classes to style your content, as well as certain modules like Flexbox for your layout.

You'll see, you'll quickly become familiar with the different terms. Of course, if you're used to HTML and CSS, Webflow shouldn't pose much trouble. However, if you know nothing about it, you can always indicate to the tool during registration that you're not accustomed to development. Webflow will then automate an important part of the tool and you can rely on templates.

Of course, not all parameters are displayed via the design tool. Imagine the visual clutter that would create. That's why Webflow simplifies your command center by simplifying terms and helping you with small icons allowing you to display and/or hide certain functionalities.

Obviously some will say Photoshop is a complicated tool, but here we're talking about a tool that allows a single person to handle artistic creation of a website, its development, technical optimization, deployment, and maintenance. Yes, you need to learn to use the tool, but believe us when we tell you that website design has entered a completely new paradigm with this type of tool. Really.

Content Management System (CMS)

Like WordPress, Webflow offers a CMS that can manage a blog section and display dynamic content. The difference is that with WordPress we're often limited by default models and styles. Customizing elements is difficult, even impossible when you don't know how (when you don't code).

On Webflow, you can modify any element directly on your pages. The small revolution here is that you can define custom content categories, like "blog articles," "team members," etc... You determine the structure and style of your elements, and all without any plugins!

Created manually or imported, these contents then become part of CMS collections. It's like having a database where you can group all your content under different categories, but without having to manage it. Interesting, right? You must first create your collection to define fields and add your elements.

💡 The Webflow CMS can go much further—this tool is so powerful that it allowed us, for example, during one of our small acquisition experiments, to create 80 different landing pages from a simple Excel file in seconds, perfectly branded and laid out. 🤯

Webflow Hosting

Webflow hosting is under Amazon Web Service (AWS) cloud computing. Ultra-fast, your content can also be easily distributed to any geographic zone thanks to its CDN (global content distribution network) provided by Fastly and Amazon Cloudfront.

You can launch with peace of mind since you won't have to worry about server maintenance or various updates. Additionally, Webflow hosting comes with included SSL certificates, strong password security, automatic backup, HTTP/2 compatibility, etc...

You can start creating your website for free by designing your prototype using the webflow.io subdomain and testing the entire site. Then, once satisfied with the tool, you can opt for a hosting offer and choose your own domain name. For this, you just need to click "publish."

Webflow E-commerce

Latest addition and certainly the most anticipated: Webflow's e-commerce section. You can now create your online store! Unlike other platforms like WooCommerce, Webflow e-commerce has unlimited customization—you can touch absolutely everything and style your store however you want!

We're talking about product pages, category pages, shopping cart, payment page, etc... You also have the ability to control shipping zones, manage inventory, and even calculate taxes related to your business! The idea for Webflow is to make administering your online store easier.

Since Webflow's e-commerce section just launched, some features are still missing, like PayPal payment platform—Webflow e-commerce is currently associated with Stripe for online payments. But that shouldn't be long!

Other assets will also be coming, like customer accounts, support for digital products and subscriptions, abandoned cart recovery emails, etc...

How to Use Webflow?

The Box Model

To know, Webflow isn't an "anti-code" software—quite the contrary. It uses it while eliminating complex aspects to save us from pulling our hair out coding. And to make our lives easier, Webflow has implemented a box system.

For example, when you add your first element to a page, you'll notice it automatically places itself across the entire width of your screen, without particular layout:

So, to choose your element's dimension, you need to place it in a container. That's Webflow's idea: create boxes and arrange your elements (images, texts, buttons, etc...) in them. It's then up to you to choose your site's layout.

This is what we call the box model, and Webflow uses this system to make your task easier without eliminating front-end code from your creations. This allows you, ultimately, to output properly designed projects without "effort."

Finally, Webflow is a visual interface designed FOR front-end code. You just need to add HTML elements and then customize these elements using CSS style options.

Webflow Interface

The Webflow interface is your command center. It's your creation space. Visually, it's often compared to Photoshop. But there are quite a few elements to master, so we'll focus on the most important ones.

The Navigator: Like Photoshop and its layers, the navigator gives you an overview of your page structure. You can observe elements like divs, images, or text blocks.

Pages: This section gives you an overview of all your pages, provides details, and lets you duplicate, modify, and add new pages. And if you want to play with link depth, this is also where it happens!

Page & Settings: With the "Pages" section open, you can click "settings" to add SEO tag options. This is also where you can delete, duplicate pages, and customize your site's code.

Assets: This is where you can see all your elements and components (assets) used on your pages.

Style Panel: This is where you can work on your elements by adding margins, colors, sizes, placements, etc... You can also give your elements CSS classes using the "Selector" field and manage multiple elements.

Element Settings: Digging into the right panel, you'll find element settings in the second tab. Clicking on a page element will display specific characteristics for each one.

Interactions: This is where you'll set up animations, transitions, and other interactions to make your website even more awesome.

Breakpoints: The 4 breakpoints correspond to 4 different device screens. Clicking on each of the 4 breakpoints lets you control your website's responsive part on Android, tablet, and desktop.

Element Panel

Creating your dream design on Webflow won't happen in two shakes. You'll face a multitude of elements, which can be scary at first. But don't panic—we'll explain the essentials!

The Div Block: This is THE construction element for your projects! The Div Block is like a folder that lets you position your elements on your pages. It's one of the most important elements.

The Grid: The Grid is a super powerful element that will save you tons of time! It lets you arrange your content however you want.

Flexbox: It allows precise alignment and control of your different elements to make your project layout easier.

Link block: It lets you affiliate links with your different elements (URL, page, email, attachment, etc...).

Typography: This element lets you manage your titles, paragraphs, lists, links, etc... It's also the rich text element—a grouping of texts that help Google understand what your pages correspond to.

Form Block: The name is self-explanatory. The form block, located in the "Forms" section, lets you create forms. Note that you can link your forms to certain services like Mailchimp.

Navbar: To add your navigation bar, go to the "Components" section then add and drop your element on your page. By default, Navbar comes with a few links already, but you can easily modify them.

Tabs: Easy to create, tabs let you categorize different elements. For this, just access the "Components" section and select the "Tabs" element. By default, three tabs already exist, which you can modify or delete.

Slider: An element that doesn't look like much, but extremely useful if you want to set up carousels, like customer testimonials for example, or to work on your headers.

Lightbox: It allows displaying images and videos in full size. It also facilitates media display on different devices.

Launching Your Project

Once registered with Webflow, a "New project" opens automatically. The platform then offers three options to begin:

• ‍Start with a blank page—you have complete control over your website's visual appearance.
• Start from a template where page sections are already created, which you can then delete or modify.
• ‍Choose a pre-made, ready-to-use template. It's up to you to customize it according to your needs and tastes.

Know that there are about forty free templates and a hundred premium templates at your disposal. They're all very high quality and responsive. You can easily find what you're looking for by filtering templates by categories and price.

Once your template is chosen, you're automatically directed to the editing interface. This is where you'll customize every bit of your site according to your desires, where you can create and modify your pages, think about your site's architecture, etc...

💡 What we recommend is creating a "Style Guide" as your first page—a page specially for you (not to be indexed) where you can define your site's colors, titles, formatting, etc... And make CSS classes to automatically reproduce your layout on your different pages.

Things to Know Before Getting Started

Pricing and Plans

You can test Webflow for free. You don't need to pull out your wallet to try the tool and get the hang of it (no credit card required to test the software). However, you're limited to creating 2 static pages with traffic not exceeding 500 visitors per month.

This is quite restrictive if you want to create a large-scale website, but it's interesting enough to gauge whether the tool meets your needs or not, and launch into creating a complete website afterward.

You can then choose a plan that matches your desires:

• ‍"Site plans": These plans correspond to Webflow's e-commerce section for your online stores—you can also use CMS. So you have plans at $12 for Basic, then $16 for CMS, and finally $36 for Business. The higher your level, the more features you'll have. ‍
• "Account plans": You can start for free, then move to plans, the first being $16 for Lite, then $35 for Pro. This plan is really only interesting for agencies or large marketing teams who work on multiple projects, need to collaborate, and extract code. This is actually a "project" account. Most users only need a "Site Plan" to host their site.

Don't hesitate to learn more, especially if you want to build an e-commerce site.

Help and Support

Webflow offers its own help platform: Webflow University. It's an important source of information to consider if you want to become a Webflow professional as quickly as possible. You'll find usage guides, lessons on how to use different elements, tutorials, etc...

In short, if you're stuck on something, this is where you'll find the solution. Layouts, typography, how integrations work, 3D transformations, and everything you need to know to have a top-notch site!

Additionally, the platform is quite simple to understand, well-presented, and you'll easily find answers to your questions without clicking around endlessly.

You can also visit Webflow's community forum. This space lets you exchange with other users about your personal experience and any problems encountered with the tool. Difficulties are often the same for many people. So don't hesitate to ask for help!

Finally, if you want to contact Webflow directly by phone or chat, it's simply not possible because they don't exist. The only remaining way to contact the Webflow team is email. They generally respond within 24 to 48 hours.

Webflow vs WordPress Review

Visual Aspect

Let's not kid ourselves—on WordPress, templates all end up looking more or less the same. Sure, there are infinite possibilities with WordPress, but it's often difficult to really modify a template because that would require complex foundational work and risk destroying the predefined framework.

But with Webflow and its visual editor, you have the ability to modify proposed templates down to the comma! You can customize every element of your website in detail and verify that it adapts correctly for desktop, smartphone, and tablet.

And it's also much simpler with Webflow if you want to start from a blank page than with WordPress. No code to plan, no visual plugins to add! The bonus? You can add dynamic visual elements without being a coding expert.

Technical Phase

For the technical part, WordPress requires integrating a multitude of plugins, which aren't all free and diminish site performance! Plugins that also require regular updates, while being careful about incompatibility issues, which can quickly become a real headache.

And of course, adding these numerous extensions inevitably impacts WordPress code, which can quickly become cluttered and therefore slow down your sites. Conversely, Webflow has very clean code, which doesn't affect your site speed at all—quite the opposite.

But that's not all! With Webflow, we can use what are called "CSS classes" that let us modify elements simultaneously if they're part of the same group. We therefore have a much more coherent site that improves user experience! Something WordPress doesn't have and that makes creation slower and more difficult.

SEO Part

Sure, it's always possible to achieve very acceptable SEO performance with WordPress. But this requires working on complex themes and adding a bunch of plugins. You therefore need to dedicate time to configure and optimize each plugin.

The question is: is it really worth it? Not really when the Webflow option exists. Already, in terms of execution speed, Webflow is extremely performant. No need for particular plugins. You can, for example, opt for images loaded in lazy loading natively, as well as have satisfactory cache management.

Concerning metadata (titles and meta descriptions notably), if you're used to WordPress, you surely know several SEO plugins like Yoast SEO. However, on Webflow, everything is installed—you just need to configure your pages via the SEO section.

Webflow offers other options to improve your SEO, like sitemap generation, the ability to modify robots.txt, a hosting service including a CDN, or Google Analytics integration.

However, what's true is that WordPress plugins sometimes have a magical side—they do many things automatically, which isn't the case with Webflow. So if you're good at SEO and know what you're doing, you'll do better and faster with Webflow. Otherwise, it will require a bit more work to learn.

Maintenance and Security

We know it all too well—a site designed on WordPress generally comes with a good number of plugins. The problem is that the more plugins you have, the more difficult maintenance becomes. You need to regularly check that all are updated and functioning correctly. Otherwise, beware of unexpected malfunctions!

With Webflow, it's different. It doesn't require adding plugins, which makes maintenance much simpler. You therefore spare yourself repeated headaches. Concerning hosting-related maintenance, this is done automatically.

And if you want to modify, add, and remove an element or page once your site is launched, you can! Modifications are super simple to manage. You can also set up a pre-production environment. And thanks to the Dashboard, you can manage your different sites at a glance.

In terms of security, Webflow handles everything, unlike WordPress. First, each of its installations has an SSL certificate, allowing any site to switch to HTTPS and thus secure the connection. It's indicated by the padlock symbol.

And secondly, Webflow automatically backs up all your projects—it has your back, and you can restore your website at any time. Incidentally, Webflow is certainly growing very fast but is barely 1% of websites today versus 40% for WordPress—less sexy for hackers!

As you've understood, for creating or redesigning your website, we recommend Webflow without a shadow of hesitation!