Responsive web design (RWD) has been a topic for many years. Like previous web design trends, responsive design has taken time to crescendo into mainstream popularity.
Today I’d like to discuss some common design trends in responsive navigation and how they could tie into your next web project. This post should at least give you a starting point, but remember that new ideas permeate constantly so there’s always room for improvement.
Natural Font Resizing
A very simple method to choose would be resizing fonts to fit nicely on the smaller screen. This doesn’t require a whole lot of extra CSS because you can gradually reduce the fonts with media queries.
Then beyond a certain point you might drop the menu into a new position keeping the list elements in proper alignment.
The web shop for Skinny Ties has a brilliant display of resizing and fitting fonts in their navigation.
On larger screens the nav elements align horizontally next to the logo. After dropping below a certain point the navigation moves down onto its own horizontal line and the fonts gradually reduce in size.
This is an interesting example because each nav item retains the related dropdown menu regardless of the screen size.
A smaller example can be seen on the Hangout music festival website. The header spans a full 100% width keeping all content centered.
On a smaller browser the links drop in size but always seem to have enough room on the page to breath. This technique is great if you don’t have more than 5-8 links in a menu – but there’s always room to experiment.
Using a wide horizontal menu with the combination of a small responsive screen doesn’t always bode well. One of the cleanest solutions would be realigning the menu towards a vertical display instead of horizontal.
Beyond that responsive threshold it would help users to see all the links in a formal vertical list which is easier to tap and browse.
The website for Hirondelle has an outstanding responsive navigation system. I find the vertical links to be much easier to read when compared to the more compact horizontal menu.
For nav menus that include sub-menu links these vertical layouts can offer more than enough room.
The clean layout style for Nanoc is a little different but works surprisingly well.
These menu links don’t turn into 100% block items but instead retain a tabular structure. This makes a clean grid navigation which is just as easy to browse on a mobile screen. A designer might even try to increase the font size just to make the links more tappable.
The overall gist is to not worry so much about making the page longer. Mobile screens already have a reduced viewport so feel free to try any method that can make the browsing experience more pleasurable.
Who doesn’t love the open and close command on toggling menus? It makes you feel like the boss in a sad yet fulfilling sort of way. Some users may get annoyed but there’s no denying this is a great tactic for controllable navigation.
You could even transform a vertical menu into a toggle menu which saves extra room on the screen.
Broadgate Park has a nice toggle menu that’s clean and functional. The navigation design blends nicely with the site using familiar fonts and colors.
It’s especially nice because even the sub-menu items can be toggled from the same page. This incorporates some great UX concepts to save time and HTTP requests when users need to browse multiple pages.
The large music and arts festival Bonnaroo has a similar menu which actually stays fixed as you scroll down the page. Each link can be clicked to directly access the page, or you can toggle the plus symbol to access deeper links.
It’s a great example of contrasting text and easily-accessible navigation items.
Now we get to the heavily debated hidden toggle menu. This has plenty of names like the 3-bar menu, hamburger menu, sliding drawer menu… or just the hidden toggle menu.
It first became trendy in mobile iOS apps that used native Cocoa libraries for powerful sliding animations. Web developers have since picked up the concept and use this a lot more frequently in responsive website layouts.
The website for Japan Times is a case where the menu toggle link stays right within the navbar itself. But the menu is hidden offscreen and must be toggled into view.
Comedy Central has a very similar menu which is just so classy”/>
Also once the side menu opens it will darken content on the page to keep the menu in full focus. Great effect when pulled off properly – annoying when done incorrectly.
I recently read a blog post which suggests avoiding these hidden sliding menus. The primary argument states that since all links are hidden by default the user may not know which pages are available, or how to access the menu at all. It also requires more time and effort to first open the menu before choosing a link.
There are plenty of arguments for and against this type of menu but I keep seeing it used in modern websites for good reason. It works, saves on screen space, plus it offers a method for top-tier links and sub-menu links to fit together nicely.
Here’s a UI trend where you keep the navigation links together but just realign the positioning. This could be vertical or horizontal, really doesn’t matter as long as the links fit and still make sense on smaller screens.
Stinkdigital moves their navigation into a horizontal block right beneath the logo.
On wider screens it would make sense to align them evenly and keep the page a little bit shorter. But as I mentioned this isn’t always a concern with mobile users. One caveat might be the font size – it could help readability to increase the fonts and let the links break down onto a couple of lines if necessary.
Here’s a really creative example found on the portfolio of Lotta Nieminen. It behaves like a single-page website that moves horizontally between content sections.
When resizing the window down smaller the links will bundle up on top of each other but still transition through content in the same way. It’s a fresh take on the realignment technique and it’s perfect for a portfolio layout.
How to get started
Look over some of your favorite websites (assuming they’re responsive), or favorite templates and themes, and see how they handle navigation. Check out websites in the same niche of each project you create as well.
Truly understanding what makes a usable interface is the first step towards building your own unique responsive trend.
Featured image: PureSolution