Post With Featured Image

On Designers’ Growing Fondness for Off-Canvas Flyout Menus

‘Responsiveness’ is perhaps the most frequently used and deeply worshipped word in the entire website design industry.

Every single thing on the Internet is practically contained within one site or another, the list of such things being really long – from text to images to videos to what not. And, because the number of smartphone users are only increasing every day, the demand for responsive website design has surpassed all limits to bring in the concept of ‘mobile-first.’ Today, instead of all those varying viewports that websites struggle to fit into every day, people now prefer just one single site, that loves a smartphone first and a desktop later.

But, amidst all these argy-bargy of browsers and viewports, big and small, what’s suffering big time is content choreography – the way every content of a site is synchronized for different browsers and screen sizes. Sadly, it still is unstable.

So, what have the designers resorted to?

Off-canvas flyout menu, the term is – the sidebar in a site that slides in from one side when you place the cursor over it, tap on it or simply, swipe over it.

With almost all features of a computer and even more, now being included in hi-tech smartphones, older desktops and laptops are turning into mere office-materials. The Internet is being surfed more on phones than on large screens. As such, designers are focusing more on content choreography suited exclusively for smartphones. The motive, of course, is to maintain a lot of content, show what’s most important and hide additional information to be visible only when needed. And, what else can serve this purpose better than an off-canvas navigation pattern?

Why did this feature become so celebrated?

Because, like bigger screens, the concept of browser windows is also on the verge of extinction. Well, kind of.

Every site is going pageless these days. So, there is more content in just one page without the end user having to shift his position in a site to look for information. This is undoubtedly a disadvantage as pageless websites have more space constraint and are long scrolling. But, with an off-canvas menu, this issue can be resolved with ease. The concept of windows gone, the trend of complex prototyping gone, there isn’t any reason why off-canvas navigation should not be so popular.

Who is the pioneer?

Facebook – the social media king.

Zuckerburg leads a rare, brilliant team, which always braves to think out of the box and go beyond the norms. It is only the immense efforts of this team that has made the social media platform so rich, famous and well choreographed.

So, when the site had met with a certain problem of long, content-rich navigation menu on mobile screens, the diligent team jumped into immediate action, solving the issue with the novel concept of using off-canvas pattern.

Would you, designers, opt for this feature now?

Off-canvas menus give us the liberty to get back to where we were on a site. It’s a spot saver and perhaps the best way to maintain the content of any mobile site. Show what’s required, hide the rest and never lose your way in a website – that’s how it works.

Yes, it is a complex process and prototype. But, as long as it makes the interaction smooth and end user happy, you, dear designer, should definitely, wholeheartedly give it a shot.


  1. Thanks for sharing your thoughts. I truly appreciate your efforts and I will be waiting for your further post thanks once again.

  2. Wow, this paragraph is fastidious, my younger sister is analyzing such things, therefore I am going to
    let know her.

  3. Greetings! Very useful advice in this particular post!

    It’s the little changes which will make the greatest changes.
    Thanks for sharing!

  4. Hi there very cool blog!! Man .. Excellent ..
    Amazing .. I will bookmark your blog and take the feeds also?
    I’m satisfied to seek out a lot of helpful info right
    here within the publish, we want work out extra strategies in this regard, thank
    you for sharing. . . . . .

  5. It’s an remarkable post for all the online people; they will take advantage from it I am sure.

Leave a Reply