Responsive Web Design

Responsive Web Design RWD Patterns: Off-Canvas Layouts


This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.

Check out a free preview of the full Responsive Web Design course:
The "RWD Patterns: Off-Canvas Layouts" Lesson is part of the full, Responsive Web Design course featured in this preview video. Here's what you'd learn in this lesson:

Off-canvas layouts use the space outside a browser’s viewport to hide secondary elements until needed. Animation help users understand where the content originate from as it transitions on and off screen A look at the code of an off-canvas implementation.

Get Unlimited Access Now

Transcript from the "RWD Patterns: Off-Canvas Layouts" Lesson

>> [MUSIC]

>> Ben Callahan: Let's talk a little bit about off canvas layouts. This is fun stuff. Luke Wroblewski written a pretty good wrap up of some of the patterns that are starting to emerge here. He's done these nice little diagrams as well. They kind of illustrate what's happening. I'm gonna show you three and you kind of get a picture for what we're talking about here.

>> Ben Callahan: So here's an example of one and I can take my browser down here and you'll see what happens. So when I do this, I'm given menu and extra. We just talked about this navigation pattern where the menu lives in the footer. Is repositioned up so that's what he's using here and then extra slides content in from off canvas.

[00:00:51] So, that's why it's called off canvas. If you look at sort of the viewport as the canvas and you think of your content shifting behind, pretty simple concept. One thing that we really start to see is you'll notice that there's an animation that's actually kind of critical for this to work, because you want your user to understand that you've actually shifted things.

[00:01:13] In addition to that, they're leaving some content from that mains column still visible, just kind of implying that the content didn't leave, it's still there, and if you want to get to it you can just click back or click to close the extra content. So I like those kinds of cues that they're giving to the user to really imply what's actually happening.

[00:01:36] One example there, and then here's a more complex version of the same, you can see they have these sort of three different asides in this column. We take this down and it's a single link here extra which gives them all the nav and a tabable container in the left column.

[00:01:50] So you can see we could do a ton of stuff with these kinds of techniques, right. I mean this is just really basic concepting. Again still sort of implying that the content hasn't actually left, it's just off to the side. And then this is probably the most beautiful implementation I've seen.

[00:02:07] I really think this is nice because I think. And I've actually written about this in an article on our blog called cross width consistency. And I think that there's something to it. I hear a lot of people saying, and we'll talk a little bit more about this, but I hear a lot of people saying the users don't resize their browsers.

[00:02:23] But actually we users do resize their browsers maybe not in the same way that we developers do but they view your site on a small device. They view it more 13% of people have all three of these categories. You better bet they're going to the same websites on those devices.

[00:02:39] I may have used Twitter and the web here I may use it on my desktop or my laptop. I'm mixed I'm changing my browser width for those sites. So we can with a technique like this we can start to imply and imply the same layouts even at smaller resolutions.

[00:02:54] So watch what happens as I take this down, basic three column layout. And now I've gotten to a point where the extra is off to the right. This is the same content that has always lived on the right at larger resolutions and it still lives on the right.

[00:03:09] If I continue down again I get the same kind of thing, left, right. So all I've really done is adapt my large resolution layout to work In the same way at smaller resolutions. That familiarity is really kind of key to usability. So I think this is a really potent, there's a lot of stuff that could happen here.

[00:03:34] Actually some of this stuff started to initiate because of what was happening in native apps. I think Facebook now is even has something kind of like this where you kind of on the the native app itself you touch and it kind of slides over you still have that implied content column.

[00:03:53] We've actually when we talk about retrofitting we'll talk a little bit about some of the other things but we've actually had found a use case for this in retrofitting as well where we're given a very simple. In fact if we look at the code here. Now that's not a good way to do it, let's do it this way.

[00:04:12] If you actually look at the markup of this page, it's very very simple. Let's do it like this. Okay so I have a header which is all the way across the top. I have a nav item.
>> Ben Callahan: Where did my nav go there it is. Nav right, which is on the left.

[00:04:37] I have section in the center and a section on the right. Okay, that's pretty common for three column layout, three grouping elements to let those three columns live next to each other. Dead simple, right. Pretty much every site that's three columns, that's not table based layout is gonna have something like that.

[00:04:52] What that means, is that you could use fairly standard existing markup to make this kind of layout work at smaller resolutions. You could just a little bit of margin is all really is that's really happening here, negative margins and some shifting and add a little JavaScript to that and you can literally write in a new navigation menu to navigate those things.

[00:05:12] I mean you can really do some amazing things without having to go in and creating and you can create a much better experience for users than just a shrunk down version of that site. So I think there's a lot to be done here probably a lot more experimentation that we'll see.

>> Ben Callahan: And then just a final point here.
>> Ben Callahan: There's there are so many more solutions out there for JavaScript for picture for images. But be careful with any of those that are JavaScript based because any time the image element actually lives in the DOM and your using JavaScript to try and go back at load time and adjust that storage attribute.

[00:06:00] Those kinds of solutions, there's tons of them out there. They're gonna run into a lot of the same kinds of challenges where browsers are doing a lot more to try and speed up the process of the apparent loading of a page or doing things like speculative parsing where they're looking ahead in the DOM and making firing off additional requests even before they get there.

[00:06:18] So, even if you've got a blocking script, you better bet that that browser is making requests for images that exist further down in the DOM. So there's all kinds of race conditions that happen. You may end up actually doing more damage than good. But that shouldn't keep you from experiment with these things, okay?

[00:06:34] Performance is important. Access is more important, okay? This is my belief. Christopher says it great mobile later is better than mobile never. If you don't do anything to your site, your users are still gonna download those big images, right. [LAUGH] I mean, they're still gonna go to your site whether you've made it responsive or not.

[00:06:54] And they're gonna still make all those requests for those big images. So even if all you're doing is scaling them in the browser, you're still giving them at a more appropriate resolution. You still can make your text more readable you still can make your navigation more usable. But there are some that are evolving that are much more sort of emerging patterns that are much more usable.

[00:07:13] So Christopher great book out by the way called Mobilizing Websites check that out if you're in a scenario we've got to work with a lot of legacy sites, okay. That's what I've got for us to sort of finish up the morning with here. And I think it's about time for a break for lunch.

[00:07:32] And then we'll come back in, and jump into some more code.