Company News, Web Design Thoughts, Website Project Launches, Development News and more
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.
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.
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.
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.
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.
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.