1 00:00:02,120 --> 00:00:03,660 Responsive web design 2 00:00:03,660 --> 00:00:06,370 is all about media queries. 3 00:00:06,370 --> 00:00:09,490 A media query is a CSS code, 4 00:00:09,490 --> 00:00:14,233 so code you add to your CSS file which can look like this. 5 00:00:15,170 --> 00:00:18,720 You simply add this in a new line in your CSS code 6 00:00:18,720 --> 00:00:21,510 and start with @media. 7 00:00:21,510 --> 00:00:25,020 This tells the browser that we have a media query here, 8 00:00:25,020 --> 00:00:29,200 meaning we want to gather information or query information 9 00:00:29,200 --> 00:00:32,439 about the media type, so the device type 10 00:00:32,439 --> 00:00:34,110 and its specifications 11 00:00:34,110 --> 00:00:38,040 the person browsing our website is using. 12 00:00:38,040 --> 00:00:42,060 And if this device type meets certain criteria, 13 00:00:42,060 --> 00:00:45,620 then that code we define in this media query 14 00:00:45,620 --> 00:00:47,163 should be executed. 15 00:00:48,050 --> 00:00:51,620 These criteria are right here in this red part, 16 00:00:51,620 --> 00:00:56,040 either the min width or the max width, so either of the two, 17 00:00:56,040 --> 00:00:59,570 I'll dive into these in a few seconds, but the width here 18 00:00:59,570 --> 00:01:03,130 refers to the screen width so basically the resolution 19 00:01:03,130 --> 00:01:06,300 of the screen the user's device has. 20 00:01:06,300 --> 00:01:09,500 And then when you find such a min or max width, 21 00:01:09,500 --> 00:01:14,500 right here for example, I used atomic value of 1,200 pixels. 22 00:01:15,850 --> 00:01:19,750 This pixel value here refers to the device width. 23 00:01:19,750 --> 00:01:21,560 So the width of our screen 24 00:01:21,560 --> 00:01:25,070 where this media query becomes active. 25 00:01:25,070 --> 00:01:28,370 You are of course not limited to pixels here, 26 00:01:28,370 --> 00:01:31,100 you can also use em or rem. 27 00:01:31,100 --> 00:01:34,940 In the course, we'll mainly focus on to rem right here, 28 00:01:34,940 --> 00:01:37,940 because if the user adjusts the font size, 29 00:01:37,940 --> 00:01:41,430 then adjusting the breaking points according to this 30 00:01:41,430 --> 00:01:44,703 font size change typically makes a lot of sense. 31 00:01:46,070 --> 00:01:48,980 Once this criteria is fulfilled, as I said, 32 00:01:48,980 --> 00:01:51,310 we'll dive deeper into the max or min width 33 00:01:51,310 --> 00:01:54,650 in a few seconds, then certain CSS rules 34 00:01:54,650 --> 00:01:57,063 should be valid and executed. 35 00:01:57,940 --> 00:02:01,460 Here I added a single selector, the paragraph, 36 00:02:01,460 --> 00:02:02,860 just as an example. 37 00:02:02,860 --> 00:02:06,360 And inside this paragraph, we only have the font size 38 00:02:06,360 --> 00:02:09,960 as property that we want to change in the media query. 39 00:02:09,960 --> 00:02:13,860 In practice, you can of course also add multiple selectors 40 00:02:13,860 --> 00:02:18,140 and multiple properties for the specific selectors 41 00:02:18,140 --> 00:02:19,203 in the media query. 42 00:02:20,220 --> 00:02:21,410 So that's the idea. 43 00:02:21,410 --> 00:02:24,590 You write the media query, you tell the browser 44 00:02:24,590 --> 00:02:28,740 at which device with this media query should be executed, 45 00:02:28,740 --> 00:02:32,250 and then, well, you add the code that should be executed 46 00:02:32,250 --> 00:02:34,743 if this query becomes active. 47 00:02:36,100 --> 00:02:38,963 Now, what about this min width and max width though? 48 00:02:39,920 --> 00:02:43,610 Well, min width and max width are again related 49 00:02:43,610 --> 00:02:47,090 to the desktop-first or mobile-first approach 50 00:02:47,090 --> 00:02:49,923 that we are using when creating the website. 51 00:02:50,990 --> 00:02:55,140 If you created a desktop-first website like we did, 52 00:02:55,140 --> 00:02:58,680 we will use the max width keyword in here. 53 00:02:58,680 --> 00:03:00,630 Why the max width? 54 00:03:00,630 --> 00:03:02,810 Well, think about the logic we have 55 00:03:02,810 --> 00:03:04,493 when creating this website. 56 00:03:05,500 --> 00:03:09,120 We start with the large screen, with the desktop screen, 57 00:03:09,120 --> 00:03:12,090 and want to adjust our code downwards 58 00:03:12,090 --> 00:03:15,490 towards smaller device screens. 59 00:03:15,490 --> 00:03:18,300 This means starting from the current code base, 60 00:03:18,300 --> 00:03:21,060 we want to add certain break points, 61 00:03:21,060 --> 00:03:25,390 which could for example be right here at 1,200 pixels 62 00:03:25,390 --> 00:03:29,970 as defined above in the example, and if we are on a device 63 00:03:29,970 --> 00:03:34,410 with a maximum width of 1,200 pixels or below, 64 00:03:34,410 --> 00:03:37,810 then the code defined in this media query 65 00:03:37,810 --> 00:03:39,380 should be executed. 66 00:03:39,380 --> 00:03:42,090 So in simple words this means, for large screens, 67 00:03:42,090 --> 00:03:45,730 I want to have a font size of three rem for example, 68 00:03:45,730 --> 00:03:50,730 if the screen the user has is only at a maximum 69 00:03:50,730 --> 00:03:55,170 1,200 pixels wide, then two rem are sufficient for me. 70 00:03:55,170 --> 00:03:58,550 As I said, you can of course add different break points 71 00:03:58,550 --> 00:04:02,610 and multiple CSS properties and values in there. 72 00:04:02,610 --> 00:04:05,340 You can also add multiple media queries. 73 00:04:05,340 --> 00:04:08,550 For example, we could set a second break point 74 00:04:08,550 --> 00:04:12,860 for a maximum width of 768 pixels. 75 00:04:12,860 --> 00:04:15,530 So this means we again start from our current 76 00:04:15,530 --> 00:04:18,370 maximum screen width and say, okay, 77 00:04:18,370 --> 00:04:21,640 going down to a maximum width of 1,200 pixels, 78 00:04:21,640 --> 00:04:24,270 I want to have certain rules to be applied, 79 00:04:24,270 --> 00:04:27,810 and if we go further down to 768 pixels, 80 00:04:27,810 --> 00:04:31,390 then I want to have another font size, 135 from here, 81 00:04:31,390 --> 00:04:32,790 just to give you an example. 82 00:04:34,010 --> 00:04:36,190 So this is the max width keyword 83 00:04:36,190 --> 00:04:38,003 for the desktop-first design. 84 00:04:40,110 --> 00:04:42,140 For mobile-first, things are different, 85 00:04:42,140 --> 00:04:44,820 here, we use the min width. 86 00:04:44,820 --> 00:04:49,103 Again, because a different logic is applied right here. 87 00:04:50,010 --> 00:04:54,220 We created the code for our entire website mobile-first, 88 00:04:54,220 --> 00:04:57,340 so we start from the smaller device and now want 89 00:04:57,340 --> 00:05:00,800 to adjust our code to make sure the page layout 90 00:05:00,800 --> 00:05:04,320 also looks good on bigger devices. 91 00:05:04,320 --> 00:05:08,110 Therefore, we tell our browser here with the min width 92 00:05:08,110 --> 00:05:12,180 for media query that once our screen hits a certain width, 93 00:05:12,180 --> 00:05:16,770 for example, 768 pixels or more, then, well, 94 00:05:16,770 --> 00:05:18,860 a different font size, a different color, 95 00:05:18,860 --> 00:05:21,810 a different layout, whatever, you can't change, 96 00:05:21,810 --> 00:05:25,720 basically your entire CSS code should be applied. 97 00:05:25,720 --> 00:05:28,980 As for the desktop-first design, also for mobile-first 98 00:05:28,980 --> 00:05:31,670 with the min width, we can of course also add 99 00:05:31,670 --> 00:05:33,120 multiple break points. 100 00:05:33,120 --> 00:05:35,400 Here for example, again, the break point 101 00:05:35,400 --> 00:05:37,393 at 1,200 pixels or more. 102 00:05:38,460 --> 00:05:40,190 But that's important to understand. 103 00:05:40,190 --> 00:05:42,900 In the desktop-first example with max width, 104 00:05:42,900 --> 00:05:47,170 our break points min 1,200 pixels or less, 105 00:05:47,170 --> 00:05:52,170 768 pixels or less, so this is when this code is executed. 106 00:05:52,240 --> 00:05:57,240 For min width, we define that for 768 pixels and more, 107 00:05:57,330 --> 00:06:00,290 and for 1,200 pixels and more, 108 00:06:00,290 --> 00:06:01,920 this code should would be executed. 109 00:06:01,920 --> 00:06:04,603 So it's important to keep this difference in mind. 110 00:06:05,660 --> 00:06:09,080 What's also important is that the media query code 111 00:06:09,080 --> 00:06:13,123 is not something that replaces the existing CSS code. 112 00:06:13,970 --> 00:06:17,730 The code you write or code base is still valid, 113 00:06:17,730 --> 00:06:21,140 but once the media query kicks in, just the rules, 114 00:06:21,140 --> 00:06:25,590 the properties defined in this media queries are added. 115 00:06:25,590 --> 00:06:29,360 This means if we define a font size for the initial 116 00:06:29,360 --> 00:06:32,100 desktop website and now we have a media query 117 00:06:32,100 --> 00:06:34,970 which takes place and changes the font size, 118 00:06:34,970 --> 00:06:39,170 then only this changed font size will become active. 119 00:06:39,170 --> 00:06:41,750 All other properties which are not mentioned 120 00:06:41,750 --> 00:06:46,040 in the media query are of course still executed and running 121 00:06:46,040 --> 00:06:47,613 as initially defined. 122 00:06:49,910 --> 00:06:52,960 With that, we are almost there to implement 123 00:06:52,960 --> 00:06:55,150 these media queries in our project. 124 00:06:55,150 --> 00:06:57,957 There is just one other thing I want to give you, 125 00:06:57,957 --> 00:07:00,760 I tend to have it a bit easier when working 126 00:07:00,760 --> 00:07:04,190 with this media queries, you see these two break points 127 00:07:04,190 --> 00:07:06,620 I defined as an example right here, 128 00:07:06,620 --> 00:07:09,770 and for these break points, we have some common break points 129 00:07:09,770 --> 00:07:13,010 for media queries that we can keep in mind. 130 00:07:13,010 --> 00:07:16,820 This is of course not a, well, only these break points 131 00:07:16,820 --> 00:07:19,500 are the correct ones approach, these are just 132 00:07:19,500 --> 00:07:21,780 some common break points which helps you 133 00:07:21,780 --> 00:07:24,370 to dive into these queries. 134 00:07:24,370 --> 00:07:27,970 Typically, we can differentiate between portrait mode, 135 00:07:27,970 --> 00:07:31,990 so devices where the content is consumed in portrait mode, 136 00:07:31,990 --> 00:07:33,563 and landscape mode. 137 00:07:34,470 --> 00:07:38,130 Typical portrait devices are of course smartphones 138 00:07:38,130 --> 00:07:40,270 and partially tablets. 139 00:07:40,270 --> 00:07:43,370 Of course, tablets are also used to consume the content 140 00:07:43,370 --> 00:07:46,700 in landscape mode, but typically adding to break points 141 00:07:46,700 --> 00:07:49,773 for smartphones and tablets makes a lot of sense. 142 00:07:50,720 --> 00:07:55,480 Here for smartphones, we have a break point of 480 pixels, 143 00:07:55,480 --> 00:07:59,573 and for tablets, we typically use 768 pixels. 144 00:08:00,690 --> 00:08:04,280 For landscape devices, we have three core examples. 145 00:08:04,280 --> 00:08:07,470 We have a notebook, a desktop computer, 146 00:08:07,470 --> 00:08:09,440 and of course the TV screen 147 00:08:09,440 --> 00:08:11,450 as the biggest device right here. 148 00:08:11,450 --> 00:08:14,560 There we also have three example widths and pixels 149 00:08:14,560 --> 00:08:16,170 which can be used. 150 00:08:16,170 --> 00:08:21,170 1024 pixels for notebooks, 1200 pixels 151 00:08:21,360 --> 00:08:25,800 for desktop computers and everything above 1200 pixels 152 00:08:25,800 --> 00:08:29,920 can be tailored towards TV screens. 153 00:08:29,920 --> 00:08:33,919 As I said, not the final break point summary right here, 154 00:08:33,919 --> 00:08:36,110 but if you need some values at hands, 155 00:08:36,110 --> 00:08:38,523 then you can refer to this slide. 156 00:08:39,740 --> 00:08:42,940 That's the theory though, this is how responsive design 157 00:08:42,940 --> 00:08:46,790 works in theory and how media queries can be implemented. 158 00:08:46,790 --> 00:08:48,330 So let's go back to the project 159 00:08:48,330 --> 00:08:51,523 and see which media queries we might need right there.