Examining Responsive Navigation: Footer Patterns – New on Premium

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!

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

With the three header patterns in the previous tutorial our main concern was space, specifically vertical space and how not to use too much of it. You want visitors to see your content as soon as possible and they can’t do that if the navigation is taking up the entire screen. One way we can solve this problem is to move the navigation to the footer.

That opens up another set of challenges. While visitors will more easily get to the content, they’ll now have to scroll to the bottom of the page to discover the navigation.

The patterns we’ll develop in this article are:

• Footer only — keeps the menu in the footer at all times.
• Footer only variation — keeps the menu in the footer on small screens, but moves it to the header once space allows.
• Footer anchor — keeps the menu in the footer on small screens, but provides a link (button) to it at the top of the page.
• Footer fixed — keeps the menu in the footer on small screens and introduces fixed positioning so it remains visible.

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