Responsive Web Design The Basic Structure

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

[00:00:04]
>> Ben Callahan: Let's talk about how to apply styles. We looked at a couple different ways that you can structure or write your media queries. But we didn't talk about actually getting those media queries into an actual document. And sort of some the default behaviors that you can get supported on older browsers.

[00:00:25] So let's jump right in here, I'm gonna show you guys a little bit of code. [COUGH] I just kinda wanna walk through this, this is just like a standard index.html, the head of a document. I'm missing probably a lot of things here, I just wanted to show a couple key elements so I've kinda put those in.

[00:00:43] First things first, if you gonna do a response of site, you have to you have to use this viewport meta tag. Actually that should be meta, not media, sorry about that [LAUGH]. But this is a meta tag that you'll see in the top of every site that's actually responding.

[00:01:00] What happens is, all we're saying is that the viewport that your report needs to be your actual device width, and I want you to start your scale out at one like I don't want you to zoom in or zoom out. When Steve was standing there, with the iPhone first gen and double tapping on those things, the way I saw that and I was like, how the heck did he get that browser to shrink down?

[00:01:23] Cuz at that point if you just open up New York Times and take your browser down it doesn't fit in a 320 pixel browser window. And this is actually what he did. Apple introduced this okay this is not a standard actually that's being considered. And we're gonna take a look at another standard that's actually gonna probably replace this at some point but yeah, what's up?

[00:01:46]
>> Speaker 2: Is that supposed to be-
>> Ben Callahan: It's supposed to be meta. Yeah, yeah, sorry. If you didn't hear me say it earlier, that media should actually be, it's a meta tag, it's not a media tag, it's not my bad. If I had something like a t-shirt, I'd give it to you right now, but sorry.

[00:02:00] [LAUGH] Okay, so what this is doing is it's telling the device to report its actual width. If you don't have this in an iPhone is gonna report back that it's a lot wider than it actually is, which is how the site is kind of compressed into a small viewport.

[00:02:17] So just something like this simply would allow you to kinda get the site to actually respond. And then it will fire appropriately based on the media queries that you're using. You can also do some other stuff with this some evil things like not allow your users to zoom, okay?

[00:02:36] And there's for a while an older versions of iOS there was this orientation change bug where if you looked at a site and portrait rotated to landscape in the rotated back. It would zoom you in a little bit and you had to kind of like pinch. I've got one of these devices you probably are familiar with this.

[00:02:52] And so one way to prevent that was to say, don't zoom, there's another parameter here. You can specify, I don't recall what it is, but you can say basically don't zoom, don't allow them to pinch and zoom on the site. A lot of people implemented that immediately because it fixed that orientation issue but it also is kind of an accessibility problem, right?

[00:03:11] If somebody has very poor vision and they want us to still be able to read your site they should be able to zoom in and read it. So you don't really wanna prevent that kind of behavior. Something like this in the head is gonna be necessary if you're gonna get your site to respond.

[00:03:28] Questions on that meta tag? Okay, so the next, the rest of this section here is Is a way that you might include your styles, okay? There's a ton of people doing this in a ton of different ways. We do some some custom rails development, as well. And with rails comes the Sass preprocessor, CSS preprocessor.

[00:03:52] So basically, we're using Sass on all of our projects now. And there are some really cool things you can do with this technology,but you don't have to do any of that other stuff you can take a standard CSS file, change the extension to SCSS and it is a valid Sass file, okay?

[00:04:10] And if you just do that with it you can get some of the benefits that we're gonna talk about here. So what we're doing here is with no media types, no media query at all. Everybody loads this base CSS file, okay? And I'm gonna show you what each of these CSS files looks like.

[00:04:28] And then our next line here, [COUGH] we're specifying this with a media query of not print, okay? There's a not keyword which you can use. And what it does is according to spec negate the entire query. Okay, so any media types as well as features. So all I'm doing is, kind of this is basically a way for me to nest some media queries because I'm saying I only wanna apply these more complex layouts when I'm not printing the page, okay?

[00:04:58] And this is a sort of [COUGH] this sort of a simplified version of this line I'll show you my site and the head of my of bencallahan.com we'll take a look at some more complex list of media types you might use here. And then we do a little conditional comment here that says if.

[00:05:15] So this was MQ.CSS, okay? So this is a file that has our styles all in a single file but all inside immediate queries. All the basic layout was taken care of with base. No media queries inside there. Actually inside base I usually put a print block at the bottom.

[00:05:33] So this is what's loaded first, linear layout and then a little bit of stuff at the bottom. Cuz that linear, that sort of simplistic layout, is actually really good for printing, right? All we need to do is kind of hide our nav, hide our videos, audio those kinds of things you might wanna get rid of.

[00:05:47] You might increase font size or change your margins a bit. But the base is a really good starting point for printing as well. And here we do everything that's a bit more complex that we maybe wouldn't necessarily wanna see multiple columns and those kinds of things in a print scenario.

[00:06:02] So that's mq.css. If I'm less than or equal to IE8, so if I don't support media queries if I'm IE that doesn't support media queries. And I'm not IE mobile then I'm gonna include this nomq.css for screen. nomq is, believe it or not, exactly the same as mq with all the media queries stripped out, okay?

[00:06:24] So you can imagine that if you were trying to do this without something like a CSS pre-processor, you've got two files that are pretty much identical with a couple of lines different that you've got to maintain. Nobody wants to do that. This is why we use a pre-compiler, because we can,I'll show you exactly what I'm talking about.

[00:06:41] So what this does, is this ends up building up a more complex layout without the need for those media queries. That all the styles are still applied but these browsers that don't support those are gonna just load the largest resolution layout, okay? Let's jump in quickly to look at each of these.

[00:07:00] So yeah question at the back.
>> Speaker 3: I think you kinda mentioned earlier so with your mq.css.
>> Ben Callahan: Yeah.
>> Speaker 3: The file is always gonna be full even if the media query returns false, right? Like you'll still have the resource there, it just won't be applied unless that media-

[00:07:16]
>> Ben Callahan: Yep, absolutely, yeah. Yeah, so this technique adds one request is kinda we used to do this without this this split, okay? And I'm gonna talk to you a little bit about why we've shifted to this model now. And there's some other things you can do here to kind of limit those things, but you gonna just need to make a decision based on the performance needs of your specific site, all right?

[00:07:42] Okay, so base.css. So again we're looking at what's included. This is loaded for everybody regardless of user agent.