What you need to know about Webflow
What is Webflow?
Webflow is a web design software. To make it short, this tool allows you to create and customize your site to the millimeter and access all dimensions of your website, without having to code anything. You, therefore, have full control over the visual canvas of your website without being forced to touch HTML, CSS and Javascript, funny terms that give you the hand on the presentation of a site.
But thanks to Webflow and its philosophy of "design first", there is no need to take the lead in coding. Roughly speaking, with its interface, you just have to drag and drop the elements you want to integrate into your website and thus build your marketing pages. As you will have understood, Webflow allows you to customize your website almost without limit and without the constraints of the code!
If you have already handled the Adobe software, you will quickly realize that its interface is a little similar to that of Webflow: it is ultra-visual to create and launch your site! It is you who decide the placement of your elements, you can then modify the 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 allows you to connect webflow with a whole bunch of other S applications (such as Mailchimp for example). And for some time now, Webflow has been offering an e-commerce part, again very flexible in terms of customization.
💡 Be careful though, if you want to build an e-commerce site as giant as Asos is, this is not yet the solution for you! At this stage, webflow e-commerce is more suitable for selling digital products.
Who is Webflow for?
Since the objective of Webflow is to offer a software to create its website without getting your hands dirty but while having a very clean code, the software adapts to everyone! Whether you are a beginner or a seasoned expert, Webflow is a great tool if:
- You have little experience and knowledge but want to launch your personalized website without coding!
- You are a developer and you want, for example, to carry out tests, tests, for your customers, or quickly create websites simply.
Conclusion, Webflow is aimed at... almost anyone:
- To professionals such as developers or UX/UI designers, and users with strong skills, or anyone ready to get started!
- People who want to customize their websites from A to Z without restriction but who are not code experts.
- But also to employees who wish to share creations with each other or with customers, thanks to the possibility of working as a team on webflow.
Why use Webflow?
Difficulties of creating with other CMS
Whether you are an expert or a beginner, it is necessary to understand the problems generally encountered when you want to create a website:
- Dissociation between visual and code: the design of a website takes time especially because the visual is first thought and created thanks to a wireframe. It is then to the developer to code the website from this wireframe. However, there sre several cycles of creation, to be taken into account. This dissociation between design and technique also poses problems in optimizing the performance of the site. A design that does not integrate in its reflection; the technical performance can lead to a site "pretty" but very slow.
- Code complexity: Coding is not within everyone's reach. Some interactions are particularly complex to set up, such as animated transitions, and require technical knowledge. Learning to code is clearly useful and important in digital today but it takes time and with webflow you can get rid of it!
- Screen adaptation: People who want to create a website or a hosting platform must also make sure that it adapts to different screens. Thanks to Webflow, you can easily check that your project adapts to different media and even modify your mobile version without touching the desktop version. This allows a perfect optimization of the user experience and performance in a very simple way.
- The multiplication of plugins: on most CMS, you can not escape the hell of plugins! On the one hand, they slow down your website, then they are often at the origin of security flaws and finally they require regular updates (almost daily when you have many). Conversely, on Webflow, everything is integrated.
As you will have understood, Webflow is THE solution to solve the problems that we can commonly face when designing a website.
Ease of use
Professionals will tell you, creating a website is not done overnight. There are several design phases, and several different visual tools: whether for the development of prototypes, for coding, for the design or for the graphics of the site.
💡 When we talk about graphic design, we distinguish:
- Items created outside of Webflow,
- and the style of the site.
But with Webflow, this whole process is simplified!
It provides you with an all-in-one design and development solution. This will allow you to save time and therefore money. Not bad, right? Concretely, Webflow will make your life easier thanks to:
- Its interface allows you to create your design directly in the tool and "zap" the technical integration part since the two merge perfectly.
- To its CMS that allows you to create custom collections, that is, databases containing a type of content, such as blog posts.
💡 You will then be able to design templates that will facilitate the publication of your future articles. All you have to do is insert your item into the collection and it will format itself automatically. Integration time of a 4000-word article? 3 minutes. Yes, you read that right.
- To its Editor tool that allows you to create and modify your content directly on your pages or simply control your SEO.
- CSS classes that, once saved, allow you to apply a particular style to one or more elements of your website ("Selector" section). It doesn't sound like that, but in reality, that's fire 🔥!
Webflow features
The Visual Web Design Tool
Webflow has a design interface somewhat similar to photoshop. Convenient, users only have to drag and drop the HTML elements they are interested in into a container (the box template) and customize them from the CSS properties.
Be careful though, the idea is not just to scribble a random shape in the middle of your page. It's an HTML and CSS automation tool, so you don't need to worry about the code aspect since the Webflow system automatically loads for you.
But to add, layout, and customize your elements, you need to insert a container, that is, a <div> element, and then use the CSS classes to style your content, as well as some modules like Flexbox to perform your layout.
You will see, you will quickly get acquainted with different terms. Of course, if you're a regular at HTML and CSS, Webflow shouldn't worry you much. On the other hand, if you do not know anything about it, you can always indicate to the tool during your registration that you are not used in developing a website. Webflow will then automate an important part of the tool and you can rely on templates.
Of course, not all parameters are displayed through the design tool. Imagine the clutter it will create visually. That's why Webflow simplifies your order station by simplifying the terms and using small icons to show and/or hide certain features.
Obviously some will tell me that photoshop is a complicated tool, but here we are talking about other tools that allow a single person to manage the artistic creation of a website, its development, its technical optimization, its deployment, and its maintenance. Yes, you have to learn how to use the tool, but believe us when we tell you that website design has entered a whole new paradigm with this type of tool. Oh, really.
The Content Management System (CMS)
A bit like WordPress, Webflow offers a CMS that can manage a blog part and display dynamic content. The difference is that with WordPress, we are often limited by the default templates and styles. Customizing elements is difficult, if not impossible, when you don't know how to implement them (when you don't code).
On Webflow, you can edit any element directly on your pages. The small revolution here lies in the fact that you can define categories of personalized content, such as "blog posts", "team members", etc... You determine the structure and style of your elements, without any plugins!
Created manually or imported, this content is then part of CMS collections. It's a bit like having a database where you can group all your content under different categories, but without having to manage it. Interesting, isn't it? You must first create your collection, in order to define the 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, from a simple excel file to create in a few seconds 80 different landing pages perfectly charted and layouts. 🤯
Webflow Hosting
Webflow hosting is under Amazon Web Service (AWS) cloud computing. Ultra-fast, your content can also be easily distributed to any geographic area thanks to its CDN (Global Content Delivery Network) provided by Fastly and Amazon Cloudfront.
So you can start with a peace of mind, since you won't have to worry about server maintenance, or the various updates. In addition, Webflow hosting comes with included SSL certificates, strong password security, automatic backup, is HTTP/2 compatible, etc.
You can start building your responsive websites for free by designing your prototype through 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. To do this, simply click on "publish".
Webflow e-commerce
Last addition and certainly the most awaited: the e-commerce part of Webflow. You can now create your online store! Unlike other platforms, like WooCommerce, Webflow e-commerce is limitless in customization, you can touch absolutely anything and style your store the way you want!
We are talking about product pages, category pages, shopping cart, payment page, etc... You also have the ability to control shipping areas, administer inventory management and even calculate taxes related to your business! The idea, for Webflow, is to make it easier for you to administer your online store business or company.
As the e-commerce part of Webflow has just been launched, some features are still missing, such as the payment platform. PayPal - Webflow e-commerce is currently associated with Stripe for online payments. But it won't be long to be available!
Other assets will also be expected, such as customer accounts, support for digital products and subscriptions, the possibility of abandoned cart recovery emails, etc.+
How do I use Webflow?
The box model
Namely, Webflow is not an "anti-code" software on the contrary. It eliminates complex aspects to prevent us from tearing our hair out when coding. And to make our lives easier, Webflow has set up a box system.
For example, when you add your first element to a page, you will find that it is automatically placed along the entire length of your screen, without any particular layout:
Thus, to be able to choose the dimension of your element, you must place it in a container. That's the idea of Webflow: create boxes and store your elements (images, texts, buttons, etc.). It is then up to you to choose the layout of your site.
This is called the box template, and Webflow uses this system to make it easier for you without eliminating the front-end code of your creations. This allows you, in the end, to get out of cleanly designed projects without "effort".
Finally, Webflow is a visual interface designed FOR front-end code. Just add HTML elements:
And then customize these elements thanks to the CSS style options:
Webflow Interface
The Webflow interface is your cockpit. This is your creative space. Visually, it is often compared to Photoshop. But there are a lot of things to take in hand, so we're going to focus on the most important ones.
The Browser: Much like Photoshop and its layers, the browser allows you to have an overview of the structure of your pages. You will be able to observe elements such as divs, images, or text blocks.
Pages: This section allows you to preview all your pages, gives you details, and allows you to duplicate, edit, and add new pages. And if you want to play with the depth of the links, this is also where it will happen!
Page & Settings: With the "Pages" section open, you can click on "settings" in order 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.
The style panel: This is where you can work on your elements by adding margins, colors, sizes, locations, etc... You will also be able to give your elements CSS classes thanks to the "Selector" field and manage several elements.
The parameters of the elements: By rummaging through the right panel, you will find in the second tab the parameters of the elements. By clicking on an element of your page, you will see specific characteristics for each of them.
Interactions: It is in this section that you will set up animations, transitions, and other interactions to make your website even more awesome.
Breakpoints: The 4 breakpoints correspond to 4 screens of different supports. By clicking on each of the 4 breakpoints, you will be able to control the responsive part of your website on android, tablet, and computer.
The Elements panel
Creating the design of your dreams on Webflow will not be done in two strokes of a spoon. You will have in front of you a multitude of elements, which can be scary at first. But don't panic, we will explain the essentials!
The Div Block: This is THE building block for your projects! The Div Block is a kind of folder that allows you to position your elements on your pages. This is one of the most important elements.
The Grid: The Grid is a super powerful element that will save you a lot of time! It allows you to store your content as you wish.
The Flexbox: It allows you to precisely align and control your different elements to facilitate the layout of your project.
Link block: It allows you to affiliate links with your different elements (URL, page, e-mail, attachment, etc ...)
Typographies: This element will allow you to manage your titles, your paragraphs, your lists, your links, etc ... It is also the rich text element, a grouping of texts that make it possible to make Google understand what your pages correspond to.
The form block: The name is sufficiently self-explanatory. The form block, located in the "Forms" section, allows you to create forms. Namely, you can link your forms to certain services like Mailchimp.
Navbar: To add your navigation bar, go to the "Components" section and then add and drop your element on your page. By default, Navbar comes with a few links already but you can easily change them.
Tabs: Easy to create, tabs will allow you to categorize different elements. To do this, simply go to the "Components" section and select the "Tabs" element. By default, there are already three tabs, which you can edit or delete.
Slider: An element that does not look like that, but extremely useful if you want to set up carousels, such as customer reviews for example or to work on your headers.
Lightbox: It allows you to display images and videos in full size. It also facilitates the display of media on different media.
Launch your project
Once registered with Webflow, a "New Project" opens automatically. The platform then offers you three options to get started:
- Start with a blank page, so you have total control over the visual of your website.
- Start from a template where page sections are already created, which you can then delete or edit.
- Opt for a predefined and 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 are all of very good quality and responsive. You can easily find your happiness by filtering the templates by categories and prices.
Once your template is chosen, you are automatically directed to the editing interface. This is where you will customize the slightest part of your site according to your desires; you will be able to create and modify your pages, think about the tree structure of your site, etc ...
💡 What we advise is for you to create the first page as a "Style Guide": a page only for you (not to be indexed) where you can define the colors of your site, titles, formatting, etc ... And make css classes in order to reproduce your layout automatically on your different pages.
What to know before you start
Offers and prices
You can test Webflow for free. You don't need to take out your wallet to try the tool and get your hands on it (no credit card is required to test the software). However, you are limited to creating 2 static pages with traffic not exceeding 500 visitors per month.
This is quite small if you want to create a large-scale website, but it is interesting enough to gauge whether the tool meets your needs, or not, and you start creating a complete website afterwards.
You can then choose an offer that corresponds to your desires:
- The "Site plans": these offers correspond to the e-commerce part of Webflow for your online shops where you will also be able to use CMS. So you have offers at $ 12 in Basic, then $ 16 in CMS, and finally $ 36 in Business. The more you level up, the more features you will have.
- The "Account plans": you will be able to start for free, then move on to offers; the first of which is $ 16 in Lite, then $ 35 in Pro. This offer is actually only of interest for agencies, companies, or large marketing teams that actually work on several projects that needs to collaborate and extract code. This is actually a "project" account. Most users actually only need a "Site Plan" to host their site.
Help and support
Webflow offers its own help platform: Webflow University. This is an important source of information to consider if you want to become a Webflow professional as quickly as possible. You will find user guides, lessons on how to use the different elements, tutorials, etc ...
In short, if you got lost on something, this is where you will find the solution. Layouts, typography, how integrations work, 3D transformations and everything you need to know to have a site at the top of the top!
In addition to that, the platform is rather simple to understand, well presented and you will easily find answers to your questions without multiplying the clicks.
You can also visit the Webflow community forum. This place will allow you to exchange with other users about your personal experience and any problems encountered with the tool. The difficulties are often the same for a good number of people. So don't hesitate to ask for help!
Finally, if you want to get in touch directly with Webflow by phone or chat it is simply not possible because there is none. The only remaining way to contact the Webflow team is through email. They usually respond within 24 to 48 hours.
Webflow vs WordPress?
The visual aspect
We're not going to lie, on WordPress the templates all end up looking more or less alike. Certainly, there is an infinity of possibilities with WordPress, but it is often difficult to really modify a template, because it would require complex background work and we would risk destroying the predefined framework.
But with Webflow and its visual editor, you have the possibility to modify the proposed templates to the nearest comma! You can customize each element of your website in detail and check if it fits properly for a computer, smartphone and tablet.
And it's also much easier with Webflow if you want to start from a blank page, than with Wordpress. No code to be expected, nor additional visual plugins to add! The little extra? You can add dynamic visuals, without being an expert at coding.
Technical phase
As for the technical part, WordPress requires the integration of a multitude of plugins, which are not all free and which lack the performance of a site! Plugins that also require regular updates, while paying attention to stories of incompatibilities, which can quickly become a real headache.
And of course, adding these many plugins inevitably impacts WordPress code, which can quickly become cluttered and therefore slow down your sites. Conversely, Webflow has a very clean code, which in no way affects the speed of your sites, quite the contrary.
But that's not all! With Webflow, we can use what is called "CSS classes" that allow us to modify elements simultaneously if they are part of the same grouping. So we have a much more consistent site that improves the user experience! One thing that WordPress doesn't have and that makes creating slower and more difficult.
Natural referencing part
Of course, it is still possible to achieve very acceptable SEO performance with WordPress. But it requires working on complex themes and adding a whole bunch of plugins to them. It is, therefore, necessary to devote time to it, just 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 speed of execution, Webflow is extremely efficient. No need for special plugins. You can, for example, opt for images loaded in lazy loading natively, as well as have satisfactory cache management.
Regarding metadata (titles and meta description in particular), if you are a regular WordPress, you surely know several SEO plugins, such as Yoast SEO. On the other hand, on Webflow, everything is installed, you just have to set up your pages via the SEO section.
Webflow offers other options to improve your SEO, such as sitemap generation, the ability to modify the robots.txt, a hosting service including a CDN, or the integration of Google Analytics.
On the other hand, what is true is that WordPress plugins sometimes have a magical side and they do a lot of things automatically which is not the case of webflow. So if you are good at SEO and you know what you are doing, you will do better and faster with webflow. Otherwise, it will take a little more work to learn.
Maintenance and security
We know it all too well, a site designed under WordPress is usually accompanied by a good number of plugins. The problem is that, the more plugins you have, the more difficult the maintenance is to manage. It is necessary to regularly check that all are up to date and working properly. Otherwise, beware of unforeseen disruptions!
With Webflow, it's different. It doesn't require the addition of plugins, which makes maintenance much simpler. So you save yourself from repeated headaches. Regarding the maintenance related to the hosting, it is done automatically.
And if you want to edit, add and delete an element or page once your site is launched, you can! The changes are very 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 takes care of everything, unlike WordPress. On the one hand, each of its installations has an SSL certificate, allowing to pass any site in HTTP and thus secure the connection. It is indicated by the padlock symbol:
And on the other hand, Webflow automatically backs up all your projects, it ensures your back, and you can restore your website at any time. Incidentally, webflow is certainly in a very strong growth but it is barely 1% of websites today against 40% for WordPress, which is less sexy for hackers.
