Responsive Web Design

Responsive Web Design Retrofitting


This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.

Check out a free preview of the full Responsive Web Design course:
The "Retrofitting" Lesson is part of the full, Responsive Web Design course featured in this preview video. Here's what you'd learn in this lesson:

Ben gives a demonstration of retrofitting Using the Chrome developer tool, Ben adds some responsiveness to the design. Adding responsive design to was done using the simple equation: target / context = result.

Get Unlimited Access Now

Transcript from the "Retrofitting" Lesson

>> [MUSIC]

>> Ben: So let's talk a little bit about some techniques. I'm actually gonna jump right into the browser here, so we can start to experiment a bit.
>> Ben: So you guys are familiar with the RWD Twitter handle. This is managed by Ethan Marcotte, who coined the phrase, Responsive Web Design.

[00:00:29] He's on Twitter as RWD, where he talks almost endlessly about awesome techniques that are coming out or different sites that have been launched. So if you're on Twitter, and you're not following this and you're interested in Responsive, you should check this out. But what I would like to do today is to actually play around with this website a little bit.

[00:00:48] So Twitter, you can kinda see how the Twitter site works at a small resolution, in a desktop browser, right? So it's actually kinda giving me this scrolling left and right behavior. So what I'd like to do is just get in with the inspector a little bit and play around here.

[00:01:04] So this is kind of a habit that I have these days. Over lunch a lot of times, I'll bring my lunch in and I'll sit at my computer while I eat and just kind of find a site that I'm curious about how it was built, open up the inspector and start tearing it apart.

[00:01:21] The tools we have today to do this stuff are incredible. I mean the inspector, I'm in Chrome today, whatever modern browser you're using there are, these kind of tools exist. So make sure that you're figuring out how to use these things. We're gonna really just look at how to look at HTML and CSS today.

[00:01:39] So we're gonna just have a very simple approach to this. But what I'd like to do is see if I can get these columns kind of flexing a little bit, okay? So, I'm just hovering over stuff here in the DOM, you can see this page outer div. You guys able to see this okay?

[00:01:55] It's a little bit small.
>> Ben: This page outer div is kinda got everything inside of it and inside that is this page container. And you can kinda see there's some margin on the outsides here and some padding for this element. So, in this element itself in the CSS here, has a width of 837 pixels, all right.

[00:02:20] So we're gonna need to remember that number a little later for some context, but 837. So let's just set that to 100%, okay. So now, what's happened is, you can kinda see.
>> Ben: The site is actually sort of flexing a little bit right? But as soon as I get too small for those two fixed-width containers to live on the same page, one pops down below.

[00:02:45] And you'll also notice, it's a little bit hard to see here, but if I scroll left and right a little bit, you'll see that that padding that was on that element, because we set it to 100% and padding actually adds to the width, now the width of that container is actually greater than the width of the browser itself.

[00:03:06] Well, let's look and see what the padding is itself. So 28, 14 pixels on either side. So, I wanna show you guys a really quick rule that a little, some styling that will, this completely changed my life, completely. [LAUGH] So,
>> Ben: box-sizing,
>> Ben: border-box. Who's used this before?

[00:03:37] Yeah. It's awesome isn't it? Man, this is incredible. Did you see what happened there? As soon as I applied that style to that container, I'm not needing to scroll left and right anymore. What's happening is, this rule basically says padding should be included in the width that you define.

[00:03:56] That's kinda how we really want it to work anyway, right? How many of you guys would do this, where you write, you say something is 100 pixels wide and it has 10 pixel padding. And now it's 120 pixels wide, and I gotta go make it 80 pixels wide because I had 10 pixel padding, and I really wanted it to be 100 pixels wide?

[00:04:11] That's frustrating. Older versions of IE actually worked like this but this lets us do some really cool stuff in Responsive as you can imagine. So just that simple rule and there are browser prefixes that you need to think about. Paul Irish has done a great write up on how useful this is, if you just go to his site I think, or if you just search for box-sizing you'll find it as well.

[00:04:36] He's done some performance testing. He's actually recommending that you apply that rule to the star selector as the first thing in your CSS. That means apply it to every single element in your DOM, okay? Now he's done some interesting performance tests, or some of his colleagues have, to see what kind of impact that has, but it's actually pretty minimal and gets you a lot of flexibility.

[00:04:58] This is especially helpful too, on inputs in a form. If you tried to mess with laying a form out in a responsive way, a lot of times what happens is you can't really get the padding that you want around the text inside of the input to work well, and so your percentages and all these things, it gets pretty tight, usually on a form.

[00:05:20] So using this technique, you can add padding right inside that width and get a really nice experience. You also notice that this container now has two different units of measure that are being used to add to its width. So we set it to be 100% wide and then there's also a padding of, I think, 14 pixels is what we saw.

[00:05:42] Yeah, 14 pixels on the left and the right. So we're combining percentages and pixels and yet we're still able to get a consistent width and it's because those pixels are now being counted inside. That rule would also apply to borders. So if I had a 10 pixel border on this, that 10 pixels would also be inside the 100%.

[00:06:00] Really, really helpful.
>> Ben: So now, you can see that as I adjust that space on the right is still there and we've got a little bit of a better experience, in terms of scrolling left to right. Now let's take a look at these two columns themselves. Okay, so again, right here they start to break down.

[00:06:18] So, let's see. So inside page container here.
>> Ben: Okay, dashboard seems to be what's containing this left column. See how it highlights there. So let's take a look at the rules associated with that. Okay, width of 302 pixels. Who's got a calculator handy? 302 pixels here. Originally the width was 837 pixels, I need somebody to do, 302 divided by 837.

>> Speaker 2: 36.08.
>> Ben: 36. So we'll just cut it off, 36%, okay. We're gonna just round these and make sure that our math kinda works out well. And now let's watch how this adjusts as I change the width here. So now that column itself is adjusting, when I get down to the place where it actually meets, it kinda breaks down, [LAUGH] still, because that other column is not adjusting.

[00:07:26] But we also can see that those inputs are still kind of fixed width, right? So let's take a look at those.
>> Ben: You can see, they kinda stick out, right? If I get too small there. So let's take a look at how those are working.
>> Ben: So, let's see input.

[00:07:52] Okay, 264. So, I just had this inside of something that was 307. So I could do the math on that right? Or I can just kinda play around right, I in the inspector. I could say, I want this to be 80%. Okay, I want it to be a little higher.

[00:08:08] As I bump this number up, you'll see those guys get a little bit wider. Okay, 94 looks reasonable.
>> Ben: We could probably do the same with the button there, right? But you get the idea. Okay, so now those things are flexing inside, well maybe we should get that button going?

[00:08:27] [LAUGH]
>> Ben: Same kinda thing. 94%. Okay, so we can play with those to get those working more but let's look at that next column. Content main here, and that's where I get that highlighted 522. 522 divided by 837.
>> Speaker 3: [COUGH] 62%.
>> Ben: 62.
>> Ben: Okay.
>> Speaker 2: [COUGH]
>> Ben: Awesome.

[00:09:11] So now as I start to adjust, you'll see that the whole thing is flexing, actually pretty darn well, right? So really just a handful of rules on an existing site without touching their markup. Now, Twitter has a pretty reasonable markup, right? But really, the point here is just is you gotta get into the browser and you gotta start to play with these things before you commit to doing them.

[00:09:33] [LAUGH] I've had some calls before where somebody would say to me, hey I've got this site, take a look at it, and we'd be look and walking through it online. And they say, you can't touch the markup, I'll give you one stylesheet, one link essentially, in the head of the document is all you get.

[00:09:47] And I want this thing to work great on a phone. And I'm looking at this thinking, there's no way that I can do this. But I've learned now to always say, okay, give me 30 minutes. I'll bill you for half of an hour, [LAUGH] and let me play in the inspector for a little bit.

[00:10:04] And usually what I find is that I don't give CSS enough credit. [LAUGH] It's really sometimes kind of incredible what you can do and so I wanna show you guys a couple examples. Let's let's do a quick review of some of these things. Any questions on this or.

[00:10:20] Obviously what the next step here would be to start to add some media queries, right? To get these columns to kind of flow down at some point, but yeah.
>> Ben: So Twitter. We again use this rule, target / context = result, right? In our case, we had 302 pixels and 522.

[00:10:45] And we used that original width, that original fixed width, to calculate these. And we just got rid of this other stuff. Just, I mean in this case, 0.08%, that's not gonna make a huge impact on this. Leave a percentage or two in between is kind of what happens when you do that.

[00:11:02] It works pretty well. We also looked at that box-sizing rule, okay. And here's a link to that article by Paul Irish that kinda details a lot more information on to how to use this cross browser and that kinda thing. But right away, you'll see there's Firefox, the Mozilla prefix, and a webkit prefix and then the standard definition.

[00:11:25] Again, that just includes the padding and the border inside the width declaration as opposed to having those things add to it. This rule is so simple, is hugely helpful and responsive, so really take heed of that one. [COUGH]
>> Speaker 4: I have a question.
>> Ben: Yeah?
>> Speaker 4: Are those, are the modern implementations in Firefox, Safari, and Chrome not obeying the non-prefixed?

>> Ben: Modern versions are now.
>> Speaker 4: Okay. But older versions maybe not.
>> Ben: Right, yeah. Yeah, and there is a way that you can sort of make this work, sort of a hack for IE as well so. So, that article has all those details spelled out on it. But really, this is something that's pretty significant so.

[00:12:12] Okay, so that's a rough, sort of retrofit of a layout. And you can imagine that adding a few media queries, we could get that site Twitter to respond really easily, actually that would not be hard at all.