8 Biggest Webflow Mistakes I Made When I Started Using Webflow (And Still Make Sometimes)

Fonts

I used to upload various fonts in to the Webflow project I was working on just in case I wanted to use them. The problem with this is that it’s bad for performance. Sticking to 2/3 fonts not only makes the design tighter but also means the website’s performance will be better.

The font format is also matters since not all browsers support all font formats. See screenshot below from webflow:

‍

Building in Px

Since Px is an absolute unit, 1px=1px on any screen size. The problem with this comes when you translate figma designs in to the Webflow build. Suddenly, your perfect Figma designs become muddled at different breakpoints and the design can quickly become a mess.

Now what’s quite spicy is that every browser has a root font size that is usually 16px (although you can alter the root font size).

Rem is a relative unit. It is a multiple of the root font size. 1rem = 16px. 1.2rem = 22px etc.

Check out this epic article to understand this better!

‍

On Page SEO

It is easy to overlook the on page SEO elements of a website. Does the H1 make sense for the client’s goals? Are the meta-descriptions written well? If it’s a rebuild, are you or the client re-directing those URL’s from the old site?

These are the type of skillsets that add value to the client beyond just building on Webflow. I think ensuring that a website is effective by understanding SEO, you have a huge advantage over other webflowers and I wish I understood that earlier.

‍

Overdoing Animations

I used to think that the best thing about Webflow was the animations so naturally, I went fucking mental. Images flying in and out, text spinning on hover and more. I am relieved that no one had an epileptic fit while browsing a website I made.

Realising that fewer, more subtle animations were more effective than too many has improved the quality of websites tremendously.

‍

Inefficient Website Testing Process

After finishing a website, the work is not done. The work is only just beginning. I wish I understood that earlier. I recommend testing:

SEO: Check on page

All Links: Make sure all links work (should they open a new link by default?)Page speed: Page Speed Insights allows you to see how fast the website is

Bugs: Make sure all content is laid out as it should be

Forms: Test forms and ensure they work

Check out this tweet and comments to see more!

‍

Build System

Since I don’t come from a dev background, I started Webflow by putting elements on to the canvas and playing around. The problem with this is that you may be able to make a crude website but it looks messy at different break points and on publish, the website does not perform like you think it will!

Applying a build system like Client First has tightened up my build process dramatically. It also meant that when I started doing client projects, I could provide documentation for them to use the same class naming system since these docs come with Client First.

‍

Not Utilising Symbols

Symbols are so powerful to ensure components are consistent across the site. I used to edit ever single individual navigation and footer on each page which took forever until I realised that symbols ensure consistency across all pages!

‍

Compressing Images

What I used to do was to find images from Unsplash or Pexels and upload them directly in to my Webflow project. The problem with this is that a lot of the images are 4000 px wide which means they are massive files and unnecessarily large for the project. Reducing them in size in Figma to around 1000 px width instantly reduces the size of that file to 1/4 of what it would’ve been.\

Then, converting the JPEG in to a WEBP in something like convertio will reduce the file size further. Since Webp reduces the file size without reducing the quality, you can still have a relatively large image but with good quality doing it this way rather than reducing a jpeg to a very small dimension size.

ps. If you use too many free conversions using convertio, you can simply find another site by typing in to ‘Google JPEG to Webp converter.’ Rinse ‘em I say.