Do you realize that the only functionality of a web application that the user directly interacts with is through the web page? Implement it poorly and, to the user, the server-side becomes irrelevant! Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and be comfortable to view on all devices: from a desktop computers to tablets and mobile phones. In this course, we will learn the basic tools that every web page coder needs to know. We will start from the ground up by learning how to implement modern web pages with HTML and CSS. We will then advance to learning how to code our pages such that its components rearrange and resize themselves automatically based on the size of the user’s screen. You’ll be able to code up a web page that will be just as useful on a mobile phone as on a desktop computer. No “pinch and zoom” required! Last but certainly not least, we will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: Javascript. Using Javascript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.
Lecture 24, Part 2: Responsive Design
Loading...
From the course by Johns Hopkins University
HTML, CSS, and Javascript for Web Developers
3981 оценки
Johns Hopkins University
3981 оценки
Course 4 of 6 in the Specialization Ruby on Rails Web Development
From the lesson
Introduction to CSS3
A lot of people "tinker" with CSS. In this module, we'll take you from the very basics of CSS3 to some fairly advanced concepts like floating and CSS rule conflict resolution. We'll go over the 'box model', background property, etc. We'll finish off the module with learning about Responsive Design using our own CSS code as well as start introducing Twitter Bootstrap with its essential Grid System.
Meet the Instructors
Yaakov ChaikinAdjunct Professor, Graduate Computer Science
Whiting School of Engineering
[SOUND] Okay, so
here I am in Sublime Text, and I'm looking at the file name responsivebefore.html,
which is located in the examples Lecture 24 folder.
First, we're going to style a paragraph tag, because we're going to use it as our
visual kind of anchor, to see where the elements fall.
And basically, I'm just giving it some background color, some border and
giving a specific height of 150 pixels and I'm giving the width of 90 pixels
kind of to simulate some padding, so it's not going to take up the entire cell and
algrid, it's going to take up 90% of it.
And here actually, I'm using this little trick,
to center our paragraph tag inside a block level element, which is going to be a div.
And the way to center it is to make sure the width is specified, and
then to give it margin right auto, and margin left auto.
Okay, so here comes our framework, our responsive framework we're going to code
up, it's going to be pretty simple but pretty effective as well.
So, here first we define our row and
all that is just saying that it's going to be 100% and wherever you put the row is,
it's going to try to take up 100% of that space.
And then we're going to start having some media queries, so
the first one is min width is 1200 pixels.
Which means that if the display, the device display,
is larger than 1200 pixels, all these styles will apply.
And notice that what we're doing is we're defining these columns and
we are marking them with lg for large and one, two, three, four and so on.
And what we're saying is every single column they should float left, so,
basically, we're going to have a float based layout.
Also gave each and one of them a boarder but, that's just so
we could see it on the screen.
And then what I'm doing is pretty simple and something that I've described before.
And what I'm doing is I'm just saying okay so, if it's a 12 column layout that
means each column is 100 % divided by 12 so, that becomes a 0.33%.
Well the two columns is 100 divided by 12 times two,
and that's 16.66% and so on and so on until we get to
column large 12 and that's going to take up 100% of the entire grid and
neither these are the styles we have defined for large screen devices.
Now what about medium screen devices?
What we're going to do, is we're going to have a range and I picked the lower part
of the range to be 950 pixels which is not exactly the standard,
bootstrap has a different number that it uses, but I just pick this for
a demo purposes because I'm going to needed to demonstrate something for
you and you’ll see that in a minute.
And again I'm listing all this classes and
again it going to be left, floating left, and again I'm giving him a boarder.
And this time I'm doing the same thing except, I'm now calling this md for
medium.
And, since these classes don't really exist outside of these media queries,
it means that I can specify for
different devices, different layouts depending on device size.
So for a smaller device, for example, specify layout expressed in md,
in medium devices columns, or
medium devices classes and for a larger device I could express the same thing.
With lg, larger devices, so I could give the same element two different classes and
I know I'm guaranteed that only one of them
will apply at times since my media queries don't overlap.
So both classes will never really be existing at the same time.
And I could define more of these media queries, but for
demonstration purposes, let's stop here and let's take a look at our HTML.
Well again, we have our h1 just to announce to the world
what we're trying to do.
And here we have one single row, and a single row contains eight divs,
it can contain eight items, eight divs.
Each one has a paragraph that says item 1, 2, 3, 4 all the way to 8.
And notice the classes that I'm assigning to each one.
What I'm trying to tell the browser is that when it is a large device,
I want only the classes with lg to apply.
And it will happen automatically since the classes with md don't exist according
to the browser, when the browsers larger in width then 1200 pixels.
And since I know that floating elements just flow to the next line when they can't
fit, I could very easily set up three, three, three, and continue to three.
So that's right there at 12 columns but
I could keep going because it's just going to flow to the next line.
It's three, three, three, three again.
So really I should have basically four of these things, right?
Three, three and three, and three, that's four columns across, however,
when the browser size, or the device size becomes smaller, and
it becomes less than 1200 pixels, or
1199 pixels and lower, I want the layout to switch to these classes.
And these classes are specifying that,
they should really each item, each one of these things should take half the screen.
So six columns plus six columns will take up the entire width of the screen.
And again another couple of six columns will take the entire
width of the screen and so on.
So as I squeeze the browser and make it narrower,
I should see that my four column lay-out, which is expressed in these threes, right?
It's a little confusing, but
it's 3 columns and there's 12 columns all together so you have 4 columns across.
So my four column lay-out, as I squeeze the browser and
make it narrower, should become a two column layout, because I'm now specifying
in a smaller device size six and six instead of three, three, and three.
Now when the browser size gets to less than 950 pixels,
none of these classes will exist as far as the browser will concern.
And what's going to happen then?
Well our divs will no longer be floated because the floating is only defined
inside the media queries which means they will behave just like regular block level
elements and they will automatically stack one on top of the other.
So as the devices get smaller and smaller, I should really have one column
with each one of these items stacked one on top of the other.
The truth be told, I could've specified that media query for
that size of the device, but, in this case, it's just a demo, and
I knew that the items will stack anyway, I just left it alone this way.
Let's go ahead and take a look at what this looks like in the browser.
Okay, so here's our three, three, three and
three layout which gives us four items across and it's just spilling over
to the next line and gives us another four items across again.
And notice if I squeeze the browser,
in fact what we're going to do is we're going to open Chrome Developer Tools.
So as I squeeze in this corner right here,
you'll see the pixel size of the view port.
And as I start squeezing the browser you see it jumps to two.
As it gets closer and closer to 1200, once it gets past 1200 pixels,
it becomes now 6 and 6 column layout, which means
that now we're taking up half the space of the entire width of the browser.
And if we squeeze past 950 let's take a look and
squeeze it past 950 pixels, right here, boom.
The items are now stacking one on top of the other, and
obviously as a pull it back apart, or pull it wider,
it becomes back to our three, three, and three layout, three, three, three and
three lay out, four times, and now we have a four column layout across.
So that's pretty cool, so it seems we're done, and
we could now serve this website to regular mobile phones.
So let's take a look at what this site looks like on an iPhone six.
And I'll go ahead and record the screen of it.
Okay, so here I am on my my phone and
I'm serving up the website using this tool called Browser Sync.
And we're going to talk more about this tool when we get to the development of
a real restaurant website just in a few lectures, but for now, bear with me and
you could barely see here, so let me zoom in here, right here.
Responsive before the HTML, I'll go ahead and click that.
And here we go, here we have our website but something's really strange.
I thought if we go on the mobile site that's a pretty small device, we wouldn't
have two columns, we would have one column because it's such a small device.
It seem to have worked in our browser, why isn't it working on the phone?
Let's go back to the browser and investigate this a little bit.
So let's go ahead and investigate this and
we're going to use Chrome Developer Tools to do that.
And if you look at Chrome Developer Tools here,
you'll see a little mobile phone looking like icon and if you click that It'll give
you basically the layout that we've seen before when we investigated media queries.
And right now, it's set to laptop device, so we're going to go and
switch that to iPhone six.
And when we switch it to iPhone six, it tells us that we should reload.
Let's go ahead and do that, and now that we reloaded, our iPhone simulator device.
It's showing us exactly the same thing as the real iPhone was showing us before.
Let's take a look at one of these elements that was supposed to take up the entire
screen and for some reason is only taking up half.
Let's go ahead and take a look at its box model sizing.
So let's take a look here, this div right here is saying that it's 480 pixels
wide and that's really impossible because the screen itself is only 375 pixels wide.
So what's going on here?
Well, Chrome Developer Tools is actually giving us a hint as to what's going
on here.
Take a look at the right side of the screen,
its showing you the zooming level of the font simulator.
What its telling you is is that its only 40% of its 100% zoom.
It basically just means the fonts zoomed out and
this is really a default feature on all the phones.
They try to zoom out on websites that don't tell them to do anything different.
So, they could try to fit the entire content into the viewport of the phone.
So, how do we tell the phone's browser that, no, this is actually a responsive
website and you don't need to try to zoom out, just stay at the regular zoom level.
Well the way that we do that is by specifying a special meta tag.
Let's go ahead and switch to our code editor again,
and we'll go all the way to the top and we'll place one more meta tag here.
And the name of this meta tag, is called viewport.
And what we need to tell it is, that the content of our viewport, is first of all,
consider its width to be device width, don't try to zoom out and also,
its initial scale to be one and we'll close the meta tag.
So, now with this meta tag in place, the browser will consider the device
width as the width of the viewport and its initial scale factor will be one,
meaning it won't scale anything up or down.
Now let's go ahead and switch back to the browser and
you see that now it switched to being one column.
Just for fun, let's go ahead and try it out on a real phone and see if it worked.
Okay, so here we are again, we're trying to serve up
this responsive before the HTML is go ahead and click on it.
And sure enough, we could see that it worked, it now is only one column, and
we could scroll it, scroll up and down.
And it is indeed one column layout now.
So in summary we went over the idea and need of responsive design.
And we talked about the 12-column grid layout, which is the most common and
most convenient grid layout there is out there right now.
And we spoke about the fact that in order to achieve fluid width we
actually use percentages to specify the width of each column and
different items within the columns as well.
We also spoke about the fact that we needed to tell the devices out there
that they should not try to zoom out and try to fit all the contents they can.
Instead they should behave as they are, mobile devices with
more narrow screens and smaller screens, and the way we would tell those devices
all of this information is by using this meta tag, the viewport meta tag.
Next, we're going to start getting introduced to
the Twitter Bootstrap Framework.
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
