PB101: L05 - Static vs Relative Units
Vložit
- čas přidán 28. 06. 2024
- I apologize profusely throughout this video because I want this stuff to be simple, easy, and fun. And regardless of the topic, I try to make it as simple and fun as possible. But some things in web design are just kinda difficult to wrap your head around as a beginner. And no matter how you slice it, it's a little tedious and overwhelming to work through.
Understanding units is one of these topics.
Of course, I could do what most courses do and just tell you to use pixels for everything, but that would be wrong. And at some point, you'd have to re-learn a very large portion of the page-building workflow to migrate to actually doing things the right way.
Instead of doing that, I'm going to rip the bandaid off and just tackle a couple advanced and tedious concepts over the next two lessons because it opens the door to the page-building superpower of "fluid responsive design," which is the ultimate anti-chump workflow. And it's the workflow I want you to learn from the very beginning.
This lesson covers static vs relative units, pixels, accessibility implications of pixels, rems, ems, ch, viewport units, and more.
The next lesson will cover math functions like min(), max(), calc(), and clamp().
Grab some coffee and resist the urge to tap out. What I'm teaching you in this lesson and the next lesson will elevate you well above 90% of people using page builders. And we're still only 10% (or less) of the way through the course.
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
0:00 Multiple Disclaimers
02:49 Pixels
07:43 "Pixel Perfect" Design is Dead
10:05 Rems
20:28 Ems
27:53 Percentages
30:56 Ch
35:40 Viewport Units
42:22 Math Functions (Next)
45:52 Playing With a Box
52:55 Final Apology
I have degree in CS... I've decided I want to go down the solo Web dev agency path and just built my 2nd big client project. I was so proud of it... Until I watched this. I built everything in pixels. Lessons have been learned the hard way, all the reasons Kevin says not to use them are real. Because of my studies I thought I knew alot but I've been really humbled into realising it's really a constant learning experience and listening to masters like Kevin that make you grow. This vid alone has me so excited to build my next site so much better. Just worried about how to manage the old ones now...do I rebuild? Just move on? I don't know.
I was about to give up on Bricks because there's not much content out there that teaches as much as you do. And as someone with short attention span, I almost decided not to watch, but the moment I did, now I can't stop watching! Lol. These are all very helpful, I get mind blown through every lesson. It's so much learning for a free course. Thank you so much, Kevin! So glad I found this.
So glad you didn’t give up!
I strongly agree with you!
Your comment captures so much for me, as well! Bless you, friend!!
two PB101 episodes in a week? we're spoiled
If you believe in professionalism and best practices in web design/ development, them you have to stick to Kevin's tutorials no matter how long it would take you to be professional but you are in the right track. Thanks Kevin.
As someone with the technical background, I really appreciate the way you go into the complexities, details, and nuance of web development. 🗽
🙌
Stick with this shit, guys, it will give you superpowers! Kevin, you’re the bomb!
This is one of the best page-building courses I've ever taken! You know your stuff!!! I can't thank you enough for this! I feel like remaking all the websites I've ever made.😂 Thank you, Kevin!
You're very welcome!
I have learned more in the last 5 videos than I have in the last 2 years
💪🏻
Hey man!
After watching this video I feel like all I built was just a crap.
Thank you so much for this most valuable course.
Common feeling. Gotta start somewhere!
this one is a re-watch a few times over (like the Everything is a Box vid).... with this particular vid, I thought, "ok, I get it..." but the next day... "F****!" Re-watch... and practice.
I am a true beginner. You are so easy to follow. Your teaching style and the organization of your videos is perfect for me. I decided to finally comment on this video since it IS a bit of a mind bender and I had no issues understanding. I am so grateful that I won't have to 'unlearn' bad habits. Thank you so much. Can't wait for the next one!!
So glad to hear that it wasn't too confusing!
I rewind these PB101 series all the time. So many knowledge nuggets again. Onto the next video.
Same!
You're constantly blowing my mind with these well explained basic fundamentals that other people I've learned from just skip right over. Thank you!!!
Keep in mind, I originally learned web design in the 90's when turning your entire webpage into a complex table of images was the "hot thing" to do. 🤣
Love it. Do this. Don't do that. And equally importantly, why or why not. 🙏 Theory and practical experience served up with a spoonful of enthusiasm.
The best explanation of relative units I have ever seen. Now I get it. Thank you Kevin.
Kevin. I found this at just the right time!!!! I am escaping Elementor currently and this is the absolute best thing I need to see before I rebuild my website in a less chump-like way. And I also discovered we are metro ATL neighbors when I checked out your site. Thank you so much!
I'm waiting and already drumming my fingers on the table with impatience. :О)
When the advice is so good you have to watch the video multiple times to understand
Kevin, you are such a great teacher! I used to build websites with chump-like behavior and had the problems you mentioned. After watching your tutorials, I finally know how to do it professionally! Thank you very much. I will keep watching your tutorials!
freaking awesome! maybe a bit fast for a beginner, but it is the correct information for the beginner. im not a beginner, but I sure wish I had this kind of information when I was. Of course, when I was a beginner, css didn't exist. But the whole concept of being in tune with what is goin on at the current time is key for the beginner. I kind of feel bad for the beginners in 2023, but these videos are going to be of incredible value. Like he said, watch it over and over until you get it. I did that for a tcp-ip video from ATT in 1998, most boring thing ever. At least Kevin is funny, loud and entertaining. If your feelings get hurt, too bad. You are a chump.
I rate Kevin, Elaijah and that guy from Tech Ingredients to be the most satisfying to listen to.
I love this series. Thank you! 😃🙏🏻❤️
There was a secret wish of mine that you upload these videos faster, but I couldn't say that because it was just too much to ask.....but since you possess some superpowers.....here we are. Thank you man....
Thanks for the deep dive. You have the best videos!
Thanks, Kevin! Your videos are of amazing value, not just for ACSS customers (like myself), but people doing web design in general :) I started watching the videos in order to get a grasp of Bricks x ACSS, but this has been eye opening to me :)
Mucho Gracias!
🙌
Kevin, great job with this channel. I'm finding your content very helpful.
Glad to hear it!
Mate, applause for the content which you`re creating. You totally blew my head away and made me answer to a lot issues which I had. I can`t wait for the next videos.
P.S. This is my first comment ever on CZcams and I had to admit, you fully deserve it. Hats down man, keep doing it. 👏👏👏
💪🏻💪🏻💪🏻
Thank you Kevin for this amazing series.
Learning alot so far as a beginner, thanks Kevin!
This is crazy amazing content!!!! Thanks a lot Kevin... i now see what is the issue with Elementor and i definitely change to Bricks!
🎉
Well done Kevin, this will help a ton of people getting units right.
Oh, man. Where have you been all my life? This is gold.
Thank you Kevin for this deep dive in units world !
Excellent video, and I love your enthusiasm.
42:20 is hilarious 😂 You are such a good teacher. I'm kind of lucky to have found you right now, as I'm starting to develop my own web projects on another level.
Thx! 🙏
That is a top-notch explanation for the relative units.
Thank you 🤝Kevin.
...*keeps droppin bangers! 💪 Loving the unravelling of rem, em, viewports related. I can't stop watching
I trust you, sensei! I am learning so much. Thank you!
Thanks a lot Kevin, you are the best teacher 💪
This was another great one. Perfect for weekend learning. Learn, poke the box and then improve.
Amazing tutorial. So great to learn about fluid responsive design, and very easy to understand in this way. Thank you!
Very good video, please continue with this kind of video because it helps the community.
I just watched this. You answered a few questions that I almost asked. Thanks! 🙏🏻
I'm still here and lovin' it!
I feel like watching this series has elevated my IQ from 70 to 72, awesome content!! and great value!!!
Kevin, I follow you to the promised land. thank you so much for these excellent lessons. I love learning to do it the RIGHT WAY. keep it up, man! Best tutorials... EVER.
I can't believe this CZcams channel has so few subscribers. Bro, you deserve millions of subscribers!
Working on it!
I keep making notes as I learned html before there was css, way back in the pre-historic times. That was an excellent presentation on units. I have used some math functions, so I off to view the next lesson. And "Wow!" you keep pumping them out faster than I can watch! But don't stop now! 😀
Clea stuff, is very well explained. Strong starting point for future exploration.
Top level tutorials. Many thanks.
Still here! I'm also very much a beginner, have only built a few sites so far on Elementor and have made all the mistakes and had a niggling feeling I wasn't really aware of best practice. So glad I found you early on in my journey, already made the jump to Bricks and feel like the time invested now in understanding these concepts is going to save me SO much time in the long term - thank you!
I love the explanation of the em units.
Great tutorials! Informative and enjoyable. Thanks!
Kevin, thank you! Really great useful video!
Thanks for the video Kevin. i've been using vsw and svh, so good to know there is a better solution in the pipeline
This is gold! Thank you so much!
Kevin, thanks for this video. I was somewhat comfortable with rem, vw, and vh but the discussion around additional units was very helpful. I'll need to review a few times to be more comfortable but that's a small price to pay for understanding the correct way to use relative units. Looking forward to more.
Very good Kevin, I made it to the end because you make the challenge very exciting ;) Of course I went back and forth a few times to see if I understood it. :)
💪🏻
Wow! Love this piece of video. I would love to buy you a coffee if I was able to. Moving to the next one. I watched the previous videos though but this video was fascinating and cleared my head about those little px, rem, em, ch and interestingly vmin. Thanks Kevin. See you in the next lesson.
Awesome lesson Kevin! Picked up some great tips there... I now have a few changes to make on a couple sites I've been working on 😉
very good explanation of units!
Best tutorial I have seen about units. This was really helpful. Soon I will not be a chump or a nincompoop anymore. :)
Thank You, Thank You, Thank You 🙏🏻❤
Thanks
Great lesson!! Thank you
👏Great great stuff...
Follow up on CH: The character max-width has the advantage over REM or PX, that when you have small or big font size (like 16px or 50px) you still have the readable amount of characters for the element. If you change the font size you would have to change the box size also again. So not the no. of characters is the main point, but that the text will be always the perfect readable sized element automatic changing with the size of the font.
This is true, though it doesn't scale perfectly. You'll often find that headings, for example, need a different character width than text or they break too soon or too late.
Kevin be that guy that slightly irritates you, but you still respect him. Tnx for the content my man.
Which part is irritating?
That was sooo good!
This is pure gold 👏🏼👏🏼👏🏼
🥇
amazing content!
Thanks Kevin. Really good…soo evangelical!.
Kudos, it was a great lesson, and it was better put together than any other lesson I have seen on the topic either in Webflow or Elementor.
This lesson covered "what not to do", and if you can highlight "what to do", that be great, for instance, there is a CZcamsr in Elementor Land, Rino - Living with Pixels, who did a similar video on the topic,"How to setup typography and fonts in Elementor" and though his video is nothing compared to this lesson, quality-wise, he came up with a guide, listed on his website, with complicated functions using a clamp calculator, and even the Elementor developers used that guide in their recent live session. Consider having a look at it, and maybe present a "what is the right thing to do" in future lessons. Food for thought. Cheers.
That's actually being covered in the next lesson, which is already scheduled for release tomorrow.
Great stuff as always :-)
I did it! Seen the whole lesson without feeling sick.🤣
Glorious
Kevin! I love you man :D Thank you, Thank you and Thank you
Appreciate you!
Great explanation of dvh and dvw. I finally get it. lol
Glad it helped!
Kevin thanks for the very detailed explanation. I've always struggled with EM vs REM and their use cases. One I'm stuck on though, would be ideal unit to use for a border radius, whether it be a button or a section etc.?
Depends on the effect you’re going for. I typically use rem.
I Was Blind, But Now I See!
🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐
Thanks KG!! Now I am inspired to do another Iron Man
Oss!
Kevin, what to do with the height of an SVG icon in a checklist: EM or REM? (fr-checklist-alpha__icon --> custom SVG)
Rem. We have to use em for frames because we don’t know what people have set their root font size to.
my head hurt lol think i going need watch this a few times and question, have they come out with that update yet? of the new way doing DVH and DVW?
Almost.
I'm learning a ton from this course! I've been using Kadence for my builds - how does Kadence do with your criteria for pagebuilders?
Not good :/
Any update on when DVH and DVW will be released?
We're still here, watching closely. We're not going anywhere mate, lol
Follow up on EM: Is EM always looking for the fontsize of the actual element, so padding and margin for example would always use the elements font size. And when that font size is for ex a REM size, it will not look for the parents font sizes, right? So the compounding font size through parents is only happening, when I use EM for the actual elements font size. If I use it for anything else, I am good?
I think I know what you're saying, and yes. But I would also encourage you to "poke the box" in your builder. Set up the scenario you just asked about and see how em behaves in real life.
Question: Will this course include HTML tags and where to use them? Or, do you have a course like this already? I've look through your page and don't see it, unless it's under a different title
Yes I already did an overview of them in one of the lessons. They will be used in more detail throughout the course.
Can dynamic variables be used to create charts and graphs in Bricks Builder, based on percentage values dynamically obtained from a custom field? Is this possible?
Yes should be
I'm trying to build accessibility features directly into my design. For sizing, I'd like to employ three buttons [Default] [Large] [X-Large]. I understand this will take extra work and styling considerations to employ, but I like that it gives me more control over how my content is presented at various sizes. Would this be considered a *bad* practice? Can I still do this in such a way so that browser settings can still adjust size as well if the user wants to go that extra step - or would it be better to lock sizes down for most or all of those stylings?
What’s this for exactly? If your font sizes use rem, your buttons will already scale accordingly.
@@Gearyco It's for a news site, so easy readability options are a big deal to me.
I'm including a tool that ads an audio track for every article - using a cloned voice of the author! Technology these days, man... Wow.
Hi Kevin, so far I've agreed with most of your comments about certain builders not being as 'professional' as they might suggest, and everything about semantic html. I have not yet taken the plunge and bought Bricks Builder having spent most of my time in Elementor, and Oxygen.
You got me thinking about the output produced by these different page builders, and I was extremely surprised when I viewed the page source of the Elementor and the 'try bricks' versions of the test you set at the end of the last PB101. Just as a rough example, when viewing the page source of the Elementor page, it was roughly 6 screens to scroll down, whilst the Bricks version was 39 pages long.
I am not sure if the trial version of Bricks is very different from the paid for version, but this seems like a lot of bloat. Can you check too?
You’re probably looking at minified or differently formatted code. Elementor code is typically a minimum of 4x more than bricks.
Ah, I see the difference, I was previewing the page inside Bricks whereas Elementor's preview is more like the view on the frontend in Bricks, and yes it's less, but not too much btw
It will be significant because every single dom element in Bricks is 3 to 4 dom elements in Elementor. There's really no way it could be similar.@@peteharrison3241
Regarding the CH unit for text - Isnt it problematic if you have different font sizes and different font typefaces? It may not often be an issue, but would they not all have different widths then, making the layout weird?
Depends on how you use it.
Having now watched this episode, I understand why some developers change the root font size to 62.5% to make their lives easier. However, does this mean that because the user might have changed the font size your design might break whilst keeping your root font size to 100% follows your design across devices or different user settings?
I’m not really sure what you’re asking, but it’s not a good idea to change root font size on an existing website.
I'm already sweating at the disclaimer
No more pixels!! Pixels only good for web design width
Hello Kevin, I studied html+css+div a few years ago in China. My teacher did not recommend me to use grid to make a website. They said the code is not simple.
This course of yours is great. I like it very much. It’s so valuable. You share it with us for free. It’s selfless dedication. Thank you so much. It felt so difficult at first. After watching your course, it will become easier and easier. I will embrace you. All suggestions and tools, I found oxygen in China, I found bricks on youtube, and then I found you, hahaha, it’s great, but this course is not available in China, I specially use vpn to learn your course, hahahaha
Everyone in this industry should learn it :) Glad you're enjoying the course!
I never do browser updates until it’s red like Kevin. I’m no chump
Basically with this 62.5% trick, you switched from imperial to metric units 😂
yes!
The only thing I would like to improve is the sound. Kevin, maybe you can adjust the sound so that you can speak calmly, and not shout into the microphone? This creates an anxious, stressful nature of all your videos. It's like you decided to defeat all your enemies with your aggressive speech. It seems to me that it's not the enemies who are listening to you. But on the contrary - friends and students.
I teach the way I teach.
@@Gearyco I don't mind. Just adjust the sound. So that you can breathe and speak freely, without tension. I didn't mean to offend you, I just wanted to suggest an improvement. I pointed out a minus that can be turned into a plus (and increase the number of viewers) - make the sound of your voice more pleasant. I'm sorry if I offended you. Best regards.
@@victort.1122 There's no "enthusiasm" dial on my microphone...
Kevin is in Fantastic Beast mode.
Kevin's tempo is a bit on the fast side, but he is very artistic, his intonation and articulation are just perfect, in contrast to most youtubers, his voice is having an energizing and motivational effect on me