Using Webflow Units Correctly to Speed Up Your Build Time

what's up webflow fam in this video i want to show you how using units correctly can speed up your webflow process so we're going to cover these basic units pixels which is a fixed value viewport width which is a percentage of the entire screen width percent which is a percent of its parent container and then em which is a percent of the font size so pixels for instance if we were to set say this image to 500 pixels wide by 300 pixels high and then we were to preview once we change the width of the screen the image width isn't changing at all it's a set unit that's not going to scale if however we were to switch it to viewport and say 50 viewport width that's 50 of the width of the screen by 30 viewport width for the height as we change the width of the browser the image starts to scale as we would expect so already we have a much more scalable more fluid design now percent is a percent of its parent and this is a little different than viewport with viewport width is a percent of the entire screen but as we see here if we set say this fill to 30 percent the width of its parent or whatever percentage we decide to set here once we're ready to change the parent container and we change the width of that the item inside is going to grow in scale because it's a percentage of its parent not of the entire screen so that's the main difference between those two um em is like this magical unit it's this sort of like problem solver for a lot of things based on the font size and webflow really comes in handy when using em so if we were to set the font size to 100 pixels of this button and then we were to set its width and height to 200 pixels that's looking fine until we decide to change the font size again say we do 200 pixels then we would have to change the width and height again instead we can set it to em and em is going to scale with the font size so now as we change the font size of the button the size of the button scales as well and this is really handy for making quick adjustments on mobile without having to change a bunch of other properties so the way this works is for instance it's set to 2 2em for the width that's two times the font size of the parent container so since the font size is 50 this would be 100 pixels for the width if the font size was 100 pixels the width would be 200 pixels so that's kind of the way that ems work now once you start to really master ems and use them correctly it can really speed up the process of development so for instance if we were to set everything in this nav bar the arrows the margins the logo to em for the size now if we grab the nav bar itself and change the font size everything inside is gonna grow in scale or if we grab the footer and change the size there everything inside is going to grow in scale as well so we wouldn't didn't have to add a ton of new classes here or make any sort of messy styles um just everything inside is scaling based off the font size of the nearest parent so that comes in handy when you're maybe building this out on mobile and you decide all these nav links to need to be a lot larger and then have menu or maybe you just want to quickly reduce the size of everything in the footer to make it a little smaller you can use ems and grab the parent container so if we look at how all these work together there's a couple examples that we can use to put this into practice first of all say this section here we're using across the entire website it all has a hundred pixels padding left and right that's looking fine right here um and it's look it's working okay but as we go down to tablet or even mobile we'll see that that 100 pixels is not changing and things start to look really squished um so yeah we could reduce it here but we're creating another style that we maybe didn't need to create and it's the little things like this that slow down your development process in the long run so what would be a better unit we could have used for the left and right padding to make it reduce as the width of the browser reduces and if you guessed viewport width you would be correct so that would be a much better unit where we wouldn't have to create a new style right here in this case um so let's say in this next example we decided to switch it to viewport width and that's working fine and let's say we have two containers that reach about half of the parent container so there are 40 viewport width for each of these so we got 10 and 10 on the sides and 40 and 40 in the middle um now here let's say on tablet we decide to reduce this to six viewport width for the paddings now these two containers that are 40 viewport width aren't actually spanning the whole width of their parent what would have been a better unit we could have used here instead of viewport width to make it span the whole width of its parent and if you guessed percent you would be correct so if we were to set each of these columns to 50 then once we reduced the padding on mobile we wouldn't have to create a new style or a new class here everything would have just scaled because it's 50 of any available space within its parent so percentage would have been a lot better here now in this next case we have everything set to em so as we scale the size of the container everything inside it is shrinking based on the font size and that's working fine but say on tablet we want to increase the size of this icon and let's say we increase it to 4 em maybe for the width and height now we would have to increase the icon itself as well because that is set to em so what would have been a better unit we could use for the icon so that it scales it grows in size with the width of its parents and if you guess percent you were correct again so those are basically how we can think smarter about web design setting up your style so that i found on average for me mobile design making things responsive takes up about 10 of my total dev time because i'm thinking of styles in this way trying to make things to where they'll scale really easily when i need to adjust them on mobile so if we look at most websites today the way that it works is everything's set to pixels for the most part and there's a max container like in this case 1080 pixels max with for the sides and that works fine in most cases um in some instances on like larger screens there's a ton of empty space on each side and then smaller links like this start to get lost but nothing actually changed the h1 is still 94 pixels in both instances it just looks a lot smaller here because the screen size is so much larger so that works for most site designs but if you have a sort of a modular design site um it starts to get a little complex and a little difficult to work with so something that's a little easier to work with in a lot of cases is to use base everything in one viewport with so everything scales up with the width of the browser and in this case what we'll see is the experience on a macbook air looks the exact same as the experience on an imac and this works really well for certain types of designs more than others but the way that we do this is the body font size is set to viewport width all the h1 through h2s are set to em so they're scaling based on the body font size and then all our images and paddings are also either set to viewport width or em so everything is relative to viewport with and to make this a little bit easier i created a style sheet that you can actually clone it's free to clone and it basically removes all the unnecessary styles in web flow so all the top and bottom margins that are pixels on the headings um anything unnecessary and it switches all our line heights to just a unitless line height so it'll scale and this is kind of what it looks like so if we grab our headings for instance you'll see the size is set to em the line height is set to 1.4 so as we change the font size of the heading the line height will scale if we grab the body and change the font size of that you notice every font size is scaling up and down with it so on mobile if we want to reduce all our font sizes we just have to change one size and they'll all scale down but let's look at this on 5000 pixel screens everything scaled up seamlessly except this button because it was set to pixels for the paddings and the margins so if we set that all to em instead what we'll notice is that on smaller screens it's going to look the exact same as it does on a larger screen so nothing changes we'll also have to think of things like drop shadows border radiuses actual borders themselves they would all need to be set to em so that way it scales on larger screens just the same as it does on smaller screens so let me know if you have any questions about that i'll drop the link to the style guide in the description and i hope you enjoyed

Channel: Timothy Ricks

Views: 9,868

Keywords: responsive, scale, design, website, desktop, large screens, mobile, webflow, tutorial, how to, faster, quicker, beginner, basics, intro, course, lesson, small screens, screen sizes, typography

Id: 95AbhLIYQbQ

Length: 9min 46sec (586 seconds)

Published: Mon Aug 24 2020