A recurring problem when making sites fit in a narrow viewport is navigation. The most common approach on larger screens is to use a horizontal navigation for the top level items. Sometimes such menus are complicated/complemented by drop-downs listing sub-items, but I’ll leave that out of this post and focus on how to handle just the horizontal navigation bar.
Now, you could simply let the menu items wrap as they need to on small screens. In some cases that is a completely acceptable option, but often that can make the menu take up too much vertical space. One common design pattern (there are more, as evidenced by Brad Frost in Responsive Navigation Patterns) for avoiding that is to convert the navigation items into a select element on small screens. While doing so does save space and may initially feel like a smooth solution, there are a number of drawbacks, some of which Andy Clarke mentions in The select menu navigation pattern. I think there are better options.
I’ve always felt that using select elements for navigation is a bad idea, be it on the desktop, mobile, wide screens, or narrow screens. Form elements are simply not meant for navigation. So here is an alternative way of solving the problem.
Posted in Accessibility, CSS, JavaScript, Mobile Web.
Copyright © Roger Johansson