Home » Web Design » Popular Design Trends for Responsive Navigation

Popular Design Trends for Responsive Navigation

Published in Design, Galleries, Web Development

The mobile manageable website blueprint has turn a really common apparatus for designers. Building a blueprint is never easy and any website generally requires a singular solution. Responsive settlement incorporates both desktop and mobile inclination to produce a uniform browsing experience. we have seen a lot of illusory examples showcasing manageable web settlement trends.

In this essay we wish to concentration quite on navigation menus. To build a manageable navigation we need a technique for doing a resize down to reduce resolutions, or consequentially doing a enlargement for wider desktop monitors. Check out these several techniques that are my choices following a many renouned ideas for manageable navigation. There are apparently some other solutions out there, though this collection should give we ideas for removing started with your possess manageable designs.

Block-Level Menu Links

Consider navigation menus that are regulating singular box-style links in an nurse fashion. As we resize a window, these boxes possibly need to cringe or re-organize themselves. Block-level manageable menus are those that are designed to always keep a links arrangement in several positions on a page.

william csete portfolio website blueprint inspiration

As we can see in a portfolio of William Csete, it is probable to structure 3 opposite mangle points for your navigation. CSS3 media queries are a quickest and easiest process for building a manageable navigation that looks good in all complicated browsers. The links on his website are always kept in retard formation, even on 320px breadth iPhone screens we can see a many critical links directly underneath a logo.

deren keskin website portfolio manageable nav

Block and inline-block links are good when we usually have a tiny collection of them. It will not be formidable to rearrange a settlement of links and they can cringe to roughly any size. What’s critical is being artistic and pulling a bounds for whatever looks best. Do not be fearful to demo a character and see how it looks. Just keep your links stretchable nonetheless stout and always displaying above a fold.

Condensing a Navigation

A identical suspicion is to precipitate your links into smaller spaces while also re-organizing a position as needed. Generally we would use this technique with plane navigation menus that camber a vast territory of a header area. Block-level nav links typically stay a same distance and keep their strange padding. But for condensing we usually need to refurbish a sizes and space between a navigation items, like a instance on Oliver Russell’s website.

oliver russell website portfolio impulse navigation

The varying colors assistance to heed between any of a core navigation links. Although his website competence have a vast collection of webpages, a tip navigation usually binds 4 categorical links. This is since we notice so many additional space that is solemnly shortening a stuffing as a blueprint resizes. The settlement character also reminds me of a navigation on Bodhum that condenses links smaller until they eventually mangle adult to arrangement above a logo.

the bodhum network homepage manageable settlement inspiration

Another engaging probability for condensing links is to change from a plane into a straight navigation. This approach we are not stealing links divided from a page and users can still have full entrance to them. The website blueprint by Truf is an glorious example. As a links start to precipitate and get closer to a logo, a manageable character will force them into a straight settlement instead. Using this settlement we could potentially fit 6 or 7+ links all in order, nonetheless it competence demeanour rather cluttered on a mobile smartphone.

truf artistic website blueprint manageable navigation links

Input Select Options

Many of a new free WordPress themes that are expelled on their website are utilizing this mobile navigation technique. Not all WP themes are responsive, though for a name few that are we have beheld a navigation eventually turns into a dropdown name menu. Clicking on a specific page will move we immediately to that page and it becomes a comparison option.

smashing repository homepage blueprint impulse responsive

On a latest redesign of Smashing Magazine we can also see this underline being implemented. we will contend that nonetheless it can demeanour a tiny out of place, there is copiousness of room for gripping links available. This process is really easy to setup and we do not need to worry many about rise sizes or additional padding.

japi blog website manageable navigation settlement interface

There are a integrate downsides to this as well, namely that users competence be confused as to a purpose of this dropdown. More people are apropos informed with manageable layouts any day. But some visitors competence not commend this trend, and they competence be confused as to a purpose of a name menu during a tip of a page. But we can inspire users by conceptualizing a good propitious blueprint around a navigation name menu. Japi Blog does an glorious pursuit with their manageable settlement by encapsulating a nav between a dashed limit box.

Hidden Dropdown Toolbars

When it comes to stealing navigation links there are 2 illusory solutions we have found. This initial choice is to use a standard dropdown navigation that toggles as a user taps a nav button. Some dropdown menus could seem on tip of a page calm as we see with Performance Marketing Awards. This choice will save space on a page and keep a animation outcome comparatively divided from a page content.

performance selling awards internet toolbar navigation inspiration

I like this suspicion for elementary portfolio websites or personal blogs. Generally these websites do not need too many links, so a menu itself should never go over a page height. If we are regulating bound positioning afterwards this competence be a problem and other dropdown/pushdown menus would be a improved idea. Right divided my initial suspicion is a manageable navigation for a Treehouse Blog. Instead of carrying a dropdown seem over a content, instead it will pull down a page to make room for displaying a full straight navigation.

treehouse blog teamtreehouse manageable blueprint dark navbar

This suspicion stands out to me a many since we can embody sub-links and even sub-sub-links if necessary. It is an superb resolution for switching between a desktop-style float dropdown into a mobile-style click-to-toggle dropdown. Andrew Chalkley even wrote a tutorial for a blog explaining how developers can build their possess manageable dropdown navigation.

tigerlily navigation manageable homepage webdesign

Sliding Nav Boxes

The other choice for a dark manageable navigation is to keep your links off to a side of a page and toggle this menu in a identical fashion. The user competence daub on a symbol to hide/show a navigation, though it will slip in from a side as is standard of many iOS applications. The homepage settlement for Kin HR uses this technique total with a top-level dark navigation.

kin hr startup homepage impulse credentials navigation hidden

The initial page uses a vast fullscreen credentials with links positioned off in a right corner. As we resize a blueprint a tiny 3-line toggle symbol will appear. Tap this to see a nav links pull down a page and seem right during a top. Visitors can simply toggle between arrangement and stealing these links but many difficulty.

sequence startup homepage navigation shifting vertical

The dark manageable menu for Sequence behaves in a identical fashion. The toggle symbol will slip a whole page over to a right, that reveals a common straight navigation menu. we have seen this trend ascend in new iPhone applications and it provides one of a easiest quickest user experiences. Strangely their website toggle symbol does not tighten a nav, instead we have to daub somewhere in a physique or onto one of a links. But apparently this doing will change between any website and we can select your possess functionality when building a identical navigation menu.

Responsive Design Galleries

Final Thoughts

Although mobile manageable settlement has been around for years, it seems to have undergone a extensive enlargement over a year 2012. we would not be astounded if we find even some-more impulse galleries, open source libraries, webapps, and settlement practices revolving around concordant manageable websites.

I wish these navigation trends competence produce a starting indicate for rising your subsequent project. The pivotal aspects to cruise would engage how many links are to be enclosed in a design, and how they should be formatted within a layout. But spending some additional time formulation out your manageable ideas will positively produce a pleasing final product design.

About a Author:

Jake is a freelance author and frontend web developer. He can be found essay in many blogs on topics such as mobile interfaces, freelancing, jQuery, and Objective-C. Check out his other articles via Google and follow his tweets @jakerocheleauJake’s Google+ profile.

scroll to top