Using Webflow Units Correctly to Speed Up Your Build Time

Join my Webflow Wizards Community
/ timothyricks
Understand the difference between px, vw, %, and em. Know when to use which and how to build websites that scale seamlessly on larger screens.
Get the cloneable style guide at (affiliate link)
webflow.com/website/Responsiv...
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@AntonyNorthcutt]

You have no idea how helpful this is!! Responsive design is the stumbling block for most of the Webflow community, record a video/series focusing on this and people will throw money at you.

[@timothyricks]

Thank you! Always trying to find new ways to provide value and a series is a great idea! In the meantime, this video is the closet thing I have to that. kzbin.info/www/bejne/bmLZq5SFaJVqaJI

[@AntonyNorthcutt]

@@timothyricks Man I'm soooo on this :)

[@dannidrenovci894]

Sometimes it’s fascinating how you can find materials like this, and it’s completely free! Timothy, you got my respect and I’ll do my best to support you (patreon, affiliate webflow link, anything thats in my power) Wish u a great day captain!

[@jassiljamaludhin9215]

Honestly, these are the tutorials we need more of! The small yet impactful tips and tricks webflow developers should know. Keep making awesome stuff! Can't wait to see more!

[@abie1295]

thank you for the class tim. ❤

[@duskolo]

Showing complete page sections and how the elements inside affect each other on different viewports makes the theory behind relative and absolute units so much easier to understand. Seeing just a button adapting to different screen sizes is way less helpful than seeing a whole page section with buttons, text, layout elements, etc. Great job!

[@stevenbernstein6555]

Such a great & simple rundown of using units (esp em) correctly for responsive design. Awesome work!

[@blondelchedjou6202]

Thank you so much. This video was very helpful for me.

[@thiagofranca5846]

Dude, thank you so much for these. So simple to understand something that I've always dealt with but never quite understood. I appreciate your work.

[@kao9620]

Thanks for the video Timothy. I Was always confused about these different units. Really helpful

[@miqdamsajid875]

I was finding for the right explanation and this is what I was expecting to find

[@TheNNguyener96]

So happy to discover your channel! Thank you for all your tutorials

[@WebGuyMike]

Boom Timothy! Thank you :) This was exactly what I was hoping for. Thanks for this. Super helpful to see how the sizes work together. I eventually went from px to rem, but still ran into the various issues you mentioned. I'll play with these combos you created. Super helpful!

[@Wildenfree]

Wow Timothy, this was incredibly helpful & valuable! 🙌🏾 I’ve tried so many various methods & seen other tutorials on this topic, yet none have managed to successfully & succinctly explain the value of each unit with such clarity, & also provide such powerful use cases for implementation! Even the quiz style questions & pauses allowing us to fill in the blanks was greatly helpful & appreciated! Well done! 🙏🏾💯💯

[@Londya]

This is super helpful. I have to watch it back again to really get it. Thanks you!

[@dorianakalaj]

This was soooo helpful! I looked at several tutorials to try to understand how to use responsive measures but this was the only explanation that made me understand the whole thing! Thank you so much! It would be great to have a video explaining the difference between EM and REM and how to actually use them!

[@user-wb2xy7cu6v]

Great tutorials (not only this one)! Thanks much! You explain much more clearly than webflow academy lessons.

[@Abhimabi]

Wow it's so helpful, I will sincerely request you to create content in a series of full website creation tutorial, there are lots in youtube but nothing is this detailed. Please help people like me who can't afford to pay hefty ammount to do an expensive course. 🙏

[@timothyricks]

Thanks so much! I’ll definitely look into creating a series. In the meantime, this might help. It’s a tutorial for building a fully responsive lander with files to follow along. kzbin.info/www/bejne/bmLZq5SFaJVqaJI

[@solinterior]

Thanks for sharing, extremely valuable! Cheers.

[@jugl-studio]

You are amazing for sharing this!! Thank you so much. Wish I'd found this video sooner. So helpful!

[@designjo4662]

Woah! Amazing. I was thinking about when to use vw, em, px, and % and this shows up. Thank you Timothy for the BiiiiiigggggGG help.

[@timothyricks]

Awesome! So glad it’s helpful

[@iamtommyok]

Really great video Timothy. You provided a straight-foward example of how to put these best practices into a real workflow. Please keep the great webflow vids coming!

[@timothyricks]

Thanks so much! Will do!

[@jamesabadfernandez8002]

Thanks for the video, it's been so helpful.

[@Hmdbln]

thanks for the video, I was having difficulty getting everything at the end as there was some jumping from one point/example to another :D

[@nasiy]

Amazing video! Learned so much ! Thank you

[@jonasarleth]

Easy to understand 👍

[@garethellison01]

Thanks so so much for this. Amazing tutorial!

[@derekentrekin8672]

Great tutorial. Very much appreciated

[@apodnies]

Wow, very useful! Thanks a lot for sharing your knowledge :)

[@juraj001]

Thank you Tim! Helpful for me.

[@timothyricks]

Happy to help!

[@des7638]

Absolutely brilliant. Thank u again.

[@matthewbozanich6668]

Wow Thank you for this!

[@ShoneTheGenije]

Bravooo. And THANK YOU.

[@istvanvizner4393]

Thank you!! You are awesome.

[@thewebart]

Thank you!

[@des7638]

Amazing.

[@nigbinedion]

Really appreciate this. Very helpful. I was wondering, with what you've covered, I honestly don't see the need for px units anymore. I mean, maybe for static sites, but even static sites are mobile responsive Every site is to be responsive, so is there any situation where px units actually work? Seeing as it's not scalable.

[@adepurnama1642]

Hi Ricks, I just stumbled upon your channel recently and already learned a lot of things as a newbie. I just wanted to say thank you for all your videos, which I feel is very unique in terms of the topics and I feel that webflow tutorial is quite rare on youtube so your channel is very helpful. If I may ask, I’m curious on where do you find design resources for images or illustrations for example like the one on the hero section on this video. As a web designer, I found that finding those resources is quite a challenge. 😊

[@timothyricks]

Thanks so much! Resources can definitely feel like a challenge. For the Viral Positivity site in the video, a brand designer I work with created that hero illustration from a bunch of different images. Custom is usually going to be best to convey the message of the site and it doesn’t have to be complex. For my latest site, I made some Wizard illustrations in Spline 3D out of simple circles and did a tutorial on it. There’s a lot of free and paid illustrations online, and I’ve used some of them in the past, but everyone has access to those so it’s not really unique. When I’m crunched for time and do use them, I try to remix them a little by changing the colors and scene to match the message of the site. Here’s a stock resource that I’ve been liking lately for its uniqueness. icons8.com/illustrations/styles

[@dereksoup]

Legend

[@luckyloop7503]

awesome

[@diskomiks]

Great content. My question: in the style guide when i increase the body size to 2 ems the headings and the rest don't change in size. Shouldnt these scale in size when body size is increased?

[@scotthumphrey2336]

Hey Tim, really good clear video. One thing I think you should point out is the accessibility issues when using VW/VH with fonts. It overrides any browser personal settings for font sizing. As awesome as it looks, this is a pretty solid deal breaker for me. Would be interesting to hear your thoughts and whether it's something you've considered?

[@timothyricks]

Thank you, Scott! That’s a great point, and there’s a lot of workarounds for that. One option is to place an html embed inside a symbol on every page and set the body font size using custom code. The style sheet already has a symbol embed setup if you decide to add it. You can set the font size of each breakpoint using vw and allow percentages to double that size. This makes it accessible. /* Desktop Body Font Size */ body {font-size: calc(0.6vw + 50%);} /* Tablet Body Font Size */ @media only screen and (max-width: 991px) { body {font-size: calc(1.2vw + 50%);} } /* Mobile Landscape Body Font Size */ @media only screen and (max-width: 767px) { body {font-size: calc(2.0vw + 50%);} } /* Mobile Portrait Body Font Size */ @media only screen and (max-width: 479px) { body {font-size: calc(2.8vw + 50%);} }

[@scotthumphrey2336]

​@@timothyricks Awesome to know there's workarounds! I need to put it into practice to see it working and truly understand it but I think I get it. Thanks Tim.

[@timothyricks]

Scott Humphrey My pleasure! Just added the code in the cloneable’s symbol with a detailed explanation for anyone who wants to use it. All you need to do is drag it in from the symbols panel if interested.

[@iTubeFF]

Hi Timothy, thanks much for your great content! So helpful! I have a question that's not related to the topic of this video: In your example project (viralpositivity) you created colored sections that have sort of a wavy top border (maybe bottom too, not sure). I did the same thing with colored svg images that stick to the divs of the same bg color - but you did that with code, right? Can you explain how?

[@timothyricks]

Good question! I believe it can be done with code, but I just used colored svg images also. I put two seamless svgs side by side and moved them with Webflow interactions. www.shareviralpositivity.com/

[@iTubeFF]

@@timothyricks Ah, okay! Thx! Didn't know they were animated. Very cool.

[@joaofernandes835]

Let's say I'm designing a website in Adobe XD and my container is 1100px. This container helps me design things, but when I develop it in Webflow I want it to be completely responsive. From what I could tell from your instructions, I need to set the body font to VW, and then use all fonts in EM. The thing is when I do that its looks like I'm building everything by eye. It's not 'pixel perfect' let's say. For example, my h2 is 30px or an image is a 504px width, how do I convert it to my webflow design? Am I making sense? Maybe I'm missing something.

[@iTubeFF]

Hi Timothy, I have another question. Do you have a tutorial about custom cursers? Not the ones where an element is being added to the regular cursor but a completely new one that replaces the regular arrow or hand. Like you did on the Viral Positivity site.

[@timothyricks]

Good question! I don’t have a tutorial like that currently, but it’s made by using the same steps as the dot cursor but you turn the smoothing all the way down to 0 and hide the regular cursor with the body selected. kzbin.info/www/bejne/r3-9dqZ4qp2Jg9U

[@iTubeFF]

@@timothyricks Okay! Thanks for you quick replies, and have a good year 2021!

[@ziggerwebdesign1704]

Surprised you didn't mention REMs; effectively the choice of website visitors.

[@jan6743]

hi, what about REM vs EM? Some people say REM is easier, because EM just looks at the size of the parent container while REM looks at the root/body?

[@timothyricks]

Either one could definitely work! At the end of the day, it's a matter of personal preference. For me, REM is too rigid while EM offers much more flexibility and can be faster to build with if you know how to use it.

[@zoelizexin]

if the border radius is set to 1px, are we still using the em unit?

the 7:40 case is really depend for my experience. Yeah, it look exactly the same like scale, but the fact that when show on iMac screen, or worst case is on some screen like 21:9, everything is going ridiculous huge and for the 21:9 seem lost a lot of below content

[@great567]

So damn helpful and well explained. I noticed you use Paypal, have you thought of using Patreon?

[@timothyricks]

Thanks so much! No, I haven't thought of Patreon before, but I'll do some research on it.

[@orougoura2815]

Hi guys, I'm a little confused. I want to create my portfolio and also create websites to show what I can offer to my clients. However, I don't have enough money. So I wanted to know if the Lite account plan can allow me to use Custom code.

[@premiereels]

Hello, pls I need access to your styling guide

[@emotran]

My one concern with this approach is this new trend of super-wide screens.. vw just get completely messed up 😪

[@timothyricks]

Esteban Motran That’s the benefit of using em as mentioned in the video. At larger screen widths, you can set a media query or breakpoint to change the body font size to px and then everything will stop growing on larger screens but still scale on smaller ones.