Advertisement
HTML/CSS

Examining Responsive Navigation Patterns - New on Premium

by

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+.

Related Posts
  • Code
    WordPress
    The Beginner's Guide to Selecting a WordPress ThemeBeginnersguide
    When you're first starting out with your site or blog, it's easy to rush into things because of the desire to get things up and running as quickly as possible. In some cases, that works fine, in others it's not always the best idea. And in this case, it's the latter.Read More…
  • Code
    Articles
    What Makes Mobile Design Unique?Mobile unique icon2x
    Are you getting started with mobile design? Any designer who's had the opportunity to design for mobile devices as well as desktop computers knows that mobile design is a one of a kind discipline. You'll find challenges unique for mobile. In this introductory article, I'd like to take a look at some of the attributes that make mobile unique. It's no secret that thinking about a product's design makes for a better product. This doesn't solely relate to aesthetics as design also influences how a product's functionality and how the user interacts with it. Design choices have a distinct influence on usability and user experience. When you start out as a mobile designer or developer, it's your responsibility to make the product not only work for you, but also for its target audience.Read More…
  • Web Design
    HTML/CSS
    Examining Responsive Navigation: Off Canvas PatternsNav patterns preview
    This is the final part in a Premium series about responsive navigation patterns. But here's the bonus: this one's freely available for everyone! In this tutorial we'll walk through four variations of patterns where navigation and page content is placed off canvas to conserve space until requested. It's time to stop copying and pasting, let's start understanding!Read More…
  • Web Design
    HTML/CSS
    Responsive Navigation: Toggle Patterns - New on PremiumNav patterns preview
    Welcome to the third in a Premium series which looks at responsive navigation patterns. This tutorial will walk you through three patterns where navigation is toggled on and off to conserve space at the top of the page. It's time to stop copying and pasting - check out today's Premium tutorial and start understanding!Read More…
  • Web Design
    Complete Websites
    Examining Responsive Navigation: Toggle PatternsWeb design
    Welcome to the third in a Premium series on how to develop responsive navigation patterns. This tutorial will walk you through three patterns where navigation is toggled on and off to conserve space at the top of the page.Read More…
  • Web Design
    HTML/CSS
    Examining Responsive Navigation: Footer Patterns – New on PremiumPreview
    Welcome to the second in a Premium series which looks at responsive navigation patterns. This article will walk you through four patterns where navigation moves to the footer, conserving space at the top of the page. It's time to stop copying and pasting - check out today's Premium tutorial and start understanding!Read More…