This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.
Transcript from the "Implementing RWD Styles" Lesson
[00:00:00]
>> [MUSIC]
[00:00:05]
>> Ben Callahan: I kinda just use this as an experiment, a place to play. Okay and so you can see, I mean it's really it's dead simple but, hey there you guys are, cool. So if I open this up.
>> Ben Callahan: Here let's take a look at the index. Again, this is a place for me to experiment, so there's all kinds of stuff in here, but what's important here is the top, okay?
[00:00:41] Is that big enough, you guys see it okay? Yes, so this style sheet again, so we're looking to base with no media feature, no media type, no media query. And then we've got a second link. And I showed you before that it was just not print. I've just written a kind of a, done a bunch of research and written a little article with a buddy of mine actually, Matt from Bearded, who we talked about earlier, on why I'm doing it like this.
[00:01:10] But to be honest with you, I think we've actually, and Jason Grimsby has said, has talked about this is well when he's done a bunch of research on the TV media type we've actually kind of ruined, TV media type has no meaning anymore. There was a question earlier about, could a user agent report true to multiple of those media types.
[00:01:29] And the answer, according to spec, is no. What that means is, if you go look at how people are writing these styles, like if we go over to, let's just go to the Media Queries site. You guys know about this resource huge gallery of sites that use Media Queries.
[00:01:51] Okay, mediaqueri.es Media Queries, okay. It's in the it's in that repository too. But if I just open up a handful of these sites I'm just going to pick. The first four, okay?
>> Ben Callahan: If we start to look at these and I just run that bookmarklet, that mediaQueryBookmarklet, see what they're doing?
[00:02:11] Only screen and min width, okay? That's the first one.
>> Ben Callahan: Only screen
>> Ben Callahan: Screen end okay, what they're doing all of these sites. Most of the sites that are responsive today are scoping all of their styles to screen and. So imagine now that I'm making a smart TV and I decide that I want to have a nice browser that actually renders websites very beautifully.
[00:02:49] If I don't say true to screen I'm not going to get any of these styles. And there is a TV media type. You know the people who wrote the spec really thinking about the future and so zero of the TV's that are being produced right now smart TV's response true to the TV media type.
[00:03:05] So essentially because we've seen so tightly scoped these styles. We've really kind of ruined the usefulness of that media type there's no way to really indicate or change your style based on a TV. So this is a real problem and I feel like we need to start thinking about ways, you know ways that we can try to avoid that as much as we can in the future.
[00:03:28] That's kind of a tall order, I don't know that what we're that we can actually rescue. There's no way we can rescue the TV media type, that's not gonna happen. But I'm trying to start thinking a bit about. I should have left that that over. I'm trying to start thinking about how do we how do we do this sort of responsibly.
[00:03:44] So what I've done here is I've said not print but also not Braille embossed beach TDY I don't want my complex layout to apply to any of those really. And this lets me nest a query. You can't really do this not print. I did all kinds of tests to try to figure out can I do this in a single file.
[00:04:02] A single media query and there's really no way to do it. That not negates the entire query. Okay, and that's according to spec. And so you can kind of see I've used the same technique. Let's look at the actual partials too so you guys can see those. So here's the structure.
[00:04:21] Okay, I have this. So I have this.
>> Ben Callahan: I have this scss folder. Okay, here's a base scss, mq, nomq. Smallest with an underscore prefix just means I can include it. It's kind of just a you know a way that you can indicate this is a partial same thing with the rest of these I'm using normalize I've got some mix ins I'm doing some other things but you can see these are the kind of the key right?
[00:04:52] Smallest min width thirty six min width ninety, okay. So if we take a look at those files themselves inside smallest.
>> Ben Callahan: I'm doing some styles that apply to just to create that simple list layout. As we go to min-width 36 you'll see these get kinda smaller and smaller the higher we go generally.
[00:05:15] And then at 90 Ms I've got almost no styles it's just a couple little tweaks that I need to make to the layout at that resolution. So, this gives us a way to really support older browsers that don't have media creation. We do this structure on most of our sites these days there's lots of other ways to kind of approach this.
[00:05:33] Some people ignore those old browsers. They say if you don't have a browser the sports media queries you're going to get the smallest layout. But our customers aren't generally happy with that approach so [LAUGH] depending on your client that could be an approach you take. There's other ways Jeremy Keith has written on his site about ways that you can do this with just CSS by breaking your styles up in a much more different way.
[00:06:02] Yeah there's a handful of other ways and then when we get into the JavaScript section I'll show you some ways that you can support those older browsers with media query poly fills. Any questions on on this?
>> Speaker 2: What's your feeling on respond
>> Ben Callahan: We're going to get into that when we jump in the Java Script section.
[00:06:20] We have used it and we'll we'll jump into that when we get into JavaScript Yeah. Good question though. That's one of the poly fills to get older browsers to support a subset of media query functionality. Anything else there? Who's built a site already a responsive site for a client.
[00:06:40] Who's built one. Okay, how are you guys linking your styles? Are you doing large resolution first, and then sort of undoing styles as you go?
>> Speaker 3: I do large first.
>> Ben Callahan: Yeah.
>> Speaker 4: Large first.
>> Ben Callahan: How about you?
>> Speaker 2: I started my first responsive site was large first.
[00:06:57]
>> Ben Callahan: Yeah.
>> Speaker 2: And it became grossly unmaintainable. And it was, I'll never use a max-width media query again.
>> Ben Callahan: Don't say never.
>> Speaker 2: You know, as much as possible, I'm going to avoid the max-width media query and try to go to sites that I do that cuz I try to take as much of a purist approach with min width and start with min first.
[00:07:28]
>> Ben Callahan: So then, are you using respond to serve the larger layouts to older user agents, okay. You're a JavaScript guy so. [LAUGH] Anybody else? Okay, all right, cool. [COUGH] The examples that are in the repository when I've done this kind of a workshop in the past. I've been hesitant to make people install SaaS, pre-compilers and those kinds of things.
[00:07:57] So I've replicated this same kind of stuff. But I've done it just using Media Queries in the links in the link in the head. Let's take a look at one of those because I don't want you guys to go look at these examples, and then use this in production because this isn't really intended it's only intended to kind of demonstrate a technique so you can see what I'm doing here.
[00:08:26] It's the same kind of thing, but this we're using SAS to take all this stuff and build a single file. So we can make a single request, all right. As opposed to linking you wouldn't really wanna do this link to multiple style sheets like this in your head.
[00:08:41] Cuz this is gonna create a dozen requests to your server, which is gonna be terrible for your performance. But you can see the same kind of thing is happening. So I have this 450 pixel 450 CSS and down here, I'm linking to it in old IE without that media query.
[00:08:58] Okay, same concept without SASS, but it creates much too many requests. Okay, so we use SASS. The basic usage is just to kind of get the requests down. You could do this in other ways, too. Questions on this before we jump in?