Responsive Web Design Flexible Content

Transcript from the "Flexible Content" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Ben Callahan: So let's let's move on to content. Once we have a grid that's based on proportions, the content that we put into that grid has to also adjust. So obviously text is gonna do a pretty good job by default, right? If you take all your styles out of any website just disable stylesheets and look at the text and adjust the width of the viewport.

[00:00:27] The text is going to reflow fairly simply. That's how the Web works. But when you start to think about images and videos and other kinds of content, that's when things get a little bit tricky. So actually it's actually not that difficult what we found and Ethan kind of calls this out in his article and his book.

[00:00:44] But using just the simple-max width rule on an image, obviously, we would probably want to be a bit more specific with your selector, but just for explanation sake. What this does is it ask the image to render at its native resolution, unless It's wider than its container and in that case it'll just be 100%.

[00:01:04] So this will never let the image get larger than its native resolution, which is kind of what's important. You could also take that max off and just set the width as a percentage. The danger you might run into there would be if the width of the container is greater than the width, the native width, of the image it'll actually try to scale that image up.

[00:01:23] So if you just set it to 100% and it's just sitting in the browser and you change the browser width, the browser will try to scale that image as wide as it can. So, let's take a quick look here. In that 01-RWD101 folder there's a br-3.
>> Ben Callahan: So, I have in the body here, I'm looking at br-3.

[00:01:55] I've added a little poem in span-3 the top div, I've added a title and a little poem in an image. I like bacon so we're gonna talk about bacon a little bit. We have any vegetarians in the room? There's a picture of celery in the image folder if you would like to change you can.

[00:02:14]
>> Speaker 2: That okay I recognize the deliciousness of bacon.
>> Ben Callahan: All right. Excellent. So this is what happens when I throw a big old picture of bacon and a poem about bacon into the existing sort of flexible grid system that we've been playing with, okay? Can I get a volunteer?

[00:02:31] I need a volunteer.
>> Speaker 2: Sure I will.
>> Ben Callahan: Man this is too perfect. Will you read this poem for us?
>> Speaker 2: Absolutely I will. You taste so good with fat a dripping, and in the pan you're finger licking good. I never cook you in portions meager, you kiss and pop, which makes me eager to chop you down with eggs and toast, but I love you bacon, I love you most.

[00:02:54] It's true.
>> Ben Callahan: Great. Thank you, okay, excellent. Okay, so you can see what happens as soon as we throw this picture in. Okay, the text itself is adjusting, right? Like we said that the text will just flow into this container. But look what happens with that image? All right, that's not acceptable, right?

[00:03:13] So what I would like to do is again all I've done is add this little bit of content into that span three in the body. But I'd like for you guys to do is add a little selector at the bottom of that style block in br-3. And apply a rule to images that will adjust the width of this image in the layout itself, okay?

[00:03:35] I'll give you a couple of minutes and then we'll jump back in.
>> Ben Callahan: Okay, we got some width set on an image, playing around a little bit. Yeah, cool. Let's take a look.
>> Ben Callahan: [COUGH] So.
>> Ben Callahan: In br-4, I've added a really, just a dead simple little rule here for images, okay, right here.

[00:04:20]
>> Ben Callahan: And what this does is just floats the image right. And then I'm experimenting to start with, with a max width of 100%. So if we open this up in a browser. So here is the version prior, version three. And with just those two little styles, this is kind of what we get.

[00:04:41] All of sudden that image is kind of fitting inside of its container, right? So, at this point the container that that image lives in is actually more narrow than the image itself, the native resolution of the image. So that max width the rule is kicking in and it's saying 100%, max width 100%.

[00:04:57] Now as we start to adjust this wider, text is still reflowing you can see. At some point here, we're gonna reach a width where, right here, where the container is now wider than the native resolution of the image. So the image is floated right, so it's kind of hanging on to the right edge of that container and the text now can flow up around it.

[00:05:19] So this max-width is a nice rule because you know it won't let that image scale up above its native res. Now max-width is supported in, I think it's IE6 or something. So, in that case you might service a style which is a width based style there. Now let's play around with some other stuff.

[00:05:38] Instead of max-width, if we just do width, we're gonna see that the behavior's almost identical. Until you reach a point where now it's gonna just go ahead and try and scale that image as big, and it will do. This image actually looks pretty good with the browser scaling it up in Chrome.

[00:05:56] But you'll see that it'll just keep getting big, it'll just get as wide as it can, it will honor that. You've set it, you want it to be 100% of its container, it's gonna do it. Now we could also just say I want this to always be 50%, right?

[00:06:13]
>> Ben Callahan: Refresh, it's taking it way down now and it will always be 50% of the container. If I used a max-width, 50%, the difference would be when 50% of this container is wider than the native resolution, that image will still not get larger than its native, okay. So you'd have to be up, I think this is 850, you'd have to be way up, 1700 pixels or something, to reach that point.

[00:06:37] Make sense, max-width? Okay, very cool. So, that's images right? Pretty simple actually to handle that. But let's talk a little bit about video. How many of you guys have sites that have some video on them? How are you getting the video in? Is this like a hosted solution.

[00:07:01]
>> [INAUDIBLE]
>> Ben Callahan: Okay, are you doing like an IFrame? Are you using a video tag or what do you, how are you, do you know?
>> Speaker 3: He just pulls it in to a [INAUDIBLE].
>> Ben Callahan: Okay, right so there's lots of different ways. If you're doing something other than like say a YouTube or Vimeo embed, which is generally a lot.

[00:07:22] I think YouTube right now is still giving IFrames, is how they give you the embed code is a little IFrame. And if you're doing anything other than an IFrame those other objects that you can embed actually these kinds of rules work really well with them too. Setting the width and they'll maintain their own aspect ratio.

[00:07:38] All those things. One thing you'll note about the image, if we start to set heights on the image, we're gonna start messing with this, okay? Cuz if you say you set the height to some percentage or something weird like that, then now the aspect ratio calculations are off.

[00:07:54] So you need to leave the height setting off. And we're going to talk in the retrofitting section about ways that you can override some inline styles if you need to. If you have a system that's generating that stuff. But for a lot of the object in embed and video, all those kinds of tags you can actually get them to respond very similarly.

[00:08:11] But let's talk about a scenario that's a little bit more challenging. Say you've got your video hosted on YouTube and you want to have a video that exists in a site that is responsive. So how are we gonna handle a scenario like that? If you look a little bit further down in that repository there's this, see this ratios, 11-Ratios and 12-Ratios-Review.

[00:08:35] Let's take a look at 11-Ratios real quick and there's a ratio.html.
>> Ben Callahan: You can see the markup inside the body is really simple here, okay? I basically got a complete two divs, a nested div basically, and one's container and one is a class of element. Nothing inside of them at all, nothing in there, okay.

[00:08:58] And then in the style block here, just again, just to kind of prove the concept, I've given this container a relative position, a height of 0, and a padding-bottom 50%. We're gonna talk about this rule, this is kind of where the magic is happening here. And then inside of that is the element, which is absolutely positioned.

[00:09:17] Top left zero and it's given a width and a height of 100%. And I've just given it a background color so that we can see it, okay? If I open this bad boy up in the browser. What's happening is this is an empty div, okay, that's maintaining its aspect ratio.

[00:09:35] This is called intrinsic ratios. Really, really simple to do. I mean, you saw this is all CSS, there's no JavaScript, there's nothing, okay? This thing will maintain its two to one ratio with no content inside of it at all. So you can imagine that if you could get an IFrame or a container around that IFrame to kinda do that, you could actually get video to respond like this.

[00:09:56] The way this works is actually so simple. There's a height of zero set on the container and a padding-bottom of 50%. In CSS, whenever you apply a padding, you're using a percentage, it's always based on the width. So even though we're setting something that's on the bottom, which is impacting the height of the element, the calculation of 50% is based on the width of the element.

[00:10:20] So what that means is this item will always be twice as wide as it is tall. 50% of the width will be applied to create the height. I could set this to 25% and you'd see, now it's four to one, right? So, you can do the math on a 16:9 video.

[00:10:39] You can look at in YouTube, if you look at the IFrame they'll put little widths and heights attributes right on there. And you can use those, do the math on that quickly, and get whatever the percentage of your specific video's aspect ratio is. And let's take a look at this actually with a video embedded.

[00:10:57]
>> Ben Callahan: So this is an example file that's got some other stuff in it and I've thrown in a video literally straight from YouTube right here, okay. Its got a width of 516, a height of 315. This is cut and pasted straight from YouTube's video embed, okay. And if I open this up here without applying any styles,

[00:11:23]
>> Ben Callahan: We get the same kind of thing that we got with the image, right? So this IFrame isn't really being controlled in any way and you'll see it's not a good experience, right? But if we open this up on the review where I've applied a few styles. And I'll show you the styles that I've applied, it's pretty simple.

[00:11:47]
>> Ben Callahan: So again, same kind of stuff, the containing block, this is just for positioning, this video holder div. Padding-bottom of 56.25% which was calculated based on those width the height attributes in that IFrame, okay. 315 divided by 560. And then again the height of zero in the same stuff for the IFrame to position it.

[00:12:07] If I open this up,
>> Ben Callahan: We'll see that this video itself, and embedded straight from YouTube, is actually responding really well. So this is purely CSS. I mean, this is very easy to do. So this kind of technique, intrinsic ratios, can be used for a lot of different things.

[00:12:29] This is just one example. Who plays Tiny Wings, anybody? Cool game, isn't it? I love that game. [LAUGH] Okay. Questions on content? Getting content to flux? Yeah.
>> Speaker 4: How do you handle the retina display with that?
>> Ben Callahan: With the video?
>> Speaker 4: With the image.
>> Ben Callahan: With the image, there's so many ways to do this.

[00:12:50] Actually last night, Mark and I were having dinner and talking about, I don't know, and he said even, I think that maybe last week you guys talked a little bit about this compressive images technique. I mean, we're gonna talk about media queries here and there are ways to sort of, using media queries, check the pixel density of the display.

[00:13:09] And then in that case you could serve a different image if your image is being served in CSS. If it's being served in the DOM like an image, an inline image tag, you can serve a larger image and scale it down. Obviously, which is kind of what you would have to do to get the proper amount of pixel density.

[00:13:30] There's also some pretty cool techniques we're in a look at in the JavaScript section. Scott Jehl's Picturefill is incredibly useful and could work for that kind of thing as well. So, we gonna cover those. It's kind of scattered throughout the day. If I don't get your question answered enough, just come talk to me and we'll look at your case.

[00:13:48] Was something back there, yeah?
>> Speaker 5: Yeah, so I was curious about adding bottom and I was really surprised when you said it's based on width.
>> Ben Callahan: Yeah.
>> Speaker 5: To me I would almost think that's like a bug. Cuz I would expect bottom on top to be based on height.

[00:14:02] Was that intentional so that you could do this kind of-
>> Ben Callahan: Well, I don't think that it was intended for this kind of use, but that is how the spec is written. So it is as indicated in the spec. Yeah, it's kind of weird.
>> Speaker 5: Yeah.
>> Ben Callahan: Yeah?

[00:14:17]
>> Speaker 5: It works well.
>> Speaker 6: Are there any compatibility issues with older browsers?
>> Ben Callahan: There are some with, let me think where. Well, the cases where it usually comes up are generally browsers that don't support media queries either. And so if you're not serving a responsive layout to a browser because it doesn't support some of the other advanced features and that sometimes it's a wash.

[00:14:41] But there are some other workarounds too. And there's also, if you have to have something that works in like IE6 or something. There's some JavaScript libraries that do sort of make that function fit vid. We're gonna take a look at that too a little later, so.
>> Ben Callahan: Anything else there?

[00:14:59] Cool, all right.
>> Ben Callahan: Let's see here.
>> Ben Callahan: Okay, so intrinsic ratios, really cool stuff. You can use that in a lot of different ways, okay. Experiment with some of those things, it's fun.