Using Webflow Units Correctly to Speed Up Your Build Time

Поделиться
HTML-код
  • Опубликовано: 31 дек 2024

Комментарии • 69

  • @AntonyNorthcutt
    @AntonyNorthcutt 4 года назад +44

    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
      @timothyricks  4 года назад +5

      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. ruclips.net/video/81vzaO30720/видео.html

    • @AntonyNorthcutt
      @AntonyNorthcutt 4 года назад +5

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

  • @miqdamsajid875
    @miqdamsajid875 3 года назад +1

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

  • @dannidrenovci894
    @dannidrenovci894 2 года назад +3

    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!

  • @TheNNguyener96
    @TheNNguyener96 2 года назад

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

  • @designjo4662
    @designjo4662 3 года назад +1

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

  • @ziggerwebdesign1704
    @ziggerwebdesign1704 Год назад +1

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

  • @jassiljamaludhin9215
    @jassiljamaludhin9215 3 года назад +4

    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
    @abie1295 Год назад +1

    thank you for the class tim. ❤

  • @thiagofranca5846
    @thiagofranca5846 3 года назад +2

    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.

  • @blondelchedjou6202
    @blondelchedjou6202 2 года назад +1

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

  • @Kvsmymail
    @Kvsmymail 3 года назад +2

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

  • @framerprojects
    @framerprojects 4 года назад +4

    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!

  • @Wildenfree
    @Wildenfree 3 года назад +2

    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! 🙏🏾💯💯

  • @stevenbernstein6555
    @stevenbernstein6555 4 года назад +6

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

  • @iamtommyok
    @iamtommyok 4 года назад +1

    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!

  • @Hmdbln
    @Hmdbln 2 года назад

    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

  • @dorianakalaj
    @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!

  • @kao9620
    @kao9620 4 года назад +1

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

  • @Londya
    @Londya 4 года назад

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

  • @beckeralto
    @beckeralto 2 года назад

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

  • @garethellison01
    @garethellison01 3 года назад +1

    Thanks so so much for this. Amazing tutorial!

  • @derekentrekin8672
    @derekentrekin8672 3 года назад +1

    Great tutorial. Very much appreciated

  • @Abhimabi
    @Abhimabi 4 года назад +5

    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
      @timothyricks  4 года назад +3

      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. ruclips.net/video/81vzaO30720/видео.html

  • @solinterior
    @solinterior 4 года назад +3

    Thanks for sharing, extremely valuable! Cheers.

  • @jamesabadfernandez8002
    @jamesabadfernandez8002 4 года назад +2

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

  • @apodnies
    @apodnies Год назад

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

  • @nasiy
    @nasiy 4 года назад +1

    Amazing video! Learned so much ! Thank you

  • @webguymike
    @webguymike 4 года назад

    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!

  • @juraj001
    @juraj001 4 года назад +1

    Thank you Tim! Helpful for me.

  • @jonasarleth
    @jonasarleth 4 года назад +4

    Easy to understand 👍

  • @ShoneTheGenije
    @ShoneTheGenije 3 года назад +1

    Bravooo. And THANK YOU.

  • @adepurnama1642
    @adepurnama1642 3 года назад +1

    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
      @timothyricks  3 года назад

      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

  • @istvanvizner4393
    @istvanvizner4393 3 года назад +1

    Thank you!! You are awesome.

  • @scotthumphrey2336
    @scotthumphrey2336 4 года назад +1

    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
      @timothyricks  4 года назад

      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
      @scotthumphrey2336 4 года назад

      ​@@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
      @timothyricks  4 года назад +1

      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.

  • @joaofernandes835
    @joaofernandes835 4 года назад +1

    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.

  • @des7638
    @des7638 4 года назад

    Absolutely brilliant. Thank u again.

  • @des7638
    @des7638 Год назад +1

    Amazing.

  •  3 года назад

    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

  • @matthewbozanich6668
    @matthewbozanich6668 4 года назад +1

    Wow Thank you for this!

  • @iTubeFF
    @iTubeFF 4 года назад +1

    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
      @timothyricks  4 года назад

      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. ruclips.net/video/yNZEsBu8VMs/видео.html

    • @iTubeFF
      @iTubeFF 4 года назад +1

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

  • @diskomiks
    @diskomiks 3 года назад

    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?

  • @premiereels
    @premiereels Год назад

    Hello, pls I need access to your styling guide

  • @zoelizexin
    @zoelizexin Год назад

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

  • @dereksoup
    @dereksoup 3 года назад +1

    Legend

  • @orougoura2815
    @orougoura2815 3 года назад

    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.

  • @luckyloop7503
    @luckyloop7503 3 года назад +1

    awesome

  • @thewebart
    @thewebart 4 года назад

    Thank you!

  • @jan6743
    @jan6743 4 года назад

    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
      @timothyricks  4 года назад +1

      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.

  • @iTubeFF
    @iTubeFF 4 года назад

    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
      @timothyricks  4 года назад

      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
      @iTubeFF 4 года назад

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

  • @great567
    @great567 4 года назад +1

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

    • @timothyricks
      @timothyricks  4 года назад +1

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

  • @emotran
    @emotran 4 года назад

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

    • @timothyricks
      @timothyricks  4 года назад

      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.