This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.
Transcript from the "Conditional Loading" Lesson
[00:00:00]
>> [MUSIC]
[00:00:06]
>> Ben Callahan: So again all these links are in the slide, so you'll be to get to those as needed, if you're curious about playing with those. Over the lunch hour there somebody was asking me about the idea of loading content sort of separate, different content for smaller screens. And traditionally, before responsive came on the scene, this is kinda how we handled mobile, right.
[00:00:29] We had mobile specific sites, and a lot of people are still doing that, even with some good success. But I'm sort of the opinion that if it's possible for you to build a single site, that can work well across resolutions, you should probably do that, making a lot of assumptions about what users need when want based purely on the width of their viewport is pretty slippery slope, in my opinion.
[00:00:54] So this is a, but however, there are times when you might want to do something like that. And sometimes even just for performance sake. So, these are some tools. This idea of this Ajax include pattern, The Filament Group developed this, and we'll take a look here and take a look at the demo of theirs and then an actual live working example.
[00:01:36]
>> Ben Callahan: Okay.
>> Ben Callahan: So this is a little JavaScript library called Ajax-Include-Pattern. Excuse me, my voice is getting a little scratchy here. You can kind of see how they have intended this to work. It's actually really, really simple. They're using these data attributes here. So these data attributes are being used to sort of indicate, in this case a replacement, this is a partial, articles latest fragment of HTML or something that could be pulled in, and there's a data replace attribute there.
[00:02:21] Now, if you look a little bit further down, they also have a data media attribute. So data replace combined with the data media will allow you to say when a certain media query is true I want you to replace this with some other content, a partial that you would pull in.
[00:02:41] That request would be made asynchronously after the page loads. So really kind of cool stuff. I'll show you kind of a demo here. So this is just a basic page, okay, no styles applied here but you get the idea. You can see that there's a list of related external links.
[00:02:59] So in this case, what they've decided is that those external links are not necessary content. So if I refresh my page at a smaller view port width, those links don't load. And now if I,
>> Ben Callahan: Take my browser out when I cross over that threshold we make a request to load that content in asynchronously.
[00:03:22] So, really kind of a cool, kind of a cool technique, very, very simple to use. Just a little bit of code on this thing, a little bit of,
>> Ben Callahan: Oops, these data attributes, just dead simple, data-after, data-media, right there. So I mean just a very simple way to get this kind of stuff to load depending on what what media queries are true or false.
[00:03:53]
>> Speaker 2: Want some more water?
>> Ben Callahan: I have some thank you. Sorry I just wasn't taking a drink of it. [COUGH] Appreciate that. So let's take a look at an example of this pattern being used in the wild. I was mentioning this to some folks earlier. Yeah sure. So, the new People's site, the new mobile People's site.
[00:04:19] Josh Clark worked on this and actually I think Ethan even did some work on this, but you can kinda see what happens here with their site. And watch what happens if I disable JavaScript on this page. Okay. So we still get a lot of good content. But you'll notice that I'm only getting four this kind of lead stories here.
[00:04:39] All right. And as soon as I turn JavaScript back on, you'll see that I'm loading it a lot more, and now this at smaller resolutions, what happens is they shift the interaction model. You can actually swipe this entire element to the left and to the right and you can see sort of an indication of pagination.
[00:05:03] And again with JavaScript disabled here. The pagination goes away. You just get a single, a single page of content. So what they've done, is made a decision that they're gonna load some content in, after the fact, based on certain parameters that they've chosen. So really kind of a really nice implementation.
[00:05:24] I think we're gonna start to see those kinds of things happen a lot more, especially in the cases where, in fact, I could see them leaving this off at small resolutions and saying, if you're on a small device, we'll give you the first four stories and a link to go read more.
[00:05:38] So there's lots of different ways that you could implement that.
>> Ben Callahan: Take a look at how that site is built, that m.people.com., there's a lot of really cool things going on there. They've done some interesting work with advertising, too. And how it kind of fits into a responsive approach, which is significantly challenging so.
[00:06:06] [COUGH] Okay. We talked already about the Polyfill for picture. This is another huge way that we can use JavaScript in Responsive to start to kind of implement these future elements in HTML that we really kind of need a solution for this. And Scott's done such a great job of implementing this and getting something that's very usable out into the community.
[00:06:30] And then eCSSential is another one Scott's worked on. This is to try and solve the problem of making too many requests for CSS that really aren't needed. What this does is, based on media queries again, it will sort of, using JavaScript, it will load in the appropriate style sheets.
[00:06:48] And it will even do some really cool stuff. So it'll look to see, is it possible for the device or the user agent to reach a certain resolution. So like a phone. I could never get my iPhone to be 1024 in resolution, right? So there's no need for it to ever request a style that's linked to with a min-width 1024 on it.
[00:07:11] It should never download that but it does. And eCSSential will allow you to sort of limit those requests, only to what's possible for the device for the user agent. Take a quick look at that one.
>> Ben Callahan: And it's actually very simple to implement as well. You can kinda see here how it's working.
[00:07:40]
>> Ben Callahan: So again in the head of the document, include the JavaScript and then using this syntax, you can very simply say, this stylesheet should only be applied when this is true. This one when this is true. And it'll basically figure out what's true. It will figure out what's true immediately, and make those requests instantly, and then it will to look to see if there are style sheets which might be needed in the future, and then it will load those later, and then if there are style sheets that can never be used, it just won't even request those.
[00:08:13] And then he demonstrates a no script fallback here, where you would maybe link to a handful of those. Questions on how this can work? There's actually a demo of this as well in the retrofitting repository if you're curious about seeing this work. And then just a couple other fun kinds of things you can do.
[00:08:35] FitText is done by a Paravel, those guys in in Austin. You can watch how this text, so this is actually web type here, but you can see how the text itself is adjusting its width to stay 100% of its container. So in cases where you've got a big bold headline like this and you want it to just get huge as its container does, you can use this little bit of JavaScript and it gives you a multiplication factor and you can use it to get your text to fit right in there.
[00:09:07] There's another one called slab text I think which works a little bit differently but same idea. There's actually, interestingly enough, there's a new unit of measure in CSS that's being recommended, I think it's VW, viewport width instead of like you know or rem but VW would let you do this kind of in the browser natively.
[00:09:32] You could set the size of the font based on the view port width. Pretty cool stuff. And then again, if you're trying to solve the responsive video thing, you could kind of do that with a little bit of JavaScript obviously as well. Fitvid JS does that pretty well.
[00:09:53] So there's tons and tons and tons of these little tools. Okay, they're all over the web. They're all over the web. I mean, if you come across a problem that you just cannot come up with a solution for in CSS and HTML, start to do some searching for these kinds of polyfills and little libraries like this, they can really help.
[00:10:14]
>> Ben Callahan: Any other questions on this stuff? We could probably spend an entire day talking about responsive JavaScript if we really dug into that code. But there's a lot, there's a lot to cover there.
>> Ben Callahan: Okay.