Responsive Web Design A Fluid Foundation

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

[00:00:04]
>> Ben Callahan: All right, so 101. We started off with this idea, the web is not fixed width. A couple more stats for you really quickly here. In the United States, the penetration of desktop and laptop ownership is the same today as it was In 2007. What that means is that all the growth we're seeing is in mobile.

[00:00:26] I mean you guys know this right. But you've probably seen this stat that orange line represents the growth of mobile browsing. So end of 2013, beginning in 2014, it's predicted that more people will be browsing the web on mobile devices than on your desktop or laptop computer. That's coming really fast.

[00:00:46] You know this is triple digit growth that we're seeing? My clients are seeing year over year from small devices. So this stuff is coming really fast and really what it means the truth is that. Flexibility has to be the new normal for us. And if you've looked at your analytics you'll realize this, too.

[00:01:04] That people are already trying to browse your sites on these devices, right? And one way to address that, that we're gonna spend the rest of the day talking about, is responsive web design. So quick definition and sort of a little bit of information about where this all started.

[00:01:19] You guys know Ethan Marcotte coined this phrase? In an article, that he wrote in Alistapart, just over two years ago, in May. And this is a is a great article. Who's read this Responsive of Web Design on Alistapart? If you haven't read this, go check it out. I mean, this is like the starting.

[00:01:35] This is where this whole kind of idea started. And Ethan is incredibly eloquent, great writer, just one of the nicest guys you'll ever meet online. And he's incredibly just really defines it very succinctly. He also recently has written a book by the same title, Responsive Web Design through A Book Apart.

[00:01:55] It's a nice short read, and it covers all this stuff in pretty good detail. I would certainly recommend that you pick that up as well. The way that Ethan defines responsive is really there's three kind of core techniques. And you'll see as we get into this that these are all primarily happening in CSS.

[00:02:12] So he talks about a fluid foundation. The idea that we need to shift away from pixels and fixing widths in our layouts and start to use a more proportionate thinking. He talks about flexible content. Once the layout systems are flexible, the content we put in those layout systems also has to adjust.

[00:02:30] And media queries, when we find a place where the design and the layout no longer work well with the content that we've put into them. We can to make larger adjustments in our layout through the use of media queries. We're gonna talk about all these in detail. So a fluid foundation.

[00:02:48] Honor of the proportions of the design by creating percentage-based grids. Instead of fixed-width pixel based grids. I wanna take this into some code quickly and just get some really, really, simple examples in front of us. So we can make sure we are all on the same page here.

[00:03:05] So this is a really kind of a typical way that you might see grid systems being done these days. Using classes on a div and some sort of a class. In this case I just chose span-1. That indicates that this div is a container that should be one column wide.

[00:03:24] And then span-2 is two column span three three columns. So if you can imagine that each of these are say 100 pixels each column say 100 pixels wide. We have a 300 pixel column grid, really simple, right? 300 pixel wide grid. And then in your CSS, you might do something like this span-1 has a width the 90 pixels.

[00:03:47] We're kind of assuming that the there's maybe a 10 pixel gutter or something. So that adds up to 100. For span-2, we would do 190 with that same ten pixels. Really simple, right? What we need to think about when we shift to this more fluid of a fluid foundation is how do we convert that into percentages instead.

[00:04:05] And so in the case where our context is 300 pixel wide and we have a 90 pixel-wide element. We wanna use a little bit of math. And Ethan kinda walks through all this in his introductory article there. He talks about this idea of target/context. Really, we're just calculating a percentage.

[00:04:23] And so for our specific case, 90 divided by 300 is 0.3, which is 30 %. 30% for one column of a 300 pixel-wide grid. So this is theoretical. Let's jump into some code really quickly here.
>> Ben Callahan: Can you guys see the code all right in the back there?

[00:04:54] Large enough? Yeah, Okay. So what I've got, this is in repository if you wanna jump in here. There is a z01-RWD 101 folder and inside that are five different HTML files. We're gonna start kind of walking through these one at a time. br-1.html is what we're looking at here.

[00:05:17] If I scroll down to the body of this of this file, you'll see really all I have is some spans, some divs with a class of span. Just dead simple here, okay? We''ll just put a tiny bit of text inside each one. If I open this up in the browser, this is kinda what it looks like, okay?

[00:05:39] What we're doing here. Right in the head of this document, I've got a little bit of css. Quick caveat, obviously, you shouldn't be putting all of your CSS in the head of your documents. This is just an example, okay [LAUGH]? But you can see I've given the body itself or width of 300 pixels.

[00:05:56] I'm centering it with just a margin. And then each of the spans, span-1, 2, and 3, I've given a height of, a min height, just so that we can see them. And then flow to them left with and they all have a margin right and bottom of 10 pixels, okay?

[00:06:12] And then span-1 is 90 pixels wide with background color of red. Span-2, 190, span-3, 290 different colors on the background. And all that comes together to give us something beautiful like this. So obviously this is sort of our fixed width version of this. What we'd like to do is start to think about how can we adjust this grid.

[00:06:37] Adjust these simple styles in the head of this document to make this percentage based instead of pixel based. So I'm going to I'm gonna open up that slide that I just showed you guys that had the target of a context math. And I'm gonna give you guys a few minutes to actually play with this file itself.

[00:06:52] You can open this index file up directly in your browser. You don't need to be running local host or anything and you can see just literally just drag in your browser. It'll open up and go at that code quickly modify br-1.html and try to add some percentages in.

[00:07:07] And so that this thing will flex a bit, okay? Anybody have questions on what they're supposed to be doing? Okay, and just holler if you would like to discuss or have a question, okay?
>> Ben Callahan: You wanna to modify anything that impacts the width.
>> Ron: Do you use 90 or 100?

[00:07:48]
>> [INAUDIBLE]
>> Ben Callahan: For your body?
>> Ron: Yeah.
>> Ben Callahan: So the question about what percentage should we be using on the body element? You can really pick anything you want. When I do this on my post, I set it at 9, so there's a little bit of something on the other side.

[00:08:07] But we'll take a look at that, too, here in just a minute. Good question. If you don't modify the width of the body, then in the end, it should sort of look the same if you've done your math right. If you leave that body set to 300 pixels and you adjust all the widths of the columns to be percentage based.

[00:08:25] They're still inside of a fixed-width container. So it should look the same as it does in the fixed width mode.
>> Ben Callahan: Okay, let's take a quick look here. So the way this is gonna run here is that I've got br-1, which is kinda where we started. br-2 is actually a modified version of br-1 and I've gone ahead and made some changes to these widths.

[00:09:15] So we'll walk through quickly. Again, I haven't changed anything in the body at all, okay? Just made some changes in the style block in the head of that ofbr-2. So I opted to set the body to a width of 90%. And I down here for the margin right for all three of these elements.

[00:09:36] I did 10 because this was 10 pixels. 10 over 300 gives us this repeating 3.333. I put in five decimal places here. And we're gonna talk a little bit about rounding in some older browsers and how this impacts layouts. span-1 was 30% which we which we kind of figured out in the actual slide there.

[00:09:57] span-2, 63.3 repeating. Again, the math is just in the comment to the right. And span-3, 96.6 repeating. So now when we take a look at this in a browser. Here's our original fixed width layout and here is the same layout but using percentages.
>> Ben Callahan: See, you can kinda see this adjusts its width now, right?

[00:10:26] So now we've modified. We've shifted mentality from this fixed sort of pixel-based layout to start to think about things in proportions. This is what I meant when I said in that first slide to honor the proportions of the design, okay? And one thing that actually you asked, what's your name?

[00:10:43]
>> Ron: Ron.
>> Ben Callahan: Ron was asking earlier about what should we set the width of the body to? Well, in a case where I'm actually modifying of a fixed-width design to make it percentage-based. A lot of times, I'll leave the wrapper a container set to fixed-width. Just to be able to sort of think, see if I did my math work out right.

[00:11:04] So if I switch this back to 300 pixels, okay? I'm in br-2. If I do that and refresh and then sort of switch between these two. You'll see there slight difference here but generally this is a very very close to what the original was okay. So that's one little kind of technique you can use just to make sure that your math actually worked out right.

[00:11:27] And you could do this. This could be any percent. So if I choose 50%. It'll stay, it'll basically leave 25% on either side of that column. So again, very simple. So let's see here.
>> Ron: The 300 came from the original body size, correct?
>> Ben Callahan: Yeah, so in the context of a 300 pixel wide grid, each column is 100 pixels.

[00:11:55] So what we need to do is figure out what percentage is 100 of the 300. So that it can extend beyond once our container changes its width.