Mobile Webdesign: The Right Place For Your Navigation
The design of mobile web layouts for smartphones poses a challenge for designers time and time again. The little space available on the devices has to be used in a meaningful way - mostly for the content. Thus, it would be best if the navigation took up no space at all, while still being easy and intuitive to find. The following examples show you suggestions where to place the navigation in your mobile web designs.
Nonetheless, the hamburger icon has established itself as the standard in mobile web design, especially in combination with a slide-in navigation. Here, most of the time, the icon is placed in the top left, with the navigation sliding to the right, into the viewport.
Even Google's Material Design makes use of this version of navigation. By now, it is so widespread that using it is not very outstanding anymore. However, you can be sure that every visitor to your website will find the navigation. You can't go wrong with this classic because although it might be subpar, everyone knows it by now.
Website of the BBC With a Flexible "More" Navigation[/caption]
Since, especially with extensive websites, it is unlikely that all menu items will fit into navigation, you simply hide everything that doesn't fit in, and add a "more" button at the end of the navigation. Behind that, there's a drop-down menu containing all the remaining links of your navigation.
The advantage is that not the entire navigation is hidden. Everything that fits is displayed. Usually, all the most important menu items are displayed. This flexible navigation is a mix of completely visible, and completely hidden.
Currys With an Icon-Navigation[/caption]
If your navigation is not all that extensive, it can make sense to leave the icons to themselves on the mobile view, forgoing menu text. However, you should make sure that each symbol has enough space, and make it very clear what it represents.
If your icon is even slightly ambiguous, or incomprehensible, you should not go for this approach.
The Website of Dove With a Fullscreen Navigation and Hamburger Icon[/caption]
Thus, many web designers give their navigations the entire display, rather than a simple slide-in menu. With these fullscreen appearances, the menu items tend to be shown with complex animations, or unhidden in other ways.
The individual menu items are often displayed in large text. Depending on the screen size, additional links to social networks, or contact forms are shown as well.
So, if you're sick of the classic slide-in navigations, you can try a fullscreen one with sweeping menu items. Here, the only limit to your creativity is the display size.
Anonymous Hamburger Society Forgoes a Navigation[/caption]
This is an attractive approach as well, although it doesn't work for every website. Instead of a classic menu, you can make the individual pages accessible via swipe gestures, for instance. Or you can turn your entire landing page into your navigation. This allows you to equip the links with meaningful headings, images, and icons.
Of course, this doesn't work for complex, extensive websites. Often, navigation is not just crucial for reaching individual pages. It is also a means of orientation, showing the user where he's at right now.
Classic: Slide-in Navigation With a Hamburger Icon
There was an extensive discussion regarding the use of the hamburger icon. Our editor-in-chief is no fan either. Usability experts like to criticize that the navigation is hidden entirely, and only displayed via the icon. This way, even essential navigation elements are placed outside of the viewport.
Nonetheless, the hamburger icon has established itself as the standard in mobile web design, especially in combination with a slide-in navigation. Here, most of the time, the icon is placed in the top left, with the navigation sliding to the right, into the viewport.
Even Google's Material Design makes use of this version of navigation. By now, it is so widespread that using it is not very outstanding anymore. However, you can be sure that every visitor to your website will find the navigation. You can't go wrong with this classic because although it might be subpar, everyone knows it by now.
The Flexible Navigation With the "More" Button
Those that don't want to hide the entire navigation outside of the viewport will surely enjoy the following navigation. It's a classic horizontal navigation with the menu items sorted by priority - as it should be anyway. The first menu item is the most important one. The other items follow in descending significance. [caption id="attachment_85375" align="alignnone" width="1024"] Website of the BBC With a Flexible "More" Navigation[/caption]
Since, especially with extensive websites, it is unlikely that all menu items will fit into navigation, you simply hide everything that doesn't fit in, and add a "more" button at the end of the navigation. Behind that, there's a drop-down menu containing all the remaining links of your navigation.
The advantage is that not the entire navigation is hidden. Everything that fits is displayed. Usually, all the most important menu items are displayed. This flexible navigation is a mix of completely visible, and completely hidden.
The Navigation With Text-Icon-Combination
Adding meaningful icons to a navigation's individual menu items is a popular design approach as it is. Thanks to the tons of free icon fonts and sets, you'll find a fitting symbol for just about anything. [caption id="attachment_85374" align="alignnone" width="1024"] Currys With an Icon-Navigation[/caption]
If your navigation is not all that extensive, it can make sense to leave the icons to themselves on the mobile view, forgoing menu text. However, you should make sure that each symbol has enough space, and make it very clear what it represents.
If your icon is even slightly ambiguous, or incomprehensible, you should not go for this approach.
The Full-Screen-Navigation
As the navigation is a critical component of a website, many people put a lot of effort into its design and animation. Even if your navigation is only accessible via hamburger icon, it does not have to be discreet. [caption id="attachment_85372" align="alignnone" width="1024"] The Website of Dove With a Fullscreen Navigation and Hamburger Icon[/caption]
Thus, many web designers give their navigations the entire display, rather than a simple slide-in menu. With these fullscreen appearances, the menu items tend to be shown with complex animations, or unhidden in other ways.
The individual menu items are often displayed in large text. Depending on the screen size, additional links to social networks, or contact forms are shown as well.
So, if you're sick of the classic slide-in navigations, you can try a fullscreen one with sweeping menu items. Here, the only limit to your creativity is the display size.
Forgoing a Navigation
Before overthinking where to put the navigation, some designers directly sacrifice a navigation completely. [caption id="attachment_85376" align="alignnone" width="1024"] Anonymous Hamburger Society Forgoes a Navigation[/caption]
This is an attractive approach as well, although it doesn't work for every website. Instead of a classic menu, you can make the individual pages accessible via swipe gestures, for instance. Or you can turn your entire landing page into your navigation. This allows you to equip the links with meaningful headings, images, and icons.
Of course, this doesn't work for complex, extensive websites. Often, navigation is not just crucial for reaching individual pages. It is also a means of orientation, showing the user where he's at right now.
Thanks for sharing your thoughts, great aritcle! There definitely are drawbacks to hamburger icon and full page navigaton as they do distract from the main page, horizontal navigation works well as it is very visible but not distracting and blends in with a wide variety of web layouts.