Already in the past we wrote several times about the optimization of websites for mobile presentations. However, with each implementation, it becomes apparent again that adjusting the navigation is one of the most difficult points.
The problem is divided into three parts:
- There is less space available
- Target elements must be larger in order to be operated with the finger
- The navigation can be seen on every page
The situation worsens as the page becomes more complex, making navigation more important and more complex and demanding. But how do you do it best here to reduce the size of the navigation or rearrange it without leaving much of the navigation disappear?
The navigation takes more than a whole screen
Unfortunately, this problem is not easy to solve – even though there are no real standard solutions that can be reused and that are directly recognizable to the user at first glance – there is no expectation here – but also no recognition. That’s why the issue of navigating small screens is still a big part of the job, both for designers and developers implementing them, trying out new solutions and creatively creating innovative ideas.
Menus behind clickable buttons
The navigation opens by clicking on the red arrow
A solution that we use here both on the ilscipio website, as well as on the website of our OFBiz demo shop Syracus are hinged elements. These have the advantage that the button (or similar) uses less space and the large, space-consuming elements are only visible if the user really needs them. The disadvantage, however, is that it is necessary to think along with the user and that it is not absolutely obvious to every user that this button is an interactive element that conceals a navigation aid. Nevertheless, this type of construction seems to spread more and more.
Menus in the footer
Gray Goose Vodka has moved the navigation to the baseboard
egg
The same menu shrunk in size, cut short or too bulky
Unfortunately, this option can still be found again and again – the navigation elements are simply shrunk together to fit better in the available space, or kept the same or even larger in size and simply take up more vertical space. Alternatively, navigation options simply disappear.
This solution is quite legitimate on small sites but the bigger and more professional a website is, the less it becomes a viable solution. Because it affects the usability of the website on smaller representations very much. Therefore, in such cases, an improvement of the presentation should be thought of another solution, which one finds more often in blog posts on the subject, is the ability to move navigation for smaller displays from the top of the page in the foot of the page and above just a link to fast change to use navigation. Here, however, one breaks with the expectation of the users that a navigation can be found at the top of the page – and forces the user, if he wants to stay on the current page, to scroll up again.
Adapting the navigation for smaller displays, especially below 600px in width, is a complex matter that should be included in the initial stages of content and design planning. In doing so, attention should be paid both to the implementability and to the best possibility for the user in order to find a solution that can be used as long as possible.