Webflow* is a powerful website creation tool that allows designers and developers to turn their ideas into reality without worrying about the technical details. In this article, I'll introduce you to some of these mistakes and explain how to avoid them.
1. Using uncompressed images
Don't just upload your images to Webflow without first checking the file size. The maximum size of your images should not exceed 500Kb. You can adjust the file sizes of your images with photoshop, Tiny png and edit other tools. Webflow itself gives you the option to add your images to the Webp format to compress.
2. No uniform naming of CSS classes
The wild naming of classes is confusing and makes it much more difficult to edit your website later on. You should therefore make sure to name your classes after the respective function. A big help in this is the uniform system for Naming Finsweet's Webflow classes.
3. No use of components
Components are an important feature in Webflow because they allow you to reuse elements and make changes faster. If you're not using components, you'll need to edit each element individually if you want to make changes. That can be quite cumbersome.
4. No use of interactions and animations
Interactions and animations can give your website extra dynamism and improve the user experience. If you don't use these features, you're missing out on the opportunity to make your site even more appealing.
5. The incorrect use of text elements
Beginners should make sure to use the right text elements for the right purpose. For example, don't use a block of text for a headline, use the heading element and choose between H1 - H6.
6. Undeleted styles and animations
Delete unused animations and CSS classes in Webflow with one click. This makes your site slim and ensures better loading speeds.
7. Fonts not optimized for smaller breakpoints
Make sure to adjust your font sizes for smaller devices. As a result, it can happen that your text is difficult to read and the design is too clunky.
8. Don't make SEO settings
SEO settings are often forgotten at the beginning. This includes assigning ALT texts to images, the correct structure of headings, adding titles, meta descriptions & the Open Graph image.
You can try out Webflow for free here:
https://webflow.grsm.io/77zg9e1s3png
to the design subscription from marchdept.
*Affiliate link
