Top 5 Webflow mistakes beginners make

Webflow is very powerful, but if you don't know how to use it properly, it WILL use its power against you - causing headaches and low loading performance. To build your website at lightning speed while saving you a headache, we're going to cover 5 Webflow mistakes to avoid.

📽️ CHAPTERS:

00:00 - Intro
00:23 - No.1 Designing in Webflow
02:10 - No.2 Not Using Columns
03:38 - No.3 WebP Images
04:29 - No.4 Proper Naming
05:57 - No.5 Ignoring Parent Padding
07:12 - (Bonus) Ignoring Global Classes
08:57 - Conclusion

📱 Find us on SOCIAL MEDIA & follow Arnau’s Channel

#webflow #webdesing #freelancewebdesigner

[GBlunted]

This video really helped my mental health by giving my ego a reality check and reminding me I that I really am a !clue newb when it comes to any frontend or design topics and it really helped my physical health to see how calm and effortless you resolved all these topics! Because let me tell you, oh boy, trying to modify the navigation bar on this template I found — thinking how I wasn't even getting close to the results I was looking for... Just wow... That shit made me so mad like I haven't been in quite a while, straight tantrum status lol! But then to watch your video and see the main struggles I was having were ranked Top 5 and 6 and maybe a bit of the 2nd biggest mistakes made by Webflow beginners which reminded me where I'm actually at since I could relate to those mistakes so much! I mean, I didn't even know what the problems were that I was having but now I have an idea of what they were and how I might look to get better results.

One question I have though is in the bonus mistake, what happened with the H1 changes you made? How come when you first made the change to the global H1 in that text block, the H1 below didn't do anything and even when you changed that H1 under the text to the global steeze you still ended up having to change attributes one at a time trying to make it match the H1 in the block above which seems like exactly what you don't want to be doing, which is matching that individual H1 to another instead of figuring out how to do the global thing?

This video also inspired me to see what I can do with Figma. And doesn't mistake #5 and #6 fit pretty well under the No. 1 mistake?

[Sam_Backhouse]

One thing on WebP to look out for that I found out the hard way this week. Some social media sites (LinkedIn was the one I found this week) don’t accept WebP images from OpenGraph, so make sure your SEO images are more traditional formats until they fix this 👍

[Carlita-]

I didn't know about the assets compressing tip, thank you so much!

[sam-harrison]

It's funny, there are some big names in the Webflow community that advocate for designing in Webflow. I can't imagine doing this, it's wrong on so many levels ha 100% agree 👍

[Singeline]

Just started my journey to the world of WF and realised I made ALL of this :D Thanks for enlightening, hilarious how people are the same!

[thebishopelect]

I liked the tip about using Figma to design... ive been doing it all in Webflow and you're right it's a ball ache. So thanks for that.

[joecater]

webP pretty important. When I have to do seo tasks .. a lot of it is converting jpg to webP. A very laborious process!!

[realgreyrecords]

Golden nugget: Design in Figma, build in Webflow. Here's some assumptions I'm making. 1 export assets from Figma, drop them into Webflow. 2. Build in grids w/ those assets in Webflow. The perfect world says you can make all client negotiation/changes in Figma THEN commit to Webflow. That's not been my experience. How do you bridge Figma to Webflow in the real world of clients that want alterations after that initial commitment to Webflow. Where's the truth? In Figma ... In Webflow dev ... In Webflow live. Thanks for any feedback. I've found Webflow easy to build initial ideas in ... really difficult to change after the fact.

[crooker]

Webflow can be your best friend and your worst enemy at the same time. Fortunately, it makes me thousands of dollars, so I don't mind. A little learning goes a long way and each project I do gets better and better.

(it's a pain though when I have to go back and work on projects I did before learning some of these techniques... I'm constantly swearing at my own work! :)

[njengathegeek]

I agree with him, ''if you don't know how to use webflow, it will use its power against you'' 😅😅

[janlamprecht]

It's impossible to get in touch with customer support on Webflow, unless you are a company of hundreds of employees. I tested filling in a form for a small company size 1-50 employees they literally didn't even allow me to proceed, whereas when you choose 100+ employees they open up a calendar for me to schedule a call with them. Thank you for being all inclusive and valuing your smaller clients Webflow!

[juaninfante]

All that is on this video is 100% accurate, also one little mistake I saw was giving the global heading a color I do not recommend this because if you have a section that is a different background color changing the color of the heading is a hustle fix? Don’t give text color to heading or text give the text color to the parent section like that it child’s inherit those color, if you have branding color just make a class for it and add it to the heading :) cheers

[hyweltthomas]

I agree with everything except your first point. I have designed in Webflow for 5 years, I find it easy to do and much more conducive to good responsive design. I never use pixels for anything and using responsive units (REM, VW) means you can demonstrate all screen sizes to the client quickly and easily.

[KirTitov]

Great video, it would be good to know when to you use fixed width, max-width or fixed hight on an element?

[thetruthwillnevergovoided]

Designing in figure out first can be a problem, especially for those who i'm not code savvy.

[mrnd]

Would you recommend to start from scratch for building a first website or use a template? What about libraries?

[raphaelzenazel]

Mistakes beginner make 2. Not using columns - it implies you should use columns but in the video he says to not use them.
If the video would be called " 5 tips for beginner on webflow " then not using columns would work. Anyway, you catch my point

[hitbox]

Im a Webflow- and React-Developer, React for 5 years now, and Webflow for about 3.5

No. 1
Yes, Designing in Webflow is generally a bad idea, mainly because of how class inheritance works in CSS/HTML. But there is an approach to this which fixes most of those problems, which is to simply create attribute classes which hold single CSS rules as global values. Just create an empty div, assign a class to it (something like "paragraphMarginTopMedium" for example) and then use this class as global combo class that you can give to any paragraph that needs that specific top margin. The same works with every other attribute like flex-box ect, since you also can give that container a custom CSS rule via the CSS editor at the bottom of your designer menu. I do that mainly for global variables like font-color, font-size ect, and yes, i know you could also use the in-build variables for stuff like this, but it does not allow for any CSS attribute to be added, and that way i can simply search by class name and quickly add/delete specific rules that i need/don't want to be used anymore.

No. 2
Wrapper management is one of the most essencial skills that a front-end developer has to aquire. Generally i would always just go for simple flex-box layouts and trying to assign percentage values for width if you happen to have several containers in one parent, then use padding/margin on those parents to work with side distances to the section in which you build that layout. Grids are useful too, but if it comes to develop multidimensional size distributions for rows, using areas in a grid could lead to problems with how those elements align themself to each other. A bit of it is also preference, but the more container-layers you use, the more freedom you have in creating complex layouts for specific elements.

No. 3
Nothing to add here really, that's how you should treat your assets, performance becomes an issue really fast if you neglect image compression, if you build a super complex website for weeks and then get a lighthouse score of 60 because images take up 90% of your loading times then you get used to take care of compression very fast :-D

No. 4
Same as No. 3, nothing much to add here besides one point : don't use spaces dots or numbers in naming classes. I know that that's a convention a lot of webflow developers aquired over time, but don't do this. If you happen to combine webflow and custom JavaScript/CSS as i do, you will get to the point where you run into syntax errors because classes in CSS can't actually contain those in their naming convention due to how CSS assigns those classes to pseudo-attributes. Better is to use camel case (thisIsCamelCase) and use specific attributes within that class (heroTextParentContainer) to name it.

No. 5
Same advice as in No. 1, use global margin/padding combo classes for elements so you have centralized variables that can be assigned individually without altering the entire base-class. That way you can basically Lego-Build stuff very fast and very easy without the need of cloning single font-or parent classes all the time because you need separate size values for each container.

All in all a good video, there are also some mistakes people do regarding responsiveness which could also be covered in an entirely new video i think. My approach to this is, that i use REM media queries to generate pixel-dynamic size adjustments on my sites, which is basically the holy grail of responsive development. I use static breakpoints only for layout changes due to smaller/bigger screen sizes, not for font-or container dimensions.

Edit : If you need some general help with developing in Webflow, i sometimes give live courses on my Discord Server, where i teach more complex front-end principles specifically for custom-code implementations and quirks/in-depth knowledge regarding Webflow's collection system.
My DC name is anlight, just add me there.

[jamesgrove]

what is REM in spacing and size elements, compared to using PX?

[danielhedu]

Isn't WebP images still restricted to certain browsers and versions? I don't know if it a good idea for a general public