 Okay, the last part in the CSS lecture in lecture five and six is on responsive web design and that has a lot to do with accessibility, as we discussed in the HTML lecture. So basically in tailoring your application, your website to specific audiences. And the reason we have responsive web design is that we of course have nowadays very different screen sizes. I've already discussed that from large smart TVs down to tiny smartphones. We have different resources in terms of computing power, internet speed. We have different input methods, so whether you use a mouse, a keyboard or you just have a touchpad or maybe just voice input. And they of course require different websites. So you cannot use a touchscreen with certain kinds of websites if they just require too much detail typing or clicking on things. For instance, where you cannot have the same streaming capabilities if you have low internet speed. So what we did in the past oftentimes is that we simply develop multiple websites. So in the beginning, for instance, you often had in the beginning of smartphones, you often had a website for desktop applications and a website for smartphones for mobile applications. Or you had a website and then you had an app that you could install natively on Android or iOS. But it's more and more common to do so-called responsive web design. And that basically means that you adapt your website to the device that you use instead of having different sites or different web applications or native applications. So instead of having a number of different things, you have a single thing that is somehow smart and adapt. So examples for that are the layout and the content depends on the screen size and on other factors. So for example, you might have different pictures or different size of pictures. You might have a different orientation. One thing that you often know from mobile applications is that suddenly instead of having all the menu items, you just have this so-called hamburger or sandwich picture, the three lines. And you need to click on there to get to the menu. So instead of displaying everything, they just hit it. And sometimes you simply don't have all the information. So things are hidden because they think on a smartphone is maybe not as practical. If you want the full thing, go somewhere else. The advantage of doing this, so of doing a website that adapts, is that you have one code base. So you don't have to copy things. For example, if you have a mobile and a desktop website, then you usually have a lot of code duplicate. You don't need to do that. You have a single code base. You use the same technology for everything. It's not like you have to know, for example, JavaScript, HTML to do your website. And you have to do Java for the Android application. And I don't know what else Objective C for iOS, but you have the same technology. And another thing that is very underrated is that you can actually choose. So what I often do, if I know that mobile website hides information, then I can actually view the desktop version on a mobile phone and get all the details, even though it's a bit harder to use it. So that's one thing you can do. I can show you some examples of this. So typically very common is, for example, a news website. And I have honestly no idea whether BBC does this. But usually if I just resize this, you will see that eventually things change. So now you see that the pictures just resize. But if I go very small, here you go, suddenly stuff disappears. And most likely they have just put it underneath, exactly. So the layout has changed. But you very clearly see that it's at a certain threshold. So it's at a certain screen size. It suddenly changes. So this has nothing to do with the device, but it's simply because of scrolling. And if I continue, then probably at some point they're actually making stuff disappear. Yeah. So now you see that it's still all the headlines, but the pictures, apart from the top news, has disappeared. So now this is a clear example of information being hidden. It's not there anymore. And maybe they also have the menu. So here you see it's the full menu. Probably at some point they make it disappear. Let's see. So here they just make menu items go into the more instead. So you see at some point the real part disappears now and then the sport and then the news. And then there's only home left. So that's one thing. The other thing that's very important is the responsive design mode. So if you design websites, you should be aware of that your browsers, at least Firefox and Chrome, have a so-called responsive design mode. And that's a mode that allows you to view a website using different settings. So you can very specifically say which screen size you want. You can change the internet speed. You can say, I want to have a device that pretends to be an iPhone or something like that. That's extremely valuable for testing. And in particular, you will want to use this for the first assignment. To give an example, let's just keep staying on this website and go into... Here we are on the Firefox. We can go to tools, web developer, responsive design mode. And you don't see a big difference, but the big difference is up here. So we have this toolbar now that gives us a number of different options. We can take screenshots, which is very good. Which actually takes a screenshot of the entire visible page. So it will do a screenshot from up here until down there. So that's great if you want to, for example, create documentation or something for your website. You, of course, have settings. And then we get to the actual stuff. So here you can choose between just kind of custom or you can actually choose different phone or tablet models. If I set, for example, the iPad, I get the screen size of the iPad. I don't know which version, but you get exactly the resolution that the iPad has. You can change the orientation like you can in a smartphone or in a tablet. And you can actually throttle your internet. So this is great if you say that, well, we are in a region that doesn't have very good cell phone coverage. So maybe we want to try how does BBC behave when we have a regular 2G connection. And then if I click on a link, you'll see that it's much, much slower than it usually is. Okay, you didn't see much here. But if you ever click on a link that takes more time to load, you'll definitely notice the difference. Maybe in GPRS. It's also fairly quick. But there is a difference, so it definitely kind of limits the throughput. So that's helpful. You can of course all create your own different kind of custom devices. Now I should be able to go back to responsive and probably if I just resize, yeah. You also have this DPR. I think that's, I don't remember what it is. I think it's dot to pixel ratio or something like that. So it has to do with the resolution of your display. And the last thing you can set, which is maybe not very important right here. You can set the custom user agent. And that is, if you remember HTTP, we looked at the headers at some point. And there is in the request, we are always sending from where we are opening this. So now you'll see that even though I pretend to be a mobile device, it still says that I'm using Mozilla on a Macintosh. So here you can change this so that instead of that you can pretend that it's, for example, from any kind of mobile browser from a different device or so on. So those things you can do and you can also simulate touch screen so that you can actually somehow simulate the touch behavior. So those things are extremely good, especially also because you can test exactly how does my website look like at 900 pixels? How does it look like at 800? So you don't need to just randomly scroll around and hope that you get the right size, but you can test exactly a certain screen size. Or you can say, is there a difference between 900 and 901? Do my elements align differently? For completeness, we have the same on Chrome. It looks very similar. If you go to View, Developer, and you go into the Developer Tools, you'll see this button up here and that's the responsive design mode. So when it's blue, it enables the design mode. And then you'll see that it has a very similar setup to Firefox. It can also simulate different speeds. You can also rotate. Here is actually quite some detail on how the responsiveness works. So what you see up here are the changes that happen at different device sizes. And I, of course, don't know the BBC details, but it means they have implemented a whole lot of different things for different screen sizes. And up here to the right, I see stuff like Flexbox, FlexRap and so on. So they're using this kind of Flexbox behavior to make things disappear. So that also works in Chrome. Play around with it. You will need it in the first assignment. Now we have seen what you can do and the question is, how do we do it? And of course, some of the things you have seen are responsive design. For example, using relative length. If you use percentage, for example, a diff has width 50%. It means when you resize your browser window, the box gets larger or smaller. That's of course some form of responsive web design. Flexbox is similar that you can say that, well, the elements should grow or shrink in a certain way. The elements should wrap around when there's not enough space. So these kind of things are definitely responsive techniques and they are very widely used. But there are of course a lot more and we cover only some of them here, but we cover some of the more common ones here. One that is very important is the so-called view port. The view port is the visible area of a website. And you all know, of course, that you have scroll bars. And in this case, for example, you see the scroll bar on the right side. The view port is the entire party in my browser window that is visible. The rest of it, all of the stuff I can scroll down there is not in the view port, it's not visible. And what happens if the size of the website is larger than the view port, depends on your application. The thing you have seen here are scroll bars. So if horizontally there is more content than fits into the browser window, you get a scroll bar. That's how it usually works. The important thing and that can be really tricky is that mobile devices sometimes have something that is called a virtual view port. And that's something that is essentially tricky in the website. It pretends that the screen is larger than it really is. So for instance, imagine you have a smartphone that has a 400 pixel resolution. So we just go into our responsive mode again and we set 400. Now here, I know that Firefox does not have this virtual view port. So the website will think that the screen size is 400, which is completely correct. If it would have a virtual view port, it might be that the device pretends that the resolution is actually larger. For example, 800 pixels or a thousand. And what happens then is simply that the website is shrinked down so it kind of gets smaller. So the device pretends I have a larger resolution that I really have. And then the website is just shrunk down and you as a user have to zoom in. And I'll show you what the result of that is. So I have an example here, which we'll discuss in more detail now. So I'll show you in a second how the things work, but essentially I have this cat picture. And as it says here that the image is basically resized for certain sizes. So now it's 500 pixel wide. If I get under a thousand pixel screen size, a browser window size, then the cat should be 300 pixel. And if I get under 800, it should disappear. So you'll see that if I resize this now, at some point it will get smaller now. I'll probably hit the thousand pixel threshold and at some point it disappears now. And we can control this again in the responsive mode. So if I go into responsive mode and let's say we have 1200 pixels, you'll see that my cat is 500. If I get at thousand one, it's still fine. And as soon as I get to a thousand pixels, it gets smaller. So that works. And then if I get to 800 pixels to 799, I guess it disappears. So that's the behavior that should be the correct behavior. And now we try to do the same in Chrome with the responsive mode. And Chrome is different because Chrome has this virtual viewport. So if I get under a certain size, and I'm actually not sure which one, but at some point Chrome pretends that the screen is larger than it really is. And the result you'll see that if I get to a thousand pixels, my cat will get smaller. Now it's smaller. And now if I get to 800 pixels, you slowly see that the whole thing is getting smaller, right? But the cat is not disappearing. It's still there. And the reason is Chrome pretends that the screen is larger than 800 pixels. So my rule that the cat should disappear is never reached. Instead, the website is basically shrunk. And that's a very important thing to be aware of if you want to design applications in a certain way that you are dealing with this virtual viewport. There is a very simple way to avoid that. I'm simply to set this meter tag here. And that says that the viewport should always be according to the actual device width. So it should not pretend to be larger. And indeed, if I change this, I have just removed it. But if I add this tag in my code and I open it in Chrome again, you will see, let's hope that I'm not messing up anything, but you see that the cat has disappeared. And once I get to 800 pixels, it should come back. There it is. So now suddenly it works exactly as it should work. So that's one of the important things. Always set the viewport. Otherwise, your website might not behave as you want to on mobile devices. The other thing, and that's actually what I use in this cat example, are so-called media queries in CSS. Media queries allow you to define CSS rules depending on the medium you're using. And by medium, we mean, for example, the size of the screen. So that's what we just looked at. But it could also be the device. Are you displaying the website on a screen or are you actually printing the website? It depends on the resolution. It depends on, for example, the input. Is it possible to hover over something? So you remember that in a browser, when we have a link, we can hover. Like here, you see that if I go over the link, we have an underlying of Middle East. If you're on a mobile device with a touch screen, that might not be that easy. So that's something you can do in media queries to check. Is the user able to do this or not? And then you can define CSS declarations, CSS rulesets depending on these factors. Here are two examples. My selector here, or this is actually another selector around one else. So what I'm doing here in the middle is simply I say that the element with ID, my unimportant div, is not displayed. So it's simply invisible. And if I would remove the stuff around it, it would always be the case. So you would never see this div. But what I'm setting up here is a media query and you do that doing at media. And then you do screen. So that means when you view this application on a screen and if the width of the screen is maximum 400. So it's 400 or smaller. So in summary, this means the div with ID, my unimportant div is disappearing whenever the screen size is smaller than 400. And well, you can do other things here. That's a similar one. If the screen has at least 800 pixels, then the div with ID, my div has with 50%. We can look at the example. So let's look at the cats in detail. Here's the first one. So that's the cat picture that should get smaller and then disappear. And you'll see that I have a number of rules for that. The first one is if we are looking at this on a screen and the width is maximum 799. So it's smaller than 800 pixel. Then the cat image is not displayed is disappearing. If the screen size is maximum 1000. So basically between 800 and 1000, then the width is 300 pixels. And finally, if the screen size is at least 1100 pixels, then the cat is 500 pixels. So here I have basically three media queries that do the behavior that caused the behavior that you have seen, that the cat is getting smaller and then disappears. We're doing another one here. That's a bit of a special one. What we define here is saying that if the media is print, so if we're printing our website, then the cat image number two should not be displayed. So that's the second cat. And let's test that. So here I say the following image disappears only in the print view. So this one here, if I now go to file print and I print this as a PDF, then you see that here is my first cat. But down here, there is no image. So the other cat is not being displayed. And that's also something you can do with media queries. So you can define how it looks like depending on the medium. You can do really advanced stuff with this. So if you want more details, go on the W3 schools tutorial. But these are very typical things. So change the size of elements, make them disappear, make them appear. And in fact, that's of course what we have seen on the BBC page. So if there is a certain screen size, the pictures disappear. If there is a certain screen size, the menu items disappear and so on. Okay. There's another thing, but I won't go into much detail there. But what a lot of people do more as a principal thing is to divide their website into a grid. So basically just creating boxes that are flexible and then making somehow sure that things change with size. So for example, you could, what for example the bootstrap framework does is to say, we take our horizontal space 100% and we divide it into 12 cells. So each cell has, I don't know what is it, 8.5% or so of the width. And then you define a lot of classes with different cell width. So instead of saying that my diff is 20% or it's 500 pixel, you say my diff is 3 cells wide. And this is a technique that you will see a lot if you use frameworks, if you use certain libraries. Then instead of defining your width, you just say my diff is of class call 6, so it covers 6 cells. And then it's double as wide as the other two. So those are typical things you might see, but I just wanted to mention them here. And we can look at that in more detail in the lecture if you want. And this is just an example how you could do that. So you could say that a row is always 100% and within that you can define different width. And then you just, whenever you want a new row, you just define a diff with class row. And within that you just define the boxes depending on the size you would like to have. So that's one way of doing layouting and making it a bit easier instead of defining the width manually for everything. Now I've mentioned this because there are of course a lot of frameworks that make CSS that make responsive design easier. And a very common one that you might have heard of is Bootstrap, which is originally by Twitter. So that's essentially just a large CSS file that you can import and you just use different class definitions. There is also some JavaScript, but we can ignore that for now. But it looks for example like that. So you just have a diff, strong tag we haven't really discussed, but it's just something that makes the text stronger, usually bold. But then you just use the class definitions from Bootstrap. For example, alert gives you this kind of box, this kind of layout. And alert success makes it green. So it's kind of a green box. And the design is recognizable, so you've probably seen similar styles. And as you can imagine, it's much, much easier than to just say class is alert and alert success rather than defining all the colors, all the sizes yourself. So Bootstrap is something you might want to look into in case we have time. We can also look into that in the lecture, but I have my doubts that we'll have enough time to discuss this. Okay, with this we reach the end of the CSS part. You have seen that cascading style sheets are used to describe the presentation or the layouting of websites. We have discussed the rules in depth that you have CSS rule sets. You have selectors, you have properties, you have values. We have discussed the combinators, pseudo classes and pseudo elements. So basically making the selectors more powerful by selecting very specific things. And then in this last part, we went into the box model, how things are drawn, how they're positioned and how to change the flow in your website. And then we went into responsive web design. So making your website adapt to different current strains in a device, for example, the screen size. So that's it for CSS. In the next part, we'll go now into JavaScript. So we finally add behavior to our website. For example, on a very basic level, we could click a button and make things in the website change or disappear. So that's what we'll do in the next lecture. Thanks for watching.