More and more people are using mobile devices to surf the Web. In the beginning, web site owners were told they should have two versions of their site a .com for desktop users and a .mobi version for the mobile users. That recommendation has evolved over time. Today, they (I’m not actually sure who “they” are–but they are the ones whose advice filters down through numerous publications and blogs to us web designers and developers) are telling us we should only have one website (.com) and that it should be mobile responsive. In other words, the layout adjusts to the screen size of the user whether desktop, mobile phone, or tablet in all their various screens sizes and permutations of portrait and landscape orientation. One dilemma that still faces web designers is what to do about the main navigation. Seven design patterns have emerged to handle mobile responsive sites.
1. Do Nothing
2. The Footer Anchor
3. The Toggle
4. Toggle Overlay
This method is a variation of The Toggle design pattern. Instead of pushing the content down, it sits on top of the content. It has the same benefits and problems as The Toggle.
5. Multi-Level Toggle
This one is similar to #3 and #4 above but supports child levels which may or may not collapse or expand with the main menu. It has the same benefits and problems as The Toggle but adds the potential of confusing users to the mix.
6. The Select Menu
This navigation design can be very elegant and user friendly but it is much harder to build and doesn’t always scale well. On a small screen navigation is hidden away and replace with a link, icon or both. When users click on the link or icon a tray slides in from the left and the main content is pushed to the right.