5 Key Tips To Instantly Improve Your Webflow Development

I spend a lot of time in other people's Webflow projects. After leaving a particularly challenging client meeting, where my colleague and I spent two hours trying to understand the structure of a Webflow website that we were supposed to "fix", I had to let off some steam and wrote this tweet:

‍

‍

It seemed to me that a lot of Webflow Developers (even the ones that worked for bigger agencies) didn't really follow a system. Instead, their projects were all over the place and hard to read.

‍

Every time we took over a project, we spent hours cleaning up the website and fixing bugs before we could start working with a client.

‍

So, instead of complaining, Jack asked me if I could write down the most common problems that I see in my day-to-day and also add some tips on how to avoid them as well.

‍

But first, I want to tell you how I even ended up here.

‍

From Freelancer to 12 Person Team.

I didn’t start out as a Webflow Developer.

‍

Five Years ago me and Jasper Glaubitz started a Digital Marketing Agency.

‍

What started as a 2-person side hustle quickly grew into a 12 Person Team. Today we focus on B2B Marketing and Webflow Development.

‍

On the side I also consult a lot of startups both on Marketing Strategy as well and Web Development. Through that work I get to see a lot of different Webflow Projects from small projects that were done by the founders up to big projects with several agencies and developers involved.

‍

In this article I am trying to talk about all those issues and how you can avoid them.

‍

5 Key Tips To Instantly Improve Your Webflow Development

1) Learn to think like a Developer

Webflow is easy to use and makes it possible for everyone to create a beautiful website with lots of animations withing less than a day. But this simplicity turns out to be a trap for most webflow beginners.

‍

What might work for a small personal project can become the downfall for any client project. Especially when more people are involved and the client wants to maintain the website on their own.

‍

As Designers we are inclined to start right away. Work through lots of iterations and then end up with a beautiful result.

‍

Developers usually work backward: they analyse the final version, then devise the fewest steps necessary to reach it.

‍

The goal is to re-use classes as often as possible without the use of many combo-classes or new classes that basically do the exact same thing.

‍

I know this seems like a waste of time but it will have a huge impact on your final website.

‍

2) Name your Layers (seriously)

While the name of your Element in Figma has nothing to do with its behaviour, a Webflow Class (or any class) tells an element what it's supposed to do and how it's supposed to behave.

‍

You want those names to be clear and simple. Just like you tell your dog "sit" instead of "please sit down"; you want to use clear and simple names for your classes that show what they're supposed to do.

‍

Especially when your website is more complex and has a couple of different pages, you will notice that some elements or your website behave the exact same across multiple pages. This could be a title or a layout like the old section with an image on the right and some text on the left.

‍

In those cases, you should re-use a class name that you've already created. This has a bunch of advantages:

1. If you change the design/layout later in the process, changing it once will carry over to the entire website.
2. Your website will load faster, which makes it more SEO friendly.
3. A new developer understands your website easier and can work on top of your project.

‍

Now, what if the element is similar, but not the same? Maybe we're using a different font color or we want the border to look different?

‍

In those cases, we can add combo-classes. Just like you tell your dog to sit first and then roll over, you can tell the website to use your title class but this time change the font color to green.

‍

3) The Importance of Figma (or any other Design Tool)

Measure Twice, Cut Once

‍

You always want to start with a Figma file. Even though it may seem like a waste of time and I've heard from many Webflow users that they like to skip this step, it is important to know what you are about to develop before you add your first div block to your project.

‍

Take your Figma file and try to envision each element on Webflow. What steps would you take? What elements would you use? Doing this will quickly give you an idea of which elements can reuse classes and which elements are unique.

‍

Using Auto Layout will make this process even easier. If you can’t build it with auto layout you’ll probably have a hard time building it using clean methods inside the Webflow designer.

‍

4) From Figma to Styleguide

While you’re following the instructions on how to structure a website you will notice than you’ll end up with a set of classes and combo-classes that (ones you reached a certain complexity) are impossible to remember.

‍

This is where a styleguide comes to play.

‍

A Styleguide is a page on your website where you can store all your classes.

‍

Besides Typography and Colors, you can also pre-define common elements like form elements or Buttons.

‍

There are dozens of examples listed on “made in webflow” or you can come up with your own and use it as a starting point for your next project.

‍

Always start with a styleguide. If you make changes to a global element, do this on the styleguide page as well. Your future self (and clients) will thank you for it.

‍

5) Wizardry vs Client First vs. Custom Solution

What I described in this blogposed is commonly referred to as having “naming conventions” in place. Right now there are two commonly used Frameworks out there.

‍

Client First is the most popular one. While I am not a big fan personally, a lot of agencies and freelancers are using client first for their website builds.

‍

While it is a good system I found that a lot of beginners struggle with client first. I also saw how often times when it comes to bigger and more complex projects you can see how an agency started out with client first and then made changes using random classes.

‍

Wizardry is a system designed by Timothy Ricks. It is not as commonly used as Finsweets Client First but I saw a lot of bigger agencies adapting to Timothy's system or using an alternative version of it which brings me to my last point.

‍

I believe that using your own system comes with a lot of benefits. First and foremost it's speed. A system is not supposed to hold you back. It should make you faster and more efficient. Using a system that works for you is far more important than using something that's already out there. Especially if your naming conventions are clear and easy to understand.

‍

Take a look at Client First and see how they documented their system. Make sure to document your system as well and make the documentation available to your clients and peers.

‍

I also think that using your own system is better than "kinda, halfway" using someone else's system.

‍

In the end, we want to achieve consistency. If you find yourself adding special solutions and extra classes to an existing system, it might not be the right fit for you.

‍

Conclusion

What you should learn from this article is that working with a tool like Webflow requires structure both in your workflow and inside your final project. Don't rush into it and start coding right away. Don't get me wrong! Feel free to play around, but don't use your client projects for that ;)

‍

Start out by having a clear idea on how you're going to develop each page. Break your design down into elements that you can re-use, add them to a style guide and then start your development. Figure out what naming conventions you want to use or come up with your own, but make sure it's easy to understand and well documented.

‍

Your projects will never be perfect and we all use shortcuts every now and then, but try to limit your shortcuts to an absolute minimum. You want your websites to stay online for as long as possible. There is no worse feeling than going back to a website that you've developed a couple of months ago and seeing that it looks completely different.

‍

I hope that you could learn something from this article. If you have any questions, feel free to hit me up on Twitter.

‍

Cheers!