Linearized Menu

Problem

Although inline menus are quite common on desktop websites, they are difficult to achieve on mobile. If your menu has several items, it will not fit properly on the mobile version of the website.

Solution

List all menu items vertically spanning the width of the device.

Because of the narrow width of mobile devices, in most cases you do not have enough space to display items inline. The solution involves disposing list items vertically covering all the width of the screen. This type of menu is quite easy to implement because it is the default behavior of a list when not styled.

Be aware that if the menu is extensive and is positioned on top of the page it will probably fill most of the page. You can easily cope with this problem with a JUMP MENU.

You should optimize list items for touch by making the list span across the width of the screen, and with height enough so they are easily triggered and nicely spaced so the wrong target is not tapped by mistake — TOUCH FRIENDLY BUTTON or ICEBERG TIP.

***

Web Design Patterns for Mobile Devices
New Adventures, 04/2012
Web Design Patterns for Mobile Devices
Clean Air Works, 04/2012
Web Design Patterns for Mobile Devices
Cacao Tour, 04/2012