Responsive web design has been a hot topic for a number of years now. The rise of smartphone and tablet devices has meant that the way we browse the internet is changing – if your website isn’t appearing correctly on every single device, you can bet that you’re losing out on some serious business.
Most of the trends surrounding responsive websites focus on the navigation side of things – after all, no one is going to stay on a site that they can’t navigate around properly. Some of the trends that we believe it is worth focusing on when it comes to your own design include:
Natural Font Resizing
This is actually quite a simple trend, but one that has big impact. As the browser gets smaller, the size of the links do too – this ensures that they have enough room to breathe and aren’t squished up together. This technique is great if you only have 5 to 8 links in your menu.
Vertically Elongated Menu
The wide horizontal menus of standard desktop websites don’t tend to work well with the narrower vertical screens of smartphones. One of the cleanest solutions is to realign the menu so that it’s vertical instead of horizontal. The size of the font can be increased to improve tapability.
Some users do find toggles annoying, but it’s a great tactic for controlling navigation – particularly if you have a long list of menu items. Users simply click the ‘menu’ button and a list of pages that they can jump to drops down. Even better if the menu remains fixed as the user scrolls.
Also known as the hidden toggle, this type of navigation sees the use of three horizontal lines that are clicked to open the menu (in the form of a sliding side menu) and is great for saving space. The content on the page is often darkened when the menu is opened to keep attention on the links.
The navigation links are kept together and their position is realigned instead. This could be horizontal or vertical, it doesn’t matter providing the links fit and still make sense on all screen sizes. Some websites move the navigation from beside the logo into a block beneath it.