7 Webflow Build Tips from a Site Fix

Here are 7 Webflow build tips from a site fix. We all know that Webflow is powerful, but it can also get out of hand quickly. I'm helping a fellow designer / developer tidy up their site. 

My work this morning reminded me of a couple of tips that will save you a ton of time and headache.

1️. Use Finsweet's Client First System or something similar 

If you do nothing else on this list, using this system will save you so much time and headache. It might have a slight learning curve, but the small investment of time to wrap your mind around it is worth it. 

2️. Name everything

You should never place a div, grid, or flexbox on a page without naming it. You can get away without naming an image or text, if you wrap it in a div and use that div for spacing. But everything else needs a name or you will end up with grid 15 and have no idea what it goes with. 

3️. Use H1 once on the page and in the header section.

If you need a bigger heading later on in the page, choose a heading, specify it as H2, give it a name 😁, and then style it to look like the H1. 

Your H1, Title Tag, and Url should all be the same or similar, as they tell Google what your page is about. Including multiple H1's confuse search engines and will hurt your page's ranking. 

4️. Choose your layout tool wisely.

Flexbox is super powerful, but using it as a main layout for a section can be a little tricky. Try using Grid for the main layout, and then Flexbox inside the Grid. Certainly, this is not a hard and fast rule, but I find Grid to work well for the main layout of a section. 

When it comes to mobile responsiveness, I also find changing from Grid to Flexbox and setting the Flexbox to wrap can be helpful. Especially if you need the picture that is on the right side on top. It is much easier to press the swap button with Flexbox.

5️. Use Gap with Grid and Flexbox to space items.

It is much easier to space out items with Gap rather than adding margin. 

Especially when you forget there is margin added and you are wondering why everything isn't lining up on mobile views.

6️. Page Padding and Container Max Width

Even if you don't use Finsweet's Client First system, it is a good idea to wrap everything in a section with a Page Padding and a Container Div. This will insure everything is properly spaced on the page from the margins of the browser. 

Pro tip - Don't use Webflow's stock container. Add a div, name it container, and set its max width to whatever the max width of your design is. You can't change Webflow's stock container. 

7️. Hierarchy is crucial, especially in the header.

It is the first part of your page everyone is going to see. Use larger fonts and colors to draw people to particular elements.  But be careful. Highlight the main thing. You aren't working with hierarchy in your design if everything is the main thing. Pick what you want to draw attention to and draw attention to it.

I'm confident if you take the 7 Webflow build tips from a recent site fix and incorporate them into your next build, you will build better and faster!