.avif)
At a time when websites are becoming increasingly important for businesses and individuals alike, the need to create websites cheaper and faster has increased. Not everyone has the budgets to undertake a full development process to create a website, and therefore various tools will be needed to be able to continue providing services to everyone.
Webflow is one of the tools that one can use to do this, and we will now go into more depth on this tool and what possibilities it has.
The different editors: the pros and cons of them
It should be said that all the editors have their use cases. Wix, for example, is best for beginners. It is easier to find people who can work with Wordpress than with, for example, Webflow. But we believe that Webflow is definitely the tool here that provides the most flexibility and robustness. Let us take you through why;
Wordpress
Wordpress is by far the most popular editor, with around 30% of web pages. This does not necessarily mean that they are the best.
The tool has a steep learning curve and is experienced somewhat more difficult than, for example, Wix.
They have very many plugins - 57,000 pieces. You will need to install many of these to get the functionality you need, and thus may encounter some challenges. Sometimes plugins crash, they can stop being compatible at any time, and they can be vulnerable to damage.
Themes and plugins need to be updated frequently, and then one has to log in and check the dashboard frequently to make sure everything is up to date. And as we know - all developers can make mistakes, and therefore updates can cause problems. If you are not going to use one of the pre-made themes, then you need to bring in someone who has knowledge of wordpress to create a theme.
Wordpress is generally slower due to all the extra plugins, in addition to the fact that their code is not optimized and has a messy layout. This can lead to crashes, and this plus slowness leads to poorer ranking from search engines.
One also has to set up hosting yourself, unlike the other editors.
Squarespace
When it comes to Squarespace, you can create really great websites. They have a lot of eCommerce features, in addition to the fact that the tool is also a little easier to get into. However - it is quite limited in terms of editing. You can't just move an item wherever you want, and there's no drag-and-drop functionality. This makes it a little more challenging to switch positions on the elements, and this can create a lot of clutter and extra work.
Squarespace is poorly suited to larger web pages since one cannot have menu hierarchy.
It also takes way too many clicks to do what you want, and they also have no autosave. This makes it a bit inefficient.
Squarespace web pages are also a bit slow which in turn spoils search engine ranking.
Wix
Wix is a good tool for beginners, because of its drag-and-drop functionality, it is user-friendly and the service offers many features. However, Wix will be very limiting for professional designers or developers due to little control.
When creating a website, it should be responsive on all devices, which generally doesn't work optimally with Wix, and it takes a lot more on Wix to get it responsive on all devices than it does with, for example, Webflow. In addition, many people find that it loads slowly on mobile.
Webflow
Webflow, on the other hand, has a steep learning curve and is riddled with complexity, but one will experience much higher flexibility and stability. We will go into more depth on Webflow further in this post.
What is Webflow?
Webflow is a visual tool for building production-ready websites without actually having to write code, and rather with drag-and-drop. This is because Webflow uses industry-standard development principles. Webflow's underlying technology is based on an abstraction of HTML, CSS and JavaScript, which means you can design and build web pages visually, while the platform generates the necessary code in the background. When finished you can publish the page or export the code. If you publish through webflow, they also fix hosting for you, which is provided through AWS.
Webflow also offers a number of advanced features such as interactions, animations, dynamic content, e-commerce — but we'll come back to that later.
It is also important to know the limitations that one has so that one can choose the right solution for a project. If the project is quite complex or is to be part of an already existing system such as an administration portal or a CRM system or other web systems, we would not necessarily recommend building this in webflow.
Webflow itself says “Build with the power of code, without writing anything”. However, it can be considered a great advantage to be able to customize the website with your own code. We will therefore look at the different ways that can be done.
However, it is important to note that no code is validated, so it's important to know what you're doing here.
Advanced functionality
Furthermore, we will look at the more advanced features that can be accessed in Webflow.
CMS
Now let's dive into the core of Webflow - the Content Management System or CMS. This is the place where you handle all of the dynamic content.
You can create a complex, tailor-made database of different types of content - in Webflow these are called 'Collections'. A Collection can include something as simple as blog posts, or something more complicated, like a collection of products with various attributes such as price, size, color, category, and ratings.
When you create a collection, it also creates a template-side for it. If you create a Collection called Blog, the template page represents how the data will be displayed if you click on a blog post.
When designing your pages, you can drag and drop CMS elements right into the design. This means that you can design your pages around the actual content.
From a developer perspective, you also have the option to use the CMS API to, among other things, retrieve content from external data sources, connect to existing CMS or set up custom webhooks.
E-commerce
With Webflow eCommerce you can build a complete online store, without the need for third-party plugins or additional services.
The first thing you'll notice with Webflow eCommerce is that it follows the same principle as the rest of the platform: what you see is what you get. When you design your store, you can see exactly how it will look for your customers in real time.
And as you would expect from Webflow, you have complete control over the design of every single part of your online store. From product pages to shopping cart and checkout and receipt you get by email, you can customize everything to fit perfectly with your brand. This is a huge advantage over many other ecommerce platforms that often limit how much you can customize the design.
It is added to the sale of both digital and physical goods. You can customize the delivery of the product, whether it is to be shipped or sent by e-mail. You can add links to download in the email or on the order confirmation.
Webflow eCommerce also supports various payment methods including credit cards, Apple Pay, Google Pay and PayPal through Stripe, and automatically handles tax and shipping calculations.
Stay in control of orders via a dashboard. Here you can set statuses on your orders and manage refunds. Functionality coming soon to Webflow is customer accounts and order history.
If desired, you can also integrate with third-party solutions to achieve more functionality.
Interactions and Animations
Creating an interaction or animation in Webflow is both quick and easy when you know the tool. You first choose which element you want to animate, then choose the type of interaction you want, such as scrolling or mouse movement. You can then customize the animation by adjusting a variety of parameters, such as duration, delay, distance, rotation, scaling, and more. You can also chain multiple animations together to create more complex animations.
We also have a 'Timeline' feature, where you can fine-tune the timing and sequence of each part of your animation, just like you would in a video editing software. This gives you a high degree of control over how your animations work.
There are many presets added to animations that you can easily insert right into.
Examples of animations that one can create without coding:
Membership (beta)
It is important to note that this feature is still in beta, and therefore may have unexpected problems.
Webflow Membership allows you to build an online platform where users can sign up, log in, and even pay for access to premium content. You can create and manage different user levels, from free memberships to different levels of paid subscriptions.
Membership is relatively easy to set up. In the basic layout, you can choose which pages or sections of your site should be reserved for members and which should be accessible to everyone. You can also set specific settings for different membership levels, such as the type of content they can access and how much they have to pay for their subscriptions.
Another important part of this is the integration with CMS and eCommerce. This means you can use the same powerful tools to manage your membership that you use to manage your content and products. For example, you can use Webflow CMS to create a blog that is only available to paying members.
Logica (Beta)
Again, it is important to note that this feature is in beta, and therefore may have unexpected problems.
One of the newest additions to the functionality list is Webflow Logic, which allows you to add dynamic functionality without coding. It's like having the ability to add your own programming logic, but in a visual way.
With Webflow Logic, you can set up 'if this, then that' rules (if/else) to control how the elements on your website behave. For example, you can create a rule that says 'if the user responds to this form, then the response should be stored in CMS'. This creates a shortcut to a lot of interactivity and user customization.
Webflow Logic can be as simple or complex as you need, ranging from minor automations to a complex flow. Logic gives you the ability to create “no-code” workflows, which use the core features of Webflow such as CMS, forms, users, and emails. At the same time, you have the ability to create custom triggers and actions - and connect to third-party apps - with webhooks and HTTP requests for a more “low-code” approach.
SEO
Another important area to cover in today's digital market is Webflow's SEO tools. With these tools, you can easily customize and optimize your website to achieve better rankings in the search engines.
Editor access
With editor access, you can easily edit and add new content to the CMS system, but right on the page itself. This way you avoid having to take a position on the CMS dashboard. This is a great access to give to customers, allowing them to easily manage content without having to really learn the tool. They then get access to a simpler version of webflow, where adding items is just like filling out a form. In addition, this can be edited visually on the website afterwards so that it is easy to see how the result will be.
Figma to Webflow
This is a plugin one installs in Figma, which allows you to export your design directly to Webflow. You then set up the design, as well as define how it should look at the different breakpoints. You can then copy the design directly into Webflow using the plugin. This also inserts text, colors and images.
Examples of web pages
Summary
We have now looked at Webflow, and the various functionalities that can be accessed through the tool. We hope this has given you some more insight. We in Link development have Webflow as our preferred tool for many of our website projects. We have a lot of experience with the tool and are certified in webflow.
If you need help with a webpage in Webflow, or want to set up a new website - take liaise join us in Link Development!
