This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.
Transcript from the "Media Queries in JavaScript" Lesson
[00:00:05]
>> Ben Callahan: Cool so let's talk about how we can use JavaScript in responsive. The title of this I have chosen is JavaScript To The Rescue because I feel like there's a lot of cases that we've been kind of talking all day long about these techniques and constantly you've heard me say you know well with that browser you kind of have to do this, and with that browser.
[00:00:24] Now this is kind of the world we live in right now with all these different browsers and not only different browsers now different devices running different browsers. There's just a lot of compatibility issues. And browsers are evolving much more rapidly today than they have ever and support for new features is just coming in like crazy.
[00:00:45] The trick is kind of getting our users to adopt those browsers and adopt the latest. While all of us are probably on the latest versions of Chrome or whatever, we need to make sure we're thinking about the older browsers, older devices. So we're gonna talk about a few different things.
[00:01:04] Media queries and one of the things that we see a lot of the being done with JavaScript in this space is polyfills and actually I think Mark asked about this right away. I spent a good amount of time explaining to you guys how we support, how we serve a large resolution layout to IE 8 and older, browsers that don't, those browsers don't support media queries.
[00:01:27] And this is another way that you can do that. Obviously, it is dependent on JavaScript and there are some performance concerns because your JavaScript's gonna run after that page is loaded it's gonna move things around, it's gotta, yeah there's some work to do some processing that has to take place.
[00:01:46] There's two fairly well known polyfills for media queries and there's actually probably a dozen more. These are ones that I've actually used. So Scott Jell's written probably the most popular one respond JS. I like Scott's because it's incredibly lightweight. He's only supporting that min and max width. He's not looking at trying to support all the different media types and all the different media features.
[00:02:15] Really just focused on width, and so allowed him to create a much leaner approach. And those are really the features that we use in media queries, the width one, generally. And so that's a good good option for you. CSS3 media queries JS is actually also pretty effective it.
[00:02:36] I think he's implemented a lot more than just the min and max width media features. So two options and I mean these are so simple to use literally you just kind of you build your site and you just include this you know. And things kind of start working.
[00:02:55] So that's the beauty of a polyfill in pop over to the browser here. So here is in GitHub here's Scott's respond JS. I mean, it's about as simple to use as you can imagine, and what this will do is basically make media queries work in browsers that don't support them natively.
[00:03:17] Use cases for us, we've used this in particular. We had a client come to us and they said that they wanted to build a website that would also function as a Facebook application. If you've messed with Facebook apps at all, they not too long ago introduced the idea of sort of an i framed website as a Facebook app.
[00:03:40] I think there i frame is at 739 pixels or something weird but the idea is that the website we built would have to be responsive and have to work on its own as a standalone site but also when it's i framed into a Facebook app at 700ish pixels.
[00:03:57] And so we started to experiment with this and we built our site just like we normally would and it worked well. The challenge was though, that they needed it to work well in old IE, because all of their, almost like 80% of their traffic on Facebook was IE8 or back.
[00:04:15] And so we all of a sudden, now we were serving a completely different layout that kind of felt a little bit broken to those users because the client really wanted the experience to be on a sort of a two column experience. So, we implemented respond JS in that scenario and it actually worked really well.
[00:04:32] So that's the kind of use case that we've found that we kind of wanted when we want to be able to support those browsers. And we need, say, that mid tier layout to be visible. Which was that case. Our techniques now basically serve the largest layout to browsers that don't support it.
[00:04:52] So. I mean, really simple to use. And this thing has matured quite a bit. Originally, you had to do some special comments and stuff at the end of query blocks and all kinds of things, but he's kind of gotten rid of all that, and it's actually working pretty well.
[00:05:12]
>> Ben Callahan: Okay.
>> Ben Callahan: Those links, again, are both in this slide, so if you find that you need to get support for media queries in older browsers, these are two options. And then matchMedia is another thing that's incredibly useful as soon as you start to play with especially scenarios like a common example would be in navigation.
[00:05:37] Where you've got the same navigation that's working in different resolutions but it has a different interaction model in both. We see that we have these kind of large navs that maybe do drop downs with hovers those kinds of things. And then at a small resolution that same nav needs to work very differently.
[00:05:56] I need to touch to kinda drill in so it's a completely different model. And in cases where we expect the interaction to change as we also change widths or as we crossover breakpoints in our immediate queries breakpoints. This matchMedia would be very helpful. And you can do some cool stuff with this.
[00:06:15] I'm gonna show you guys some polyfills and some wrappers that actually make this a bit more functional. But you can see the idea is that programmatically, I can say if the current state, if I'm matching a min width 400, then I can do some write some code here versus here.
[00:06:35] So this gives you an opportunity kind of make some decisions in the at the interaction layer about how things behave based on resolution based on media query support actually. And so some polyfills in wrappers, the matchMedia API is incredibly well supported. Actually, all the modern browsers implement this pretty well.
[00:07:01] But Paul Irish and Scott and a couple other guys, I think, put together matchMedia JS. Which just sort of helps this to work in older in older browsers they don't have support yet. And then my guys Rob Tarr has written a wrapper for this and the guys at Harvest have written something called Harvey.
[00:07:20] Both of these things do the same kind of stuff. We'll take a quick look at the the repos for these as well. The idea here is to help you sort of bind some functionality to entering and exiting media queries. So you could do that with a listener and stuff with match media.
[00:07:36] But they just have made it very simple to do with these wrappers. So let's take a quick look at some of those.
>> Ben Callahan: So this is matchMedia which is the polyfill for matchMedia, matchMedia.js, polyfill for matchMedia. It's actually fairly simple to use and it just kinda creates a little bit better cross browser support for the API itself.
[00:08:07] And then I mentioned Harvest has created this Harvey. Let's see here they have an example.
>> Ben Callahan: So, right over here is kind of what's,
>> Ben Callahan: That's interesting. So this is the syntax for Harvey. To really simply, I mean you can see how this works. You're just given your queries and then you're given a way to sort of call a function.
[00:08:40] When the query becomes valid for the first time, you call a sort of initialization is the idea. And then each time the queries active there's an on function you can call and an off function. So when I enter that query for the first time I can initialize every other time I enter I can I would run the on and then when I exit it I can run the off.
[00:09:00] Really really simple to use works pretty well. They use I think a variation of the matchMedia polyfill to implement this in a more cross browser way. And then Rob from my office has written this one mediaCheck, same kind of thing here. So you give it in the media here the media you can just specify again a media query that you want to check on and then on entry and exit you can call some different functionality.
[00:09:38]
>> Ben Callahan: So here's an example of this, okay. Really, really simple. This is just a demo of the mediaCheck working. This the document here is being modified with JavaScript. And as I get smaller it says this is a smaller screen. I mean dead simple right. We're doing that with JavaScript let's take a look at that demo code.
[00:09:58] [COUGH] Sorry.
>> Ben Callahan: So here's our code that's helping this to work. Okay, so when we cross this max width 600 media query, we're gonna run this function to just literally change the text that's on the screen. So we're doing that with JavaScript based on a break point that we've defined inside the mediaCheck object there.
[00:10:41] Really simple and this is obviously these are really dumbed down examples but you can imagine how I've got complex navigation interaction and I need that interaction model to shift. I mean we use this on several sites to do that kind of thing. In fact the DPNL site, you know, the the nav changes significantly based on the interaction changes, based on the resolution, based on the viewport width.
[00:11:03] So, we're using that exact thing to create a different interaction model here. And also to do things like clear out the nav state as you cross over, as you cross over break points. So pretty cool. Questions on that, or is anybody doing that thing already?
>> Ben Callahan: As soon as you start to build something where there's more interaction this kind of thing becomes very necessary, and there's some great tools out there to be able to do this already, so.