Responsive Web Design Conditional Loading
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
>> 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.
>> Ben Callahan: Okay.
[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.
>> 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: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: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: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: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: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.
>> Ben Callahan: Okay.