Hello and welcome to this module on responsive layout.
So far we have only been coding on the desktop and therefore we are always testing our Web site on the
desktop version at a fixed screen size.
However the users on our Web site might be coming from various different devices and even if they are
coming from a desktop device then within desktop we have various different screen sizes.
And if it is a completely different device altogether like a tablet or a mobile phone there also we
get various different versions of the screen sizes every now and then we get to see a new phone model
with a different screen size.
So it’s quite important for the website to respond to different screen sizes that are actually becoming
very messy but generally is the case when we don’t do any responsibly our designing websites.
They tend to get messy or disorganized when seen on different screen sizes and just to demonstrate that
I have two versions of the same website.
So we have the first version overshare and this Web site is exactly the same in the second version of
Now I’m going to be testing how this Web site looks on different screen sizes.
And for that I’m going to resize this window.
So I just resize this window and up to this point we don’t really see any problem right up to this screen
size is completely fine.
If I reduce the screen size further then also things look fine only up to this point.
And yet at this point we can see that the website doesn’t really look that well.
So this is generally the screen size that we have for a tablet.
And sure the website is not really organized the way we want it to be.
And if you look at these three boxes they also have really squeezed and do not really look good if I
reduce it further we can see that they are also getting squeezed even more.
And and we have applied a responsive measuring unit.
So that’s why they’re responding to the screen size.
But even using the responsive unit is not really working out over here.
And even if we set a minimum rate or things like that we may not really get a layout like this.
So here we can see that at this point on this Web site the columns have now reduced to two but they
are still at the center of the page and the word has also quite increased and things look much more
If I reduce it then we can see it’s messed up even more and we can also see that this image is quite
big in height and the menu remains Mr. and it goes on up to this point as well.
We can’t go any further on the Chrome browser but I’ll show you later as well we can actually reduce
it further and check out how exactly the Web site looks.
Now if we go back to this Web site and if I tried to see it again at different screen size levels.
So here up to this point it’s completely fine and at this point we can see that it immediately gets
centered and it still looks elegant and we can see that we now have two boxes instead of one.
And if I squeeze it even more then I can see that the height is also adjusting.
And at this point we can see that there’s only individual box which exactly is the requirement when
the screen size is like this.
We don’t really want this box to squeeze any further.
We wanted to squeeze at a certain point and then it should be occupying its own space and if I reduce
it even more.
The Web site is really organized
so here we are controlling the Web site at each and every screen size.
So that’s the use of the responsive Web site.
And this is what we call a responsive layout which is responding to different screen sizes in today’s
world than the most of the traffic is usually coming from the mobile phones.
And given the fact that mobile phones have various different screen sizes in them and every day a new
screen size is also introduced it’s very important to create a responsive layout just to ensure a good
And at the same time showcase the Web site the way we want to.
So in this module we are going to be learning how to develop a responsive layout and the different concepts
that we need to know.