Off The Beaten Canvas: Exploring The Potential Of The Off-Canvas Pattern

Advertisement

The off-canvas flyout menu has taken over as the primary navigation pattern for mobile layouts — even some desktop layouts have jumped on board. And for good reason: An off-canvas menu is a great way to maintain context while giving the user a lot of additional information.

In this article, we’ll talk about why off-canvas has become so successful as a navigation pattern and show its potential to be so much more. From filters on product list pages to shopping carts to lists of recently viewed articles, the potential of this pattern is bound only by our drive to pioneer. It’s time that we explore just how far off canvas we can go.

Here Be Dragons

You’ve seen off-canvas flyouts before — you know, those sidebars that slide in from the edge of the screen? By now, they could even be considered commonplace. There’s a reason their popularity has exploded recently: In mobile, the notion of a window has all but disappeared. The majority of devices on the market today give us little control over the window.

dragon-map-final1

Instead, we have only two major layers to work with: the viewport and the canvas. While these offer plenty of potential, designers have started to chafe against the limitations of the constrained viewport. The off-canvas flyout — used sparingly on the desktop — becomes extremely important in this landscape.

With the limited real estate on mobile devices, designers saw the need to open up space and present relevant information without forcing the user to lose context or leave their position on the screen. Going off-canvas enables us to do that. On the desktop, we rarely go off canvas — there just isn’t the need. In mobile, off-canvas is a groundbreaking concept. It creates a new frontier of design possibilities. And, as with mapping any unexplored territory, it offers treasure to those willing to take the risks. For designers, it’s a rare opportunity to create something new.

The Early Explorers

Certainly, the first people to go beyond the canvas and brave the unknown are lost to us. Like the Americas, we remember only those who made landfall most famously. Thus, Facebook is our Columbus.

Facebook set out to solve a very specific problem that it found on mobile screens. Its navigation menu is long, with a lot of content that is relevant to the user. The user needs to be able to explore that navigation without losing their place in the timeline. If they decide not to navigate away, they should be able to jump right back to where they were.

Facebook's Mobile Navigation Flyout2
Facebook’s original off-canvas flyout was a lot like what Facebook currently has as its mobile Web navigation. Today, it still uses off-canvas for its messaging system, as well as its Android apps. (Large preview3)

Common navigation patterns wouldn’t work. The menu is too long to pop over the entire screen, and if it appeared elsewhere on the canvas, it would pull the users out of context. The solution to the problem was to lock the canvas and pull it to the right — revealing the navigation underneath. Using off-canvas like this was an entirely novel concept.

Charting New Territory

The reason it works — and why it feels so natural — is because the action is very natural. Moving something to the side temporarily and redirecting focus, while keeping a glimpse of what the user was doing before, is an extremely common action in the physical realm. We’ll hold our place in a newspaper as we flip to a referenced section. We’ll keep our thumb on a page and flip to an endnote in a book. We’ll jut out a sheet as we try to find the receipt for a line item in our tax return.

These are all physical examples of what the off-canvas flyout emulates: saving your spot so that you can get right back to what you were doing. The off-canvas flyout is a perfect way to interact with content in mobile because it solves a very distinct problem: focus.

In mobile, all we have is focus. This makes maintaining context extremely hard. We force users to scroll up and down, and we hide and reveal content to do all of the things we want users to do. Scroll bars, which would indicate where the user is on the page, are usually absent, and getting back to one’s exact place is often hard. Context is important to the user’s mental map of the content. Without it, they’d get lost and fall off of the website.

With off-canvas flyouts, we maintain context on the page while presenting a huge array of new information. Flyouts can hold entire pages worth of new interactions and content, without the user getting lost at all. It’s an extremely powerful pattern, with potential that we haven’t even begun to uncover.

Flat-Earth Syndrome

Despite all of this potential, we aren’t really willing to push the boundaries of off-canvas. We designers have developed an unfortunate tendency to avoid experimentation. We’re more than willing to implement proven patterns, but we’re less likely to think critically about why a pattern is successful. Sure, we know that the off-canvas flyout is great for navigation, but that’s not all it’s good for.

Facebook wasn’t solving a navigation problem when it created the pattern. It was solving an interaction problem. It needed a way to present a large quantity of interactions and information without distracting the user from their original intention — the timeline. Instead of thinking of the off-canvas flyout as a navigation pattern, we need to think of it as a content strategy. How do we present more information to the user without distracting them from what’s at hand?

Facebook didn’t limit the flyout to navigation either. It used it for the list of messaging contacts as well. This is probably an even better use of the flyout because users are highly inclined to quickly pop open the sidebar, see who’s online, and send them a quick message before returning to browse the timeline. Patterns like this are not immutable. In fact, the only way they’ll get better is if we continually experiment with them. Facebook revolutionized the way we lay out content for mobile, and very few people are carrying that torch forward.

Beware The Siren Song

There’s a risk here. We shouldn’t use the off-canvas pattern merely because it’s novel or popular. As with most things in Web development, every method has its pros and cons. The off-canvas flyout isn’t perfect for every situation. It’s best when you need to provide a lot of information or complicated interactions without pulling the user away from the main content.

If you have only a few navigation items or if the supplementary information that you’re providing is short, then the pattern would probably be more disruptive than convenient. Remember that it provides a new view while maintaining the context of the original view — people will lose some flow whenever they open that flyout. If the supplementary information is minimal, then use a popover or a pushdown interaction instead and leave the user on the screen.

Another thing to keep in mind is that the off-canvas flyout requires a bit more processing power and browser capabilities than other methods. While this is mostly mitigated by a good framework (see my recommendation at the end of this article), these issues still stand. Old devices and devices without JavaScript support might get left behind if you don’t provide a good fallback for this pattern. I recommend progressively enhancing4 — i.e. provide a simple solution for old browsers, while detecting support for new features and providing a more optimal solution for browsers that can handle it.

Filling In The Details

So, what is the flyout really good for? Below are a few examples that highlight the pattern’s value.

Shopping Carts

When I was working on the design for Garmin’s e-commerce website earlier this year, I had a chat with my standard “test user” (i.e. my girlfriend). We talked a bit about what she liked and didn’t like about e-commerce on mobile websites. The biggest problem she brought up was that she often wants to check what she’s placed in her cart, but to do that, she has to visit the cart page, which takes her away from the content she’s currently browsing.

This triggered a little “A-ha!” moment for me. Why not use off-canvas flyouts to hold all of the cart’s information? The user can quickly pop open their cart whenever they want and glance at what’s inside. They can also immediately begin to check out — effectively removing a whole step from the checkout process. If you work in e-commerce, then you’ll know that the fewer steps in the checkout process, the less likely the user will abandon their cart.

Garmin's mobile cart flyout5
Garmin uses a flyout in mobile instead of a separate cart page. Users can go directly to the checkout area from this flyout wherever they are on the website. (Large preview6)

To teach users about this functionality, I designed the cart flyout to pop open whenever users added something to their cart. This kind of just-in-time instruction is very helpful, and the timing is perfect because users wouldn’t need to know about the cart until they add something to it. If you’re building an e-commerce website, then you probably already have everything you need to make this happen.

Many websites show a preview of the cart when the user hovers over the cart icon or adds a product to it. You can easily repurpose this information into a flyout on small screens. For an example of a responsive website that has a flyout cart, check out Zazzle7.

Zazzle's desktop cart popover
Zazzle has a popover cart for large screens and an off-canvas flyout for small screens.

We didn’t have access to existing cart information on the page from Garmin’s desktop website, so we used progressive enhancement to “AJAX” the cart information across pages. Our engineering team stored the cart information in local storage so that we wouldn’t need to check it every time the page loads. We update it whenever the user performs an action that would cause it to change.

This results in a fast and extremely functional cart flyout. The user can do everything they can do with a regular cart — update quantities, add coupon codes — from any page they are on. The flyout adds functionality in an intuitive way, without taking anything away from the user.

Product Filters

Another excellent use for a flyout on an e-commerce website is to house filters for category pages and product list pages. Many desktop layouts have a huge number of filters for the user to parse and select for lists of products. Traditionally, dealing with these on mobile has been very difficult: You would either present the user with the long list of filters or show the products — never both.

With off-canvas flyout, the user can pop out the filters, toggle the ones they want and then easily return to the updated list of products. They won’t lose their place, and they’ll get all of the functionality of the desktop layout. Best of all, if a sliver of the content is showing, the user will get immediate feedback on their actions. The list of products will update in real time as the user toggles the filters.

Page History

Off-canvas flyout isn’t limited to e-commerce, of course. One of our goals when designing Style.com8’s new mobile website was to enable users to easily switch between fashion collections and to dive deep into showcase galleries. Switching context is so common on this website that the user needs a way to easily keep track of everything they’ve been looking at.

The developer implemented an off-canvas flyout that could slide out and show every single thing that the user has done on the website, in chronological order with thumbnails. Finding a previously viewed collection is as easy as scrolling through the list.

Style.com's history flyout
Style.com uses a flyout to make the user’s viewing history persistent and easy to access. Every article and image viewed is recorded so that the user can quickly return to it.

Commenting

Another highly effective use of the pattern on publishing websites is to display comments. More and more websites are following Medium9’s example of allowing users to comment directly on individual lines and paragraphs in an article. This functionality is usually missing from the mobile version, and Medium is guilty of this. An off-canvas flyout is a perfect solution to this problem. Clicking a comment flag would pop open a pane that contains the comments for the lines that are visible, and the user could scroll through each comment for that line. When the user collapses the sidebar, they’d be exactly where they left off.

While I was writing this article, the New York Times announced a new version of its website, which pretty much does this with comments. A contextual off-canvas comment bar flies out in position with the article — but only in desktop layouts. Users can focus on reading the article itself and, when they’re interested in the comments, quickly check what other people are saying about the paragraph they’re reading.

New York Times Comments Flyout
The New York Times’ new website has off-canvas flyout for comments. Interestingly, this pattern is not used at all in the mobile view, where it might be even more effective.

This idea could be applied beyond blogs and news websites. Imagine reading a scientific article or any text with footnotes. Each link could open a flyout that contains the relevant footnote. The user would be able to quickly get the information they need without ever losing the context of the page. This would actually improve the reading experience — the sort of thing digital designers dream of.

The Final Frontier

All of the examples listed above have a commonality. The user is aided by the flyouts, but their success doesn’t depend on using them. They could access their shopping cart or their viewing history or the comments without a flyout. Off-canvas is by no means necessary, but it makes life a lot easier. The user is more likely to stick around and buy stuff, read more articles and view more ads.

We need to stop being complacent. Just because a flyout works really well for Facebook’s navigation doesn’t make it a “navigation pattern.” Let’s think critically about what each pattern does and why it’s effective. If we do that, then we’ll be in the perfect position to build on the foundation laid under us. This is especially important in mobile, whose patterns are less mature than the desktop’s — and for good reason: Mobile designers simply haven’t been around as long.

A girl in a spacesuit investigates a suspicious portal.10

You’ll notice that I’ve been talking solely about off-canvas flyouts. This is a little lazy, too. When considering off-canvas, we automatically think of flyouts. But even more is possible with off-canvas layouts. Countless methods and patterns are waiting to be discovered by intrepid designers. Our canvases aren’t all the same — sure, they share many parts, but each does something slightly different. Our off-canvas solutions should be different, too.

As Web designers, we’re constantly treading the same path — perhaps discovering a shortcut if we’re lucky. But the map usually stays the same. We get complacent, retracing the steps of those who have gone before us, wearing down the path deeper and deeper. We need to be pathfinders. Just as Facebook led us off canvas with its flyouts, we need to explore new territory. Maybe for now, we just need to find novel uses for flyouts. Perhaps later, we’ll find entirely new off-canvas concepts. And perhaps the truly adventurous will discover an entirely new interaction layer.

Here’s to frontier designers and the maps they make.

Some Homework

If you’re still curious about off-canvas or would like to learn ways to implement the pattern as covered here, check out some of the resources below.

  • Off Canvas Multi-Device Layouts11,” Luke Wroblewski
    Wroblewski offers insight into how we can use different off-canvas layouts to match desktop layout patterns. This is good for thinking about layouts but should also give you some ideas on how to do things differently.
  • ‘View Mode’ Approach to Responsive Design12,” Daniel Wiklund
    Wiklund’s fantastic article covers a lot of the same concepts that I’ve covered here but from a slightly different perspective.
  • Off Canvas Layouts13,” Zurb
    Zurb outlines the different types of off-canvas layouts possible with Foundation. Even if you don’t use Foundation, this great resource will kickstart ideas on various possible layouts.
  • Pikabu14
    Implementing an off-canvas flyout that works well on a variety of mobile devices isn’t easy. I know this because we’ve had to deal with it at Mobify. We weren’t happy with a lot of the implementations out there, so we wrote one that works on a majority of devices — including Android 2.3 — and we open-sourced it for anyone to use.
  • Implementing Off-Canvas Navigation for a Responsive Website15,” David Bushell, Smashing Magazine
    Bushell deals with a problem people often ignore16. Performance is a huge consideration because a flyout has to feel perfect in order for the user to want to use it. Bushell shows some great ways to make sure your animations are performant and smooth.

(Big thanks to Jacky Gilbertson17 for her amazing illustrations!)

(al, da, il)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/02/dragon-map-final-1000px.png
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/02/facebook-flyout-large.png
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/02/facebook-flyout-large.png
  4. 4 http://www.smashingmagazine.com/2013/09/03/progressive-enhancement-is-faster/
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/02/garmin-flyout-large.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/02/garmin-flyout-large.png
  7. 7 http://www.zazzle.com
  8. 8 http://www.style.com/
  9. 9 https://medium.com/
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/02/spacegirl-1000px.png
  11. 11 http://www.lukew.com/ff/entry.asp?1569=
  12. 12 https://medium.com/design-ux/914c7d3795fb
  13. 13 http://zurb.com/playground/off-canvas-layouts
  14. 14 http://mobify.github.io/pikabu
  15. 15 http://www.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
  16. 16 http://www.mobify.com/blog/beginners-guide-to-perceived-performance/
  17. 17 https://twitter.com/jackygilbertson

↑ Back to topShare on Twitter

Kyle Peatt (@kpeatt) is a designer and front-end developer. He strongly believes that designers should also be makers. Kyle leads a team of like-minded individuals at Mobify. He has been working in the web for 10 years and in mobile since the launch of the iPhone. Kyle writes, speaks, and argues about designing and developing for an increasingly multi-device medium. He holds a degree in Sociology from the University of British Columbia but can more often be found holding a pair of strings that lead to a kite.

Advertising
  1. 1

    Facebook ditched it a while ago.

    1
    • 2

      Not correct for Android. It is still present in FB app.

      0
    • 5

      Thanks for your comment, wefwefwe! I had a little blurb originally written about how Facebook has dropped this pattern for their iOS7 version of the app — but felt it was sort of extraneous information. I don’t think they dropped the pattern because it didn’t work for them, I think they got rid of it for a few other reasons.

      For one, they went with a new tabbed navigation to more closely match iOS7’s design style and the flyout no longer contextually made sense. For a second, I think they wanted to break their own mould a little. So many other people have implemented this pattern — just look at any Google app — that it’s more novel to not use it. It’s clear they still like it: they still use it for their messaging system. It just wasn’t right for that one situation.

      0
      • 6

        It certainly is present in Android still, an interesting side note about the who’s online part is that since Messenger was launched it is completely retarded. I stopped using that menu since clicking drops you out of the Facebook app and into the Messenger app which is very annoying.

        0
  2. 7

    I recently implemented something like this on my website: http://dizy.be/b38d0b/ and I have to say that the click-through rate to menu nav items has improved a lot. Does anybody have any thoughts as to why?

    For the record, I implemented using CSS transitions :)

    0
    • 8

      Depends on what you had before… probably because it’s categorized and the categories are easy to grasp. However I somehow don’t like about your implementation that you can fly in somethin at the very top of the page but not if you have scrolled down a little. Makes it somewhat locked to the upper right of the screen.

      0
      • 9

        Do you mean like a fixed menu would be better?

        What I had before was a simple slide-in menu. Another thing I’ve noticed is that the click through is better when the animation is quicker, and not dragged out.

        Not entirely unrelated, but here’s a really interesting study on the UX of menu buttons http://exisweb.net/mobile-menu-abtest

        0
  3. 10

    Another fine example is using it for the master list in a master/detail pattern. Just slide the detail to the side and reveal the master list.

    One thing to mind though is that differentiation between desktop and mobile shouldn’t be too big. For that reason the Zazzle example isn’t a very good one I think. Going from a flyout to an off-screen panel will result in a lot of work (dark on light vs light on dark) which will needlessly increase the complexity of a project.

    0
    • 11

      Hey Niels,

      Thanks for your comment. Can you elaborate on the master/detail pattern? That sounds really interesting. There are tonnes of places where I think off-canvas can really help us make good use of our screen real-estate.

      For the Zazzle example, I think — so long as you’re willing to put the extra work in development-wise — this is actually a really good example of user-focused design. They implemented excellent solutions for getting the user cart information depending on the device they’re viewing it on (leaving alone the notion that screen size isn’t a great way of determining usecase). Totally agree with you that this adds a layer of complexity to your build but — in some cases — this might be totally worth it. And, depending on how you implement, it might be less challenging than you think.

      0
  4. 12

    Adrian Zumbrunnen

    February 24, 2014 5:39 am

    Hey Kyle

    thanks for the carefully written article. I was wondering about something that I was hoping people here could shed some light on.

    Why is it that an off-canvas menu that slides the page away feels more natural than one that overlays it as we have seen it on the New York times. Is there any explanation based on facts, why one is better than the other. Both maintain context as long as the content behind it doesn’t completely disappear. Just the flow of information and the conceptual model is slightly different.

    What do you UX people think?

    You can see an app-like progressive enhanced version of a transition on my blog:
    http://www.azumbrunnen.me/blog.

    Thanks again Kyle.

    0
    • 13

      Lovely design and transitions on the blog, great job.

      0
    • 14

      Hey Adrian,

      Thanks for your comment! I’ve been trying to think of the best way to reply to it for the better part of the day. I think there’s a very definite reason why sliding the page away is more natural feeling than sliding over top of the page.

      It’s a mental cue that you’re transitioning contexts. I talk about this a little bit with the comparison to holding your thumb on a page as you flip through a book or a newspaper. You’re mentally ‘saving your spot’ when you see that initial content slide out of view and you see the new context revealed. We know that animations can go a really long way towards cueing users towards the actions we want them to take as well as giving them hints as to what has just happened. This might seem a bit skeumorphic but grounding our sites somewhat in reality helps the user build a mental model of what’s going on.

      This is all non-technical and non-data driven of course. Just my thoughts on why it works. I’d love to see some people chime in on the subject!

      0
    • 15

      Your blog looks great! And interesting topics as well.

      But one thing that differs from the description of the off-canvas pattern is the question about focus. When bringing in the “menu” (the blog entry headlines), the current entry disappears completely, so you loose a sense of where you are.

      Why did you decide to create it like that and not keeping the current blog post visible some while showing the menu?

      0
  5. 16

    Interesting article, here is a CSS only implementation: http://valdelama.com/css-responsive-navigation that is worth considering.

    0
    • 17

      Nice demo. Have you heard of Transit.js? It allows you to use CSS transitions in jQuery, takes out a lot of code and avoids any cross-browser issues :)

      0
    • 18

      Hi Dan,

      Great suggestion! I think solutions like this are pretty awesome examples of CSS trickery. There are lots of great ways to implement off-canvas flyouts and this is definitely one of them. I think what you’ll want to make sure is that you’re accounting for all your different mobile browser support. Android 2.3 was the most difficult one for us to account for when we built Pikabu. As long as you’re golden on device support, any implementation should be great!

      0
      • 19

        So far it’s been rather solid. For me the worst was IE because I was using viewport widths (100vw, 100vh, etc), and there were issues there.

        0
  6. 20

    I really like this article. I also recently investigated the possibilities of inline commenting within a sidebar because I think this is especially nice if the articles are long. Also discovered websites like medium.com. But found a solution for my website called Factlink. They allow to comment on anything online and also chose for a off canvas solution. Comments are being displayed in a sidebar. I implemented it on my website and now every visitor can comment directly within context without losing focus of the content.

    0
  7. 24

    Romano Firtermaiszter

    February 25, 2014 1:35 am

    I believe off-canvas menu is a good solution for a responsive website’s menu
    if the site has not have difficult menu structure with lot’s of menu items.

    I have an Ipad and to be honest I could not get used to the FB app.
    My opinion is there are many differences between the FB app and the webpage.
    That is the reason why I like to use the website instead of the app.

    0
  8. 25

    From first glance, it looks like Pikabu uses the pattern that if you scroll the off-canvas area, it scrolls the main “body” area.
    Kyle, what were the thoughts about implementing in this fashion vs scrolling only the off-canvas area and keeping the main content in place?

    0
    • 26

      Hey Corey. Right now Pikabu treats desktop browsers as ‘dumb’ in the sense that we don’t give them an alternate scrolling pane. If you check out the example on a mobile device, you’ll see the viewport lock and scrolling enabled only in that section. I found this is what felt the most natural on the varying devices but there’s no reason you couldn’t implement the scroll lock on other browsers!

      Pikabu is definitely an evolving beast so — right now we’ve smoketested it on some really large sites but it’s not perfect. Submit a PR and let’s make it awesome.

      As to your question, I think locking scroll on the main pane makes the most sense for most contexts. The goal is to switch focus while maintaining context — there aren’t many situations where the user would actually want to scroll the main pane with the side pane.

      0
  9. 27

    “Certainly, the first people to go beyond the canvas and brave the unknown are lost to us. Like the Americas, we remember only those who made landfall most famously. Thus, Facebook is our Columbus”

    Nice opener!

    Everything else was great, too.

    0
  10. 28

    Cool article with the right message

    0
  11. 29

    Quick question with an issue I’m having.

    In some implementations of this idea, the off-canvas menu unexpectedly, but understandably extends the viewport width. I like to use the vw units in CSS, but the off-canvas menu screws up the viewport width. Any suggestions?

    0
  12. 31

    Having quite an interest on responsive navigation as a frontend developer the use of ‘canvas’ confused me. After reading the article I realised canvas was referring to the ‘viewport’ rather then a canvas item. I have written a similar navigation today on codepen. Although using media queries it creates two different experiences with the requirement of javascript to fire touch events on mobile (not sure on :target’s) real life use situation… perhaps you could shed some light here. With determining a menu based on a resolution or ‘rem’ ultimately fail with mobile becoming the benchmark for usability.? Sorry I wont babel on. Feel free to comment on topics mentioned or please offer improvements on the codepen http://codepen.io/lindsayjopson/full/enjqd . Great article, inflamed my brain :)

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top