 Hi, my name is Prabhakar, I am with IIT Kanpur. In this lecture let's see what happens when I have different screen sizes. I access the same website from multiple devices, in this case this is a tablet or a phone and this is a computer and I access the same website. How does the content behave when the screen size changes? Because the screen size is different, in this case it is small, in this case it is big, the content has to adjust itself appropriately, otherwise it becomes not readable. So let's see some examples to start with. Here is a very familiar website for us, it is built on top of a software called MOOCIT, which is a MOOC management system. Now normal laptop or a desktop computer will show you this kind of screen. There are two columns, this is the first column in which some controls are there and then this is the content column. In this content column also we have some title here, these are the titles and then we have some length of the video, the duration is there and then there are some icons which will allow you to download various aspects of the video. Now let me reduce the browser size, the width I am making it narrow. When I do that one column has vanished, this column on the left hand side is not present here, instead I have got a new icon here and the rest of the content of course has not changed, we still have the title column, the times, the length of the videos and the icons to indicating the downloads, these are still there and if you actually click on this box, what you get is the menu that was originally present in the two column format. So by reducing the size, the site adjusted itself to display in a narrow window. Now I reduce it further let us say, again it manages to adjust itself, now what it has done is it has removed the length of the video information from the site, we still have this icon which will allow you to see the menus. Let me reduce it further, if I do that then it seems to still have done itself quite well, it has become probably slightly smaller in size, the fonts may have become slightly less but it is still working quite well and actually this is the smallest I can make in width on my browser, it does not become any smaller than this, just the fonts have reduced a little but it is still working quite well, I have the menu here, of course the timings are not there but the whole site is still legible and very clear to follow. So what is happening is the site manages to adjust itself quite well to varying browser widths, now suppose I go and access the same site Agmox using a phone, this is how it looks, it looks just like it looked on my desktop when the window size is small, no difference right, the timing information is not there but I have the menu item here and everything else looks just like it was on the desktop and of course if I click on this item the menus will come out and then you can operate on any one of this, so far so good and when I look at my content page on the desktop this is how it looks, the same information, the same page when I look at on my phone this is how it looks, so it still looks very legible. Okay, let's look at another site, the news website from Google, it's a news aggregator site, this is how it looks, news.google.com, it's a three column site, there is in the first column I have some top stories and things like that, in the second column I have the stories and in the third column I have some information which are based on my personalization where I come from and the kind of things I am following and so on. So it's a three column site, now what I will do is I will condense the width of the browser and this is what I get, suddenly three columns have become two columns, this information has vanished, so the content managed to adjust itself to display in two columns, let me make it smaller and see what happens, oh it has become one column, this has vanished, so it is adjusting itself, looks nice, very good. Now I reduce it further and now what happened, I have only one column I can't make it any smaller, so it has opened up a scroll bar, a horizontal scroll bar, this is the vertical scroll bar and this is the horizontal scroll bar, the horizontal scroll bar has come up, that means if you want to see something to the right you have to use the scroll bar to move the visible window and then see that, it's still very good. Now if I look at the same website news.google.com on my phone this is how it looks, now it looks very different, it's a single column and then there are some things which I can click and which will explode and show me some menus and there are some other items here, so basically the formatting of this site is different when I look at the site from my phone, right. Now if I look at it from an app, I have an app called Google News, it looks something else, it looks cool of course but the whole information is differently formatted, there are of course beautiful colors and such stuff but it's an entirely different look and feel all together, so in this case I have three different ways of displaying the content to the user, when the user is on a desktop and is the width of the browser is changing I adjust my content appropriately and when the user is on a browser I send a different kind of formatted information, when the user is on an app accessing the content using a piece of software, an application loaded on the phone and then he sends an HTTP request then I show a different kind of look and feel, so essentially there are three ways to handle this. Let's say the user sends an HTTP request to the website, the website sends a response which is a JavaScript program and some content to be displayed. Now that program is going to detect, figure out making some API calls to the operating system, what is the equipment on which it is running, is it a browser, is it a laptop or a desktop, is it internet explorer, is it Chrome, is it Safari or Firefox and then it's going to figure out what is the width of the window that the user has opened at this point of time and making use of all this information it will format the content appropriately. Make it three columns, two columns, one column and display some information or not, where to put the menus on the left hand side or as an icon on the left top and so on. So this is called a responsive website, so it responds to the way the device on which the content has to be displayed should be displayed. Another way is when the HTTP request comes to the server, the server can figure out who is the user agent in the HTTP request, there is information encoded which sells what is the browser and what is the device, it's a mobile device or a desktop and so on. Based on that information, the server is going to send different programs so that they work properly, format correctly and display nicely on the user device. And of course an entirely different way is we ask the user to download an app and then access the content from that app. So how do we handle multiple screen sizes, these are the three different ways. Of course a responsive theme is the simplest because it is the same code which will work on all formats, all form factors and but of course it's slightly difficult to write that code, it's more complicated. Your Mookit platform, the AgMook site has a responsive theme. Now the homework for you is go and visit your popular, regular websites and see how they behave when you resize the browser, are they formatting correctly, are the scroll bars coming, is there re-formatting happening, check out if there is an app for that, download that app and access the website using that app and see what is the difference between these two. Thank you.