WEBVTT 0 00:00.770 --> 00:07.260 All right. So, in the last lesson, we managed to change the z-index, or rather the stacking order, of our 1 00:07.290 --> 00:12.060 title image over here to make it display behind the feature section. 2 00:12.060 --> 00:17.990 Now if we look closely, though, at this title section, there’s still a few teething problems. 3 00:18.000 --> 00:25.050 Firstly, if I move this into mobile size, you can see that my image actually disappears, and it's also 4 00:25.050 --> 00:27.790 still rotated, which is really odd. 5 00:27.810 --> 00:33.930 The second thing is that, even when I'm in the mobile size when it's really small, my title is still left 6 00:34.020 --> 00:37.080 aligned, which also looks very strange. 7 00:37.080 --> 00:42.380 So how can we modify our web site’s looks on mobile? 8 00:42.820 --> 00:48.480 Well so far the responsiveness that we're getting whereby, you know, that the left and the right parts 9 00:48.480 --> 00:50.120 here are taking up 50 percent, 10 00:50.130 --> 00:52.580 but then on mobile they go into 100 percent, 11 00:52.620 --> 00:57.730 this is coming from Bootstrap grids, remember, and it works well enough. 12 00:57.810 --> 01:06.060 But if we wanted to fine tune this, we’ll need to use another advanced feature of CSS, which are CSS media 13 01:06.060 --> 01:11.330 queries. And I want to show you how you can actually use just plain old CSS 14 01:11.490 --> 01:18.550 in order to produce responsive designs by learning about these media queries. So you might ask, you know, 15 01:18.570 --> 01:19.890 why do I care, right? 16 01:19.890 --> 01:22.650 Why do I care how good it looks? 17 01:22.650 --> 01:28.220 Why do I have to make so many designs for how it looks on mobile as well as on web? 18 01:28.230 --> 01:33.300 You know, why can't I just have one design and just be okay with it 19 01:33.300 --> 01:35.280 looking good on the web, right? 20 01:35.550 --> 01:44.670 Well the problem is that since about October ish 2016 the number of people who browsed the web on mobile 21 01:44.760 --> 01:48.220 overtook those who browsed on desktop. 22 01:48.240 --> 01:54.510 So there's actually more people right now who go on web sites from their phone than from a desktop computer 23 01:54.540 --> 01:55.730 or a laptop. 24 01:55.740 --> 02:03.540 So it really is the generation of mobile first and this is why we always have to think about responsiveness 25 02:03.690 --> 02:05.740 whenever we design web sites. 26 02:05.760 --> 02:08.100 Now what are some of the ways that we can deal with this? 27 02:08.220 --> 02:14.940 Well, number one is do nothing, basically bury your head in the sand and pretend that nothing happened 28 02:15.250 --> 02:19.360 and just you know make your normal desktop web sites and be done with it. 29 02:19.410 --> 02:22.940 Well the problem is that you actually get punished for this kind of behavior. 30 02:23.010 --> 02:30.210 So you may or may not know, but Google rankings are affected by whether if your web site is mobile friendly 31 02:30.300 --> 02:36.510 or not, and there's in fact a really helpful web page where they allow you to put in the URL of your 32 02:36.510 --> 02:40.230 web site and they will test to see how mobile friendly it is. 33 02:40.410 --> 02:42.090 If it's not mobile friendly at all, 34 02:42.120 --> 02:49.030 as in, it looks really awful and difficult to read on mobile, you get penalized in the Google search rankings, 35 02:49.160 --> 02:53.260 and we all know nobody checks anything on google page two or page three. 36 02:53.310 --> 02:59.340 So this really really does matter, especially if you're running a business, right? Now, how can we use a 37 02:59.340 --> 03:00.570 web site to test this? 38 03:00.630 --> 03:04.660 Well we can go to our trusty 90s web sites. 39 03:04.920 --> 03:08.600 This one is a development design studio 40 03:08.610 --> 03:14.630 called Lambsoft, and it's pretty interesting if you just take a look at it actually. 41 03:14.850 --> 03:20.270 Firstly you get a whole 20 seconds of looking at their logo. 42 03:20.700 --> 03:26.690 Then you get another 20 seconds of looking at this flash animation. 43 03:26.700 --> 03:34.080 So it just repeats itself forever until either we die of boredom or 20 seconds is up. 44 03:34.500 --> 03:41.690 And then, as if all of that wasn't enough, you get another flash animation for 15 seconds. 45 03:43.190 --> 03:51.320 But, finally, we get on to the home page and it is Killer Web Site Development Lambsoft Productions. 46 03:51.320 --> 03:55.390 Let me make your web site a place to be proud of. 47 03:55.430 --> 03:59.940 I'm really not sure if we should be proud of this web site but it seemed like a relic from the 90s. 48 03:59.990 --> 04:05.510 So maybe if we you know time travel then this is what was actually cool back then. 49 04:05.510 --> 04:13.980 Anyways, this is clearly not a mobile optimized web site. I mean, just what happens, nothing happens, right? 50 04:14.180 --> 04:22.530 So if we plug this into our Mobile-Friendly Test, let's paste that URL in here and let's hit Run Test. 51 04:22.550 --> 04:27.830 Let's see what the verdict is from Google. 52 04:27.960 --> 04:28.230 All right. 53 04:28.230 --> 04:29.970 So definitely no. 54 04:29.970 --> 04:33.030 Page is not mobile friendly. 55 04:33.030 --> 04:40.660 The text is too small, the viewports are not set, and you will be punished on the Google search rankings. 56 04:40.680 --> 04:46.770 So let's not do that. Let's not ignore mobile friendliness, and we have to do something. 57 04:46.770 --> 04:47.780 So what can we do? 58 04:48.000 --> 04:55.140 Well, we can either make a separate mobile site which redirects users if they're trying to browse from 59 04:55.140 --> 04:58.080 mobile. And many large web sites actually do this. 60 04:58.080 --> 05:04.110 For example, if you try to go onto Facebook on your mobile device, not through the app, but through your 61 05:04.110 --> 05:10.560 browser, then you actually get redirected not to facebook.com but m.facebook.com. And that 62 05:10.610 --> 05:18.120 m stands for mobile, because they've actually created a separate site that's laid out perfect for mobile 63 05:18.120 --> 05:21.610 viewing, and you can go there on your normal laptop as well, 64 05:21.630 --> 05:26.220 if you just head over to m.facebook.com. And you'll see how they've structured and designed the 65 05:26.220 --> 05:32.720 web site completely differently from their desktop version in order to be more mobile friendly. 66 05:32.720 --> 05:37.470 Now that's also a lot of work. You're kind of designing two separate web sites, 67 05:37.470 --> 05:38.180 right? 68 05:38.190 --> 05:44.250 So the third solution, and what I would recommend as the best solution, is to just make your web sites 69 05:44.340 --> 05:52.390 responsive, so that it looks nice on desktop, on laptop, on iPad, on tablet, and on your mobile. 70 05:52.590 --> 05:55.910 And that is what we're going to learn about today. 71 05:55.980 --> 06:02.430 We're going to make our web site responsive not using external tools like Bootstrap or, you know, any 72 06:02.430 --> 06:09.030 of the other frameworks, but we're going to use CSS native functionality, and the one that we'll be using 73 06:09.120 --> 06:13.860 are media query breakpoints in order to achieve this responsiveness. 74 06:13.860 --> 06:17.010 But firstly, what exactly are media queries? 75 06:17.070 --> 06:21.990 Well, let's find out by creating a new Code Ply playground. 76 06:21.990 --> 06:27.870 Now the first thing that I'm going to do is, I'm actually going to remove our Bootstrap framework, so 77 06:27.870 --> 06:33.920 I'm going to go with No Framework, because as we said before this is a pure CSS feature, 78 06:33.930 --> 06:38.170 it's not related to Bootstrap or even jQuery. 79 06:38.370 --> 06:43.260 And in fact if you leave the Bootstrap framework, then it might actually affect the media queries. 80 06:43.260 --> 06:48.200 So I want you to remove the framework completely and hit save. 81 06:48.210 --> 06:54.030 Now we're going to create a new h1, just going to say Hello World. 82 06:54.030 --> 06:58.800 And if I hit run you can see we've got this nice black text. 83 06:58.800 --> 07:05.910 And as we all know we can go into the CSS and simply say something like, let's target the h1 and change 84 07:05.910 --> 07:07.760 its color to red. 85 07:07.890 --> 07:11.980 So we know that when I hit run it's going to change the text color to red. 86 07:12.270 --> 07:17.680 Now what if I only want it to be red under certain conditions? 87 07:17.820 --> 07:26.410 So, say if I wanted to say that, only when my web site is being printed do I want the text to be red. 88 07:26.460 --> 07:29.780 How can I affect my website on that kind of level? 89 07:29.880 --> 07:35.340 Well, this is where media queries come in. So I can say @media, then I'm going to give it a statement 90 07:35.340 --> 07:37.660 to evaluate whether it's true or false. 91 07:37.830 --> 07:45.180 So I'm going to say @media print. So if our web site is under the condition of being printed, then this will 92 07:45.180 --> 07:46.220 equal true, 93 07:46.500 --> 07:50.900 and that means that all of this code inside the brackets will get carried out. 94 07:51.090 --> 07:57.960 So now let's hit run and you can see that under normal conditions my web site just has an 1 that's 95 07:57.960 --> 07:59.590 black. But 96 07:59.610 --> 08:08.850 if I now hit print, you can see that the text is now red, and that comes from our handy media query. 97 08:08.850 --> 08:11.930 Now there's other media queries apart from print. 98 08:11.940 --> 08:18.640 There are things such as screen which is dependent on the screen size or screen resolution. 99 08:18.840 --> 08:26.670 There's also another one, for example speech, which will be activated if the web site is being read to 100 08:26.730 --> 08:29.190 a visually impaired person for example. 101 08:29.190 --> 08:35.670 So we can use all of these different types for our media query, and this is kind of roughly how the media 102 08:35.670 --> 08:37.590 queries are structured. 103 08:37.590 --> 08:43.890 Firstly you have the @media keyword, which says that everything that comes afterwards is a media query. 104 08:43.890 --> 08:50.080 The next thing is the type of media or medium that we are selecting on. 105 08:50.100 --> 08:56.160 So the code should only be activated if the web site is being displayed on a screen, or if it's being 106 08:56.160 --> 09:00.000 printed, or if it's on a screen reader, all of those kind of things. 107 09:00.180 --> 09:02.420 And then the third thing is the feature. 108 09:02.460 --> 09:06.390 So, as we said before, the media query is a query, 109 09:06.390 --> 09:09.920 so we're checking to see if something is true or false. 110 09:10.050 --> 09:19.800 So we can check to see, for example, if the media is a screen, i.e. being displayed on a device, and the feature 111 09:19.800 --> 09:23.950 is that its minimum width is 900 pixels, 112 09:23.970 --> 09:29.540 so we're checking to see what size the web site is being rendered in. 113 09:29.620 --> 09:35.120 Is it being rendered in something that's really large like a desktop computer? 114 09:35.320 --> 09:42.220 Well, in that case we're going to change something. Now, instead of checking whether if our web site 115 09:42.250 --> 09:48.940 is in the printed condition, we can also check for other things like screen resolution or screen size, 116 09:49.240 --> 09:54.120 which is more applicable to when we want to make our web sites responsive. 117 09:54.190 --> 10:01.720 So let's delete the print statement and let's say instead that under the conditions where our web site 118 10:01.750 --> 10:13.330 has a max width of say 900 pixels. So we know from Code Ply's estimates that a laptop is roughly 1200 119 10:13.330 --> 10:21.310 by 264 pixels and a tablet is roughly 880 pixels by 264, and the 880 is of course 120 10:21.310 --> 10:22.140 the width. 121 10:22.420 --> 10:30.430 So that means that if we say that under the conditions where the web site is being displayed and the 122 10:30.430 --> 10:33.980 maximum width is 900 pixels, 123 10:34.180 --> 10:41.700 so if the web site is 900 pixels in width or less, then we will change the h1's color to red. 124 10:41.980 --> 10:47.170 So let's pop this out and we can see that on laptop size it is black, 125 10:47.170 --> 10:48.260 h1 is black, 126 10:48.430 --> 10:54.930 but as we get smaller and we go to the tablet size, you can see that our color just changed dramatically, it 127 10:54.930 --> 11:00.520 just turned red. And when our web site is any size that's 900 pixels or smaller, 128 11:00.520 --> 11:07.610 so tablet or mobile or, you know, any sort of small device, then we can change and affect our 129 11:07.690 --> 11:10.770 CSS. So what might you want to change in here? 130 11:10.780 --> 11:19.090 So, for example, what we might want is that, say, under normal conditions we want the h1 to be displayed 131 11:19.090 --> 11:22.600 with a font size of say 30 pixels, 132 11:22.660 --> 11:23.800 right? 133 11:23.950 --> 11:27.240 So if I hit run you can see that it's roughly the same size as before, 134 11:27.370 --> 11:30.670 it's long enough for somebody on a desktop size. 135 11:30.670 --> 11:39.190 Now what if, when our screen gets smaller, say on a tablet or mobile, I want the font size to be a little 136 11:39.190 --> 11:42.040 bit bigger so that it's easier to see? 137 11:42.250 --> 11:48.640 So let's change the font size on mobile tablet to say 60 pixels, double the size. 138 11:48.640 --> 11:54.730 So now if I hit run you can see that nothing really happens on the desktop laptop sizes, 139 11:54.850 --> 12:01.400 but once I trip that breakpoint, that 900 pixel point, you can see it's right here, 140 12:01.690 --> 12:08.460 then our font gets doubled in size and it's now much easier to see on a smartphone. 141 12:08.470 --> 12:10.070 Now you might want to go the other way too. 142 12:10.090 --> 12:15.730 Maybe you want the text to be smaller on the phone and larger on the desktop to take up more space that's 143 12:15.730 --> 12:17.320 available. 144 12:17.320 --> 12:26.470 But essentially we've managed to create a media query breakpoint at 900 pixels, where when 145 12:26.470 --> 12:34.750 this becomes true, the code that's inside these brackets gets enacted, and we override the existing font 146 12:34.750 --> 12:38.600 size with our font size for smaller devices. 147 12:38.640 --> 12:44.410 Now, the wording of these breakpoints are a little bit confusing, I must admit, because you can have 148 12:44.410 --> 12:46.810 max-width and you can have min-width. 149 12:46.930 --> 12:54.490 So if the minimum width is 900 pixels then we're now targeting in the other direction. We're saying that 150 12:54.880 --> 13:02.950 when our web site is being displayed on any device that's 900 pixels wide or greater, then we want to 151 13:02.950 --> 13:04.190 change the font size. 152 13:04.210 --> 13:12.970 So if I hit run now, you can see that when this is being displayed on a laptop or desktop size, it's massive, 153 13:13.090 --> 13:20.060 but when I trip that 900 breakpoint and go into tablet or mobile, then it reverts to the normal styling. 154 13:20.110 --> 13:25.660 So this media query is only valid from 900 pixels onwards. 155 13:25.660 --> 13:32.320 Now, you can also use more than one parameter to really narrow down the range where you want this media 156 13:32.320 --> 13:33.560 query to occur. 157 13:33.760 --> 13:46.420 So for example you can combine a minimum width of say 900 pixels and a maximum width of say 1000 pixels. 158 13:46.900 --> 13:55.480 Then in this case our code inside these brackets is only going to be triggered and used on a viewport 159 13:55.690 --> 14:03.940 that is greater than 900 pixels but less than 1000 pixels, so there's only a 100 pixel gap where this 160 14:03.940 --> 14:05.490 code is going to work. 161 14:05.600 --> 14:07.590 So let me show you what this looks like. 162 14:08.080 --> 14:15.730 So you can see that normally we have our 30 pixel h1, and when it's really small we still have a 30 163 14:15.730 --> 14:16.830 pixel h1. 164 14:16.870 --> 14:25.690 But I flashed through the middle because I want to show you that there's a small 100 pixel gap where 165 14:25.780 --> 14:34.960 we reach 900 pixels but before 1000 pixels that our h1 is changed by our code in here. 166 14:35.040 --> 14:40.590 So you notice just now that I used a few different words and this is something that you have to be really 167 14:40.590 --> 14:44.930 careful about when somebody else talks about the size of something, 168 14:44.940 --> 14:45.240 right? 169 14:45.240 --> 14:50.800 So for example you can have something that is the size of the device. 170 14:50.820 --> 14:52.860 So this is a fixed thing. 171 14:52.860 --> 15:00.270 So, for example, your laptop is going to have a larger device width than the tablet, and you can't change 172 15:00.330 --> 15:05.880 the device width unless, you know, you decide to saw it in half or something, which probably won't work anymore. 173 15:05.880 --> 15:08.570 Don't do this at home please. Don’t blame me on this. 174 15:08.670 --> 15:13.340 I don't want anybody’s parents or spouses to blame me for their broken TVs. 175 15:13.530 --> 15:16.590 But your device width doesn't change. Now, 176 15:16.620 --> 15:19.820 the other thing that we talk about is your browser size. 177 15:19.830 --> 15:24.040 Now, as you saw, I can change my browser size simply by toggling it left and right. 178 15:24.420 --> 15:29.490 Now, the last thing, which is what we tend to talk about when we're talking about responsiveness is the 179 15:29.490 --> 15:30.490 viewport. 180 15:30.600 --> 15:35.100 And this is the size of the screen that your web site is being displayed on. 181 15:35.220 --> 15:40.290 So all of these terms mean different things and it's really important that you remember what they mean 182 15:40.950 --> 15:44.370 when we refer to it because otherwise you get a little bit confusing. 183 15:44.370 --> 15:48.660 All right. So let's head back to apply what we just learned to our project. 184 15:48.660 --> 15:56.070 So what we need to happen is that when we go into the tablet size or smaller we need to change the position 185 15:56.430 --> 16:02.940 of our image from position absolute, where it’s taken out of the HTML flow and it doesn't take up its 186 16:03.000 --> 16:05.860 own space, even when you can't even see it anymore, 187 16:05.880 --> 16:07.050 like in this case. 188 16:07.140 --> 16:13.890 So, in order to do that, we have to change the position of this to static when it's being displayed on 189 16:13.890 --> 16:14.810 a smaller screen 190 16:14.820 --> 16:18.500 so it starts taking up the full amount of space that it needs again. 191 16:18.690 --> 16:24.840 Now the other thing I want, I want it to transform and rotate back into the straight axes. 192 16:24.840 --> 16:32.570 So I want that image to be straight and not tilted like we have in the laptop size. 193 16:32.610 --> 16:37.510 And finally I want the text in this title to be center aligned 194 16:37.680 --> 16:43.410 when we're on the tablet and mobile size, so it doesn't look so weird being left aligned. 195 16:43.410 --> 16:49.490 And, in terms of Bootstrap grids, you can see the point at which the medium size triggers. 196 16:49.530 --> 16:52.590 So the tablet size triggers right here. 197 16:52.680 --> 16:58.230 And, if you open up Chrome Developer Tools, and we're just not actually using the panel, if we just drop 198 16:58.230 --> 17:04.560 it down, you can see that on the right up here we've got the width being displayed as I toggle it. 199 17:04.560 --> 17:11.460 So let's take a look at our web site design and see at which width or at which point does our design 200 17:11.460 --> 17:12.750 start getting weird. 201 17:12.750 --> 17:20.160 So as we get narrower and narrower our title and our images are being kind of squished together more 202 17:20.160 --> 17:20.810 and more. 203 17:20.820 --> 17:26.670 So at this point we're at what, 128, and this still looks good, but any smaller than 204 17:26.670 --> 17:29.540 that then it starts looking kind of weird. 205 17:29.580 --> 17:33.470 So let's target that size with a media query. 206 17:33.540 --> 17:38.220 So we're going to create a media query just by using the media keyword, then we're going to say the width 207 17:38.250 --> 17:43.690 that we want to target, and in this case I'm going to use max-width, because this is going to refer to 208 17:43.680 --> 17:53.440 the viewport sizes where the width is, say, 128 pixels and below, which is going smaller and smaller. 209 17:53.460 --> 17:57.950 So this is a good point, I think, to start changing the CSS. 210 17:58.170 --> 18:08.680 So at this point in, not really time, but in a viewport width, I'm going to change the title image. So you 211 18:08.680 --> 18:12.610 would write your CSS just as you would write it inside anywhere else, 212 18:12.610 --> 18:18.700 but it's now inside this media query, where this code only gets carried out under the conditions where 213 18:18.700 --> 18:19.590 this is true. 214 18:19.690 --> 18:26.500 So when our viewport is 1028 pixels or smaller, then we want to change our position back 215 18:26.500 --> 18:27.800 to static. 216 18:28.120 --> 18:35.950 And if I hit save and refresh then you'll notice that when I get into the smaller sizes, when I go past 217 18:35.950 --> 18:41.060 that break point, then our image becomes the original static size. 218 18:41.080 --> 18:47.350 So it's back into the flow of the HTML, and it's not getting cut off by anything else. 219 18:47.350 --> 18:53.380 Now the next thing we want to do is to rotate it back to the center. So to do this we have to use the 220 18:53.380 --> 18:55.870 transform property. 221 18:56.020 --> 18:57.810 And we're going to rotate it. 222 18:57.820 --> 19:04.060 Now you might think that you need to rotate it backwards so you say minus however many degrees. 223 19:04.210 --> 19:06.960 But actually this is the absolute rotation. 224 19:07.030 --> 19:11.880 So this is rotate back to zero which means that it's straight up. 225 19:11.890 --> 19:19.780 So let's hit save and refresh and you can see now, on the tablet size and mobile size, we're getting 226 19:19.840 --> 19:26.910 a vertical phone with the image and it’s now taking up the entire space of our title section. 227 19:26.950 --> 19:29.140 It's not being cut off at all. 228 19:29.140 --> 19:35.950 So now the last thing I want to do is I want to make everything inside this title section center aligned, 229 19:36.220 --> 19:42.640 because it looks very very weird at the moment being left aligned when it's this small. So we can do 230 19:42.640 --> 19:50.640 that by adding the title selector, and we're going to say text-align center. 231 19:50.740 --> 19:57.300 So now you'll see that our web site looks beautiful on mobile 232 19:58.530 --> 20:09.260 and tablet, and also looks great on laptop and desktop, and we've managed to do all of that simply by 233 20:09.290 --> 20:16.010 using the CSS breakpoints. And what you'll find is that, generally, with broad stroke responsiveness, you 234 20:16.010 --> 20:22.070 can do a lot of that with Bootstrap grids, but for fine tuning and for really narrowing down on the 235 20:22.070 --> 20:30.050 exact design you want for mobile, tablet and laptop, you will often find yourself using these CSS media 236 20:30.050 --> 20:30.860 queries. 237 20:30.860 --> 20:36.470 So when you're designing a responsive web site there's really two ways or two directions where you can 238 20:36.470 --> 20:37.540 go about doing this. 239 20:37.550 --> 20:39.950 You can either go mobile first, 240 20:40.100 --> 20:47.420 so you start designing a web site at sort of this size, and then you start looking at how you can make 241 20:47.420 --> 20:54.220 it look good on laptop, or the other way, which is what we've done basically, is designed our web site for 242 20:54.230 --> 20:59.750 desktop and then made it responsive and look good on the smaller sizes. 243 20:59.780 --> 21:03.530 Now there's a lot of debate about which direction is better, 244 21:03.530 --> 21:07.760 but what I recommend is that you actually try doing it both ways, 245 21:07.760 --> 21:15.320 so starting by designing and creating your HTML and CSS for a mobile size web site, and then trying to 246 21:15.320 --> 21:22.010 make it responsive on tablet and laptop, and also going the other direction for maybe another web site 247 21:22.010 --> 21:28.730 project, and you'll find out which you prefer. And it's better to just try it out for yourself, because 248 21:28.730 --> 21:30.780 if you do it well the end result looks similar, 249 21:30.920 --> 21:35.770 but people tend to have a preference as to which direction they create their web sites, 250 21:35.780 --> 21:37.540 so it's a good thing to explore. 251 21:37.910 --> 21:46.250 Now, in the next lesson we've got another challenge for you, and I want you to complete this web site by 252 21:46.250 --> 21:50.510 completing the last call to action section and also the footer. 253 21:50.720 --> 21:57.020 Now there's nothing new here that you haven't learned before but you'll be doing it yourself and it's 254 21:57.020 --> 21:58.100 going to be a lot of fun. 255 21:58.100 --> 22:02.430 So head over there once you're ready and get started with the next challenge.