How I Fucked Up A Recent Webflow Project: 4 Mistakes To Avoid For Webflow Freelancers

Last month, I did a project for Crafted Studio. The project ended up being a mess because I made mistakes that could’ve been avoided during the development, client communication and the handover process. The client was disappointed and it slightly dampened the client relationship since the website launch had to be delayed after a lot of hard work.

‍

Thankfully, Dexter Washington, the studio founder was graceful enough to walk me through the mistakes I made to make me a better webflower not just from a development perspective, but also from the perspective of client management. A huge shoutout to him for teaching me more than anyone in the Webflow community. If you’re not subscribed to his newsletter ‘Designers Desk,’ I sincerely recommend it.

‍

Also, shout out to Chris Loggins for being a Webflow wizard helping to fix bugs with the project. If anyone can fix a mess of a project, Chris can.

‍

Why Am I Sharing This Story?

• The whole point of Webflail is to embrace and learn from failures so I need to be transparent about my failures as they happen. Hopefully, you can avoid these failures yourself after reading about my experience.
• I am nowhere near where I want to be as a Webflower and I want to be brutally honest with you that I am learning and growing just like you are. I am certainly a stronger designer than developer and this project was a huge wake up call that I need to sharpen my development skillset.
• It’s important to understand that even if you’re getting clients relatively easily and think that you’re doing well as a freelancer, it’s crucial to understand that you don’t drop the ball, and that you’re self-aware enough to recognise there are always things to improve upon.

‍

I never want you to make the same mistakes I did. Let’s get in to them now:

‍

1) Getting Complacent With Classes

I build websites using the client first naming system. It's handy because, as the name suggests, it's made so that clients understand how their site is built using a regular naming system that is easy to understand. It's important to be able to hand over a website that can be managed by whovever is taking over moving forward. Even better than this, it comes with a lot of documentation that you can refer your client to if they want to edit things themselves.

Even though I used this system on the build, I got complacent with class naming. I ended up using the client first-ish naming system that wasn't problematic until I had been building for a few days in this complacent manner. I found that the website became a game of splat the rat where the class naming was wrong and I was trying to fix it.

‍

Even if building is potentially quicker using a short hand class naming system, or not following client first as tightly as possible, it wasn't worth it at all. It created a nightmare to deal with.

‍

Lesson: Whatever system you use, stick to it!

‍

2) Ensuring All File Sizes Were Compressed Without Losing Quality

This website for this client had a lot of images in it so it was important to keep file sizes down. Having said that though, while load speed was important, it was also important to keep the image quality to a certain extent. The problem with this website, I compressed the images so much that there was such a visible loss in quality - especially on larger screen sizes than the laptop I designed the website on.

‍

Nb - obviously, don't upload images over 500kb (ideally 200kb). However, if a image focussed website loads images that look pixelated quickly, is it worth loading them fast at the expense of quality?

‍

Lesson: With larger images, convert to WebP but check how they look on all screensizes!

‍

3) Thorough QA Process

After the project was finished, I simply didn't check the website thoroughly enough before transferring the project for the client. Even though you may be under time pressure and even though you are keen to finish the project, I recommend taking a day to thoroughly go through a methodical checklist.

I recommend checking out this Go Live Checklist by Trist Adlington. It's comprehensive and worth spending some time on. Don't just check how your website looks on the Webflow viewer. Go to the preview link, right click and hit inspect. Then, you can see what it looks like on different screensizes on there. Also, check it on different browsers too.

I also recommend getting a randomer (like a mate) to have a look at it. By getting someone who has never seen the website before to have a look at it, you can see how they interact with what you have made for the first time which might highlight things you need to change. If you have been staring at the website for weeks, there are probably problems hiding in plain sight which you can't see so that's why it's so helpful to give it to someone with a fresh pair of eyes.

‍

Lesson: Don't spend weeks building a site to not bother spending a day checking it over comprehensively!

‍

4) Ensure Clear Communication

The project went awry partly I hadn't clearly communicated with the agency and the client what was happening with the project. What I had agreed with the client I hadn't clearly communicated to the agency I was doing the project for. Part of the problem may have been that I was individually communicating with the client by email rather than exclusively using the slack channel which everyone involved in the project was involved with.

‍

Lesson: Exclusively communicate using one channel which everyone is using!