Examining Responsive Navigation Patterns – New on Premium

As web designers create more and more responsive sites, patterns continually emerge for how we handle global navigation. This is the first in a series of posts focused on how to develop some of those patterns. It’s time to stop copying and pasting – check out today’s Premium tutorial and start understanding!

Become a Tuts+ Premium member to gain access to the whole tutorial, as well as hundreds of other advanced videos, tutorials, and courses.

The Patterns

The basic problem with responsive navigation is one of space. On wide screens we have plenty of horizontal space to work with, but that isn’t the case on smartphones and similarly small devices. We could convert the horizontal space to vertical space on these small devices, but that pushes the content further down the page. These patterns look to keep navigation available while limiting the vertical space used.

The three patterns we’ll look at in this post are the:

• Top-Nav (do nothing) — keeps menu items to a minimum and uses css to adapt the navigation.
• Priority — prioritizes menu items to show and hide their display based on the available screen width.
• Select Menu — converts a navigation bar to a select menu where the available space is limited.

Each of these patterns attempts to solve the space problem in a different way.

Tuts+ Premium

The recently re-launched Tuts+ Premium is a service that provides top-tier training in a variety of creative fields. Whether you prefer books, visual training, or in depth tutorials, we have you covered. While we unfortunately can’t afford to provide the service for free, it’s only $19 a month – less than you’d spend on dinner.

We hope you’ll consider checking it out! In addition to learning a huge variety of new skills, it’s also a fantastic way to say thank you to Webdesigntuts+.