1 00:00:02,170 --> 00:00:05,180 Why are units important to implement 2 00:00:05,180 --> 00:00:07,680 a proper responsive design? 3 00:00:07,680 --> 00:00:09,240 Well, to understand this, 4 00:00:09,240 --> 00:00:12,290 we'll compare some unit types right here, 5 00:00:12,290 --> 00:00:16,950 specifically focused onto the font size property, though. 6 00:00:16,950 --> 00:00:21,210 Now, these units are not limited to the font size property. 7 00:00:21,210 --> 00:00:24,100 These units, I will show you, can also be applied 8 00:00:24,100 --> 00:00:27,810 to properties like the width property, for example, 9 00:00:27,810 --> 00:00:31,130 but the font size specifically helps us to understand 10 00:00:31,130 --> 00:00:33,080 how these different units work, 11 00:00:33,080 --> 00:00:37,610 and why some might be a better choice when it comes to 12 00:00:37,610 --> 00:00:42,410 implementing a responsive design on our website. 13 00:00:42,410 --> 00:00:46,300 Now, let's dive into the units, and we'll get started with 14 00:00:46,300 --> 00:00:49,650 a very common one we know about already in the meanwhile, 15 00:00:49,650 --> 00:00:51,840 and this is the pixel. 16 00:00:51,840 --> 00:00:54,850 We use this throughout our course projects already, 17 00:00:54,850 --> 00:00:59,850 and pixels are easy to understand and translatable. 18 00:01:00,340 --> 00:01:03,920 Everybody knows what a pixel is, how big a pixel is, 19 00:01:03,920 --> 00:01:06,370 and how it can be used in our project. 20 00:01:06,370 --> 00:01:10,990 So setting 10 pixels for the font size are 10 pixels, well, 21 00:01:10,990 --> 00:01:13,290 on any device in the end. 22 00:01:13,290 --> 00:01:17,280 There is one big problem with the pixel unit, though. 23 00:01:17,280 --> 00:01:20,410 Pixels are not scalable, 24 00:01:20,410 --> 00:01:23,370 because if you increase the width of your device, 25 00:01:23,370 --> 00:01:25,720 well then the pixels won't scale. 26 00:01:25,720 --> 00:01:28,940 So 10 pixels will remain 10 pixels 27 00:01:28,940 --> 00:01:31,090 no matter how big the screen is. 28 00:01:31,090 --> 00:01:36,090 And, pixels also have a limited user focus. 29 00:01:36,150 --> 00:01:40,640 This means pixels, or using pixel values, take away some of 30 00:01:40,640 --> 00:01:45,220 the customization options a user has in the browser. 31 00:01:45,220 --> 00:01:47,080 What does this mean? 32 00:01:47,080 --> 00:01:52,030 In our project, we use the pixel value from time to time. 33 00:01:52,030 --> 00:01:53,190 Back in our code, 34 00:01:53,190 --> 00:01:57,360 you can see that we used a pixel value 35 00:01:57,360 --> 00:02:01,263 for the font size here, for our page logo. 36 00:02:02,490 --> 00:02:05,053 So this WebFood logo up here. 37 00:02:06,610 --> 00:02:09,163 And if we scroll down a bit further, 38 00:02:10,830 --> 00:02:14,423 we have a fixed font size for our navigation items. 39 00:02:16,110 --> 00:02:18,163 So these items right here. 40 00:02:19,430 --> 00:02:21,893 And if we have another look, 41 00:02:23,100 --> 00:02:26,850 we have a fixed font size for our main heading, 42 00:02:26,850 --> 00:02:28,430 the h1 element. 43 00:02:28,430 --> 00:02:32,350 We don't have a fixed font size with the pixel unit 44 00:02:32,350 --> 00:02:35,443 for any other elements on our website. 45 00:02:36,500 --> 00:02:41,360 The h1 element is this Browse Our Delicious Meals text here. 46 00:02:41,360 --> 00:02:45,230 Now, on the slide I showed you that the pixel unit 47 00:02:45,230 --> 00:02:48,430 has a limited user focus. 48 00:02:48,430 --> 00:02:53,110 If we now open the options menu in our Chrome browser, 49 00:02:53,110 --> 00:02:57,430 by clicking onto these three dots here, 50 00:02:57,430 --> 00:03:01,120 these three vertical dots, this is the options menu. 51 00:03:01,120 --> 00:03:05,870 So if we select this, and go to settings, 52 00:03:05,870 --> 00:03:07,633 and click onto this option, 53 00:03:08,710 --> 00:03:13,670 and there select the appearance option right here to open, 54 00:03:13,670 --> 00:03:17,073 well, basically, this menu. 55 00:03:19,940 --> 00:03:22,740 In there, you can change the font size. 56 00:03:22,740 --> 00:03:25,530 You have the medium font size by default, 57 00:03:25,530 --> 00:03:28,390 which you can also change here to other values, 58 00:03:28,390 --> 00:03:31,230 but you can even customize your fonts 59 00:03:31,230 --> 00:03:34,543 by opening this customized fonts menu down here. 60 00:03:35,610 --> 00:03:36,670 And in there, 61 00:03:36,670 --> 00:03:40,570 you now see the currently selected font size here. 62 00:03:40,570 --> 00:03:43,350 If you hover over this circle here, 63 00:03:43,350 --> 00:03:48,350 then you'll see the current font size is set to 16 pixels. 64 00:03:48,420 --> 00:03:52,203 Now, let me make this window a bit smaller for you. 65 00:03:53,540 --> 00:03:57,023 And let me now put our page next to it. 66 00:03:58,460 --> 00:04:00,630 And they closed the dev tools here 67 00:04:00,630 --> 00:04:03,100 to make only the page visible. 68 00:04:03,100 --> 00:04:08,020 Now, if we increase our font size in here from 16 to, well, 69 00:04:08,020 --> 00:04:09,553 a higher font size, 70 00:04:10,890 --> 00:04:14,560 then you'll see something interesting on our website. 71 00:04:14,560 --> 00:04:19,149 The font size in our card, our h2 element in here 72 00:04:20,279 --> 00:04:24,483 does adjust to the user's font size setting. 73 00:04:25,520 --> 00:04:28,280 Other font sizes, like the logo, 74 00:04:28,280 --> 00:04:30,910 the anchor text here in our nav items, 75 00:04:30,910 --> 00:04:34,740 or the h1 element for example, do not adjust. 76 00:04:34,740 --> 00:04:36,670 Why is this the case? 77 00:04:36,670 --> 00:04:41,230 Well, because we set the fixed font size for these elements. 78 00:04:41,230 --> 00:04:44,500 If you set a fixed font size of a pixel value, 79 00:04:44,500 --> 00:04:48,539 then these browser integrated options for the users 80 00:04:48,539 --> 00:04:50,670 are no longer working, 81 00:04:50,670 --> 00:04:53,400 because you as developer decide that 82 00:04:53,400 --> 00:04:57,040 only the font size you defined in the code 83 00:04:57,040 --> 00:04:59,730 is the one that should be used by 84 00:04:59,730 --> 00:05:02,520 the person browsing our website. 85 00:05:02,520 --> 00:05:04,600 And that's of course not the perfect solution, 86 00:05:04,600 --> 00:05:08,070 because if somebody, well, cannot read the font 87 00:05:08,070 --> 00:05:09,090 the way we designed it, 88 00:05:09,090 --> 00:05:12,420 because it might be too small on hers or his device, 89 00:05:12,420 --> 00:05:16,440 then why taking away the option to change the font size? 90 00:05:16,440 --> 00:05:21,440 Therefore, using pixel values is not a mistake by default, 91 00:05:21,800 --> 00:05:23,360 but you have to be careful 92 00:05:23,360 --> 00:05:26,730 to not take away the user's option here. 93 00:05:26,730 --> 00:05:30,230 So this is the big disadvantage of the pixel unit. 94 00:05:30,230 --> 00:05:34,810 It is not scalable and it reduces the user focus, 95 00:05:34,810 --> 00:05:38,750 so the options the user has to browse our website. 96 00:05:38,750 --> 00:05:41,730 Therefore, more dynamic units might be 97 00:05:41,730 --> 00:05:43,023 the better approach here.