Responsive internet design (RWD) has been a subject for a few years. Like earlier internet design traits, responsive design has taken time to crescendo into mainstream recognition.
At present I’d like to debate some widespread design traits in responsive navigation and the way they might tie into your subsequent internet undertaking. This submit ought to no less than provide you with a place to begin, however keep in mind that new concepts permeate always so there’s all the time room for enchancment.
Pure Font Resizing
A quite simple methodology to decide on could be resizing fonts to suit properly on the smaller display screen. This doesn’t require a complete lot of additional CSS as a result of you may regularly cut back the fonts with media queries.
Then past a sure level you would possibly drop the menu into a brand new place maintaining the checklist parts in correct alignment.
The net store for Skinny Ties has an excellent show of resizing and becoming fonts of their navigation.
On bigger screens the nav parts align horizontally subsequent to the emblem. After dropping beneath a sure level the navigation strikes down onto its personal horizontal line and the fonts regularly cut back in measurement.
That is an attention-grabbing instance as a result of every nav merchandise retains the associated dropdown menu whatever the display screen measurement.
A smaller instance may be seen on the Hangout music festival web site. The header spans a full 100% width maintaining all content material centered.
On a smaller browser the hyperlinks drop in measurement however all the time appear to have sufficient room on the web page to breath. This method is nice in the event you don’t have greater than 5-Eight hyperlinks in a menu – however there’s all the time room to experiment.
Vertically-Elongated Menus
Utilizing a large horizontal menu with the mixture of a small responsive display screen doesn’t all the time bode properly. One of many cleanest options could be realigning the menu in direction of a vertical show as a substitute of horizontal.
Past that responsive threshold it could assist customers to see all of the hyperlinks in a proper vertical checklist which is less complicated to faucet and browse.
The web site for Hirondelle has an impressive responsive navigation system. I discover the vertical hyperlinks to be a lot simpler to learn when in comparison with the extra compact horizontal menu.
For nav menus that embrace sub-menu hyperlinks these vertical layouts can supply greater than sufficient room.
The clear format model for Nanoc is a bit of totally different however works surprisingly properly.
These menu hyperlinks don’t flip into 100% block objects however as a substitute retain a tabular construction. This makes a clear grid navigation which is simply as straightforward to browse on a cell display screen. A designer would possibly even attempt to improve the font measurement simply to make the hyperlinks extra tappable.
The general gist is to not fear a lot about making the web page longer. Cell screens have already got a decreased viewport so be at liberty to strive any methodology that may make the looking expertise extra pleasurable.
On-Display screen Toggle
Who doesn’t love the open and shut command on toggling menus? It makes you are feeling just like the boss in a tragic but fulfilling form of approach. Some customers could get aggravated however there’s no denying this can be a nice tactic for controllable navigation.
You could possibly even rework a vertical menu right into a toggle menu which saves additional room on the display screen.
Broadgate Park has a pleasant toggle menu that’s clear and purposeful. The navigation design blends properly with the location utilizing acquainted fonts and colours.
It’s particularly good as a result of even the sub-menu objects may be toggled from the identical web page. This incorporates some nice UX ideas to avoid wasting time and HTTP requests when customers have to browse a number of pages.
The massive music and humanities competition Bonnaroo has an identical menu which really stays mounted as you scroll down the web page. Every hyperlink may be clicked to immediately entry the web page, or you may toggle the plus image to entry deeper hyperlinks.
It’s an amazing instance of contrasting textual content and easily-accessible navigation objects.
Hidden Toggle
Now we get to the closely debated hidden toggle menu. This has loads of names just like the Three-bar menu, hamburger menu, sliding drawer menu… or simply the hidden toggle menu.
It first turned stylish in cell iOS apps that used native Cocoa libraries for highly effective sliding animations. Net builders have since picked up the idea and use this much more ceaselessly in responsive web site layouts.
The web site for Japan Times is a case the place the menu toggle hyperlink stays proper inside the navbar itself. However the menu is hidden offscreen and have to be toggled into view.
Most of those sliding aspect menus will push web page content material out of the way in which to create a higher give attention to the hyperlinks. One of many largest pitfalls although could be in browsers that don't assist JavaScript.
Comedy Central has a really related menu which is simply so elegant”/>
Comedy Central has a really related menu which is simply so elegant. Their interface makes use of JS together with a CSS3 fallback for cell browsers with out JavaScript assist.
Additionally as soon as the aspect menu opens it's going to darken content material on the web page to maintain the menu in full focus. Nice impact when pulled off correctly – annoying when completed incorrectly.
I lately learn a weblog submit which suggests avoiding these hidden sliding menus. The first argument states that since all hyperlinks are hidden by default the person could not know which pages can be found, or easy methods to entry the menu in any respect. It additionally requires extra effort and time to first open the menu earlier than selecting a hyperlink.
There are many arguments for and in opposition to any such menu however I hold seeing it utilized in trendy web sites for good cause. It really works, saves on display screen area, plus it gives a technique for top-tier hyperlinks and sub-menu hyperlinks to suit collectively properly.
Nav Realignment
Right here’s a UI development the place you retain the navigation hyperlinks collectively however simply realign the positioning. This may very well be vertical or horizontal, actually doesn’t matter so long as the hyperlinks match and nonetheless make sense on smaller screens.
Stinkdigital strikes their navigation right into a horizontal block proper beneath the emblem.
On wider screens it could make sense to align them evenly and hold the web page a bit of bit shorter. However as I discussed this isn’t all the time a priority with cell customers. One caveat could be the font measurement – it may assist readability to extend the fonts and let the hyperlinks break down onto a few traces if crucial.
Right here’s a extremely inventive instance discovered on the portfolio of Lotta Nieminen. It behaves like a single-page web site that strikes horizontally between content material sections.
When resizing the window down smaller the hyperlinks will bundle up on prime of one another however nonetheless transition by means of content material in the identical approach. It’s a contemporary tackle the realignment approach and it’s good for a portfolio format.
Easy methods to get began
Look over a few of your favourite web sites (assuming they’re responsive), or favourite templates and themes, and see how they deal with navigation. Take a look at web sites in the identical area of interest of every undertaking you create as properly.
Really understanding what makes a usable interface is step one in direction of constructing your personal distinctive responsive development.
Featured picture: PureSolution
