1:50
To help you better appreciate the need for
addressing devices of different screen sizes.
I am taking the help of the developer options that might Safari browser
provides that enables me to view the website with screens of different sizes.
So that hopefully will convince of you of why we made responsive web design.
So here you see that Coursera website being
rendered on a 1920 by 1080 screen sites.
This would be a typical large desktop or a high resolution laptop screen.
Then let's consider the same website being viewed using a smaller screen such.
So you see automatically your screen layout is slightly
adjusting to the size of the viewport of your device,
same thing at 800 by 600.
So let's go down in screen sizes, this is an iPad close view of the same site.
This is an iPad Air 2 size, this is an iPad Mini 4 size,
note the transition from an iPad Mini 4
size to an iPhone 6S Plus in portrait mode.
You'll now notice that the Navigation Bot has now collapsed into a button here,
which when you click will reveal the options from your Navigation Bash.
And let's look at the same thing in our iPhone 6S
in landscape mode, note how the screen adopts itself.
Similarly for an iPhone 6S in landscape mode and
go down to an iPhone SE, and you see how the website
has change the way it is being rendered.
So hopefully, this example has illustrated to you how and
why we need responsive web design.
The second related concept that you will hear is mobile first.
The mobile first approach instead looks at designing a website for
a mobile device first.
So consider how you would satisfy the screen constraints of your mobile device.
And then as your screen size expands, you would automatically
start an app to your website to the larger and larger screen sizes.
Perhaps, you're willing more and more of the content.
So as to take advantage of the increasing screen real estate.
So the same website when seeing on a mobile device might have only
parts of the information being revealed to the user.
But then when rendered on a full fledge desktop it
might show a lot more detail version of the website.
Now this has to be automatically adapted based upon the information
that you get from the device from which your website is being viewed.
So how do we get this information?
Fortunately, doing responsive web design is supported by
many of the modern front end web UI frameworks including Bootstrap.
So when we look at Bootstrap's definition on it's webpage it says,
responsive mobile first approach.
Yeah, how do we go by doing responsive web design?
So there are several concepts that are built in to your frame time
web UI frameworks that come to the aid when you need to do responsive web design.
First and foremost is what is called is a Grid system?
We're going to look at the Bootstrap's Grid system in more detail in the next
lecture.
So that we'll understand exactly how we can leverage that to be able to do
responsive web design.
The second aspect is fluid images, so that your images that you include in your
website will automatically adapt itself to the screen size.
And the third part is what is called a CSS media queries from your CSS code.
You can query the size of the media and then appropriately adjust your CSS classes
to fit the size of the device's screen.
Now how do media queries work?
Let's look at that next.
Media queries are supported in CSS like this.
So the technology allows you to do a media query to specify the minimum width
of the screen under which this particular set of CSS classes will be active.
So this would be specified in your CSS file as @media, and
then within bracket, you specify for example, min-width.
There are a lot more options to the media queries than what I'm showing here.
This is just one example of how you would build a media query in your CSS code.
7:30
Taking a look at Bootstrap's CSS code itself,
let's go in and see how media queries are being used by Bootstrap.
So here you see an example of a media query where it says, @media and
min-width 576 pixels.
And then it specifies that those particular CSS class call container,
which we will learn more about in the next lecture,
and also in the exercise that follows.
We will see that the container's width is set based upon the width of the screen.
Similarly, for a higher width screen, the container width is automatically adjusted.
So this is what enables your web UI framework to
support responsive web design.
So doing media queries, your web UI framework is able to
establish what kind of device you're rendering your website on.
And correspondingly adjust the CSS classes to
fit that particular devices screen size.
So then obviously, the next question that is going to come in your mind is how do we
do this in practice?
Fortunately, if you start with a well designed
front end web UI framework like Bootstrap, things become very straightforward.
We will learn more about this in the next lecture and the exercise that follows.
[MUSIC]
Jogesh K. MuppalaAssociate Professor
