A common challenge that designers / developers are faced with when designing responsive design for mobile devices is the navigation of a website. This becomes much more challenging when creating styles for an ecommerce website. You could end up with multiples lines or buttons stacked up on one another, making the experience very difficult. There are however a few solutions that can be applied in order to make sense of the chaos.
Solution 1: The Drop Down Menu
As this is one of the most common ways of rendering menus I thought I best start with this. Not all designers are big fans of this method as most drop down menus, once on their respective devices, are not styleless with CSS.
That being said as it is the most common type of menu layout, it means that users are used to how menus like this will look, and so feel more at ease - ‘If it ain’t broke, don’t fix it’ There is a great tutorial Chris Coyier has written over on css-tricks that shows how a normal web menu can be converted, with a few lines of java, into a mobile acceptable menu. Rather then ul’s and li’s, it creates a < select > element and populates the menu items into that... great stuff!
Solution 2: Display As Block
This is the quickest fix for a mobile menu. Generally quick means lazy or little effort, but with a bit of thought you can create some good looking menus that work well and give the users clear paths to follow. The downside to the display as block method is the space... there ain’t none! It takes up a lot of room in the head of the site and means your users will have to scroll down past the menu, especially if its a big one, to see content. This would be great for a personal site, but definitely not practical for an ecommerce site.
To accomplish this method simply set each menu item as block elements so they display vertically. This can either be as a single list or a 2 by two, remembering that some peoples fingers and thumbs are big, and they will be frustrated trying to click on a tiny button.
Solution 3: The Menu Icon
Finally the menu icon method. This gives you full control of how the menu will look by toggling it through either CSS or java. It reduces the amount of space needed for the menu when closed but maximises the use of space when expanded, making sure your users understand exactly how to navigate around your site.
Reference Sites:
