Top 5 Webflow mistakes beginners make
Вставка
- Опубліковано 5 чер 2024
- ⚡️Join our workshop for simple concepts to master Webflow: bit.ly/3QQJPCP
👉 View our other Weddesing resource to improve your skills: bit.ly/3C8gBeL
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
🧰 Create perfect websites and become a freelancer: bit.ly/3fFhRwI
👉 Find all Flux Academy courses here: bit.ly/3CZFtpn
📱 Find us on SOCIAL MEDIA & follow Arnau’s Channel
Flux Academy's Instagram 👉 / flux.academy
Arnau Ros Channel 👉 / arnauros
#webflow #webdesing #freelancewebdesigner
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 👍
I used to do it. "cut out the middleman" but I'm starting to use figma more and more. Learning more and more software gets to be a bear though. Hopefully, with the purchase by Adobe, they'll integrate it into creative cloud so I don't have to pay for it separately.
If you are an owner of a site it makes sense. Because you have mastered your class system
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 👍
Good note Sam!
Wow, thank you! I’m really glad I looked at the comments. That’s super helpful.
WebP also to my knowledge is not support by Safari, I believe it shows up as alt text instead.
@@dereksiuau Where did you get that from? "WebP is no longer a new wave image file format. It's supported by all five of the top mobile browsers including Chrome Mobile, Mobile Safari, Chromium, Samsung Browser, Facebook on Android, and more."
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?
I didn't know about the assets compressing tip, thank you so much!
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!
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.
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.
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! :)
Heyy
I am getting started in web development. If you don’t mind me asking how do you find clients?
@@alisultani5157 Starting out... you're going to need to do some work for free... (Or cheap). You will need to approach clients who need a website or who have terrible websites. Or better yet... get a job with an agency and build some experience and a good workflow. Build some MOCK websites and try to market those. There's no easy way in if you don't have SOME connections first. You can build a house from scratch with your bare hands... but it's easier and quicker if you start with a foundation and some tools.
There are lots of youtube videos on how to find web clients.
I agree with him, ''if you don't know how to use webflow, it will use its power against you'' 😅😅
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!
They used to reply right away, a couple of years ago. I’m in a company of three and it didn’t matter. I believe they opted to put most of their resources into Webflow University and supporting their forums. Ultimately, the standard of service in the new model probably serves a lot more people in most cases. Some problems obviously fall through the cracks.
Very nicely done!
Great video!!
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
Understand the context, not the words. Columns aren't bad when used in the right way. But flex or grid are often more efficient these days. I use flex more than grid, but grid is more flexible for some use cases.
@@crooker2 You're sadly missing the point of my post
@@raphaelzenazel3821 I guess so.
Yeah got confused with the title as well.
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
Well done.
Nice one.
Great video, it would be good to know when to you use fixed width, max-width or fixed hight on an element?
The answer is always "it depends". Fixed width with a relative unit can still be responsive. But fixed width with a fixed unit can be problematic. Always check your breakpoints to make sure the site flows properly.
thank you
Thank you for this video :D
You're welcome!
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.
good vid man
Thank you
thank you soo much
Would you recommend to start from scratch for building a first website or use a template? What about libraries?
Def start with libraries or a template. Always make copies as well
Designing in figure out first can be a problem, especially for those who i'm not code savvy.
Having some kind of wireframe is a must! Designing in Webflow is simply not practical.
what is REM in spacing and size elements, compared to using PX?
REM is based relative to the size of the root element. Pixel is a fixed value.
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.
hey bro do you have group chat in webflow dev? would love to join :(
This is quite the advertisement. Bit of a back seat UA-camr, there.
@@tupacca1281 oh i do those courses only for keeping me engaged in topics i won't normally use regularly :-D Im not charming enough to take on a career on youtube, and im one of the few lucky ones that got a webflow-only agency job, which is, if you know what you are doing, the most awesome position you could be in (for me of course, thats a purely subjective approach).
Isn't WebP images still restricted to certain browsers and versions? I don't know if it a good idea for a general public
Exactly. It’s a pain
ultimately it's better as a rule of thumb
Thank for for this! I am a Webflow noob and I’ve committed 3 of 5 of these sins
If you want the best naming abilities, I recommend building with Finsweet's Client First framework. It's made my life so much easier.
I don't disagree, but I wish webflow would implement combo classes properly, so you could create a more flexible css framework. Classes don't cascade properly in webflow.
❤
does are not exactly properly named :)))
'text' , 'left' also 'Text Block 2' .. love it :DDD
1st mistake if you designing in webflow why you use Figma?
Guilty on all counts
You accidentally said "not using columns" instead of "using columns". Annoying.
On second glance, you fucked up almost every section name.
Be more tolerant.
@@crooker2 ? I love this channel, they can do better.
There’s more in life to worry about than being annoyed with something so tiny :)
Grow up.