Responsive tablet navigation

Designing responsive navigation for tablets has always felt kind of awkward to me. Either you go with a collapsable full-width navigation where the items look too short for the screen or you cram it next to your content where it makes both your content and the navigation look tiny. I have come up with an alternative that scales up nicely to the desktop version of the website.

Something for the people

When we are trying to use a new tool we usually look for similarities with something more familiar. For example, when you first used your DVD player, you likely looked for the little triangle because you know from your old VCR that it means ‘Play’. Websites are no different. Even while a website is still loading we are already looking for the logo in the top-left corner, we know where the main navigation is and we assume that we will be able to find the ‘About’ information in the footer or at least a link to a page with that information.

We have to innovate when it comes to navigation on phones. There’s simply not enough screen real estate to stick to convention. But tablets are a different story. You get a lot more space to play with and even the smallest tablets can easily display 70 characters or more on a line in a decent font size. So why not just leave stuff where people know where to find it?

Don’t reinvent the wheel

This technique exploits two fundamental things that every internet user inherently knows. They know how to scroll/drag and they know where to find a sub navigation. With that in mind we can hide more than 90% of the sidebar off the screen without confusing the user or making them search for what they want.

It looks something like this:

Example of a responsive tablet navigation solution

In practice

The main content area is scrollable and the actual content is about 90% wide; the sidebar is visible enough for the user to know that there’s something there. Add a handle for the people that feel better tapping their way to the sidebar, sprinkle some javascript sugar to make it snap to the sides of the screen and done.

You can have look at a simple proof of concept I made or fork the tiny project on GitHub in case you want a starting point or just want to have a look at how it actually all fits together. Note that I didn’t put any effort into making the mobile navigation usable.

I hope this inspires you for future projects!