Luke Wroblewski recently published an article detailing some thinking regarding navigation patterns as they relate to users interacting with touch screens.

As more diverse devices embrace touch as a primary input method, it may be time to revisit navigation standards on the Web. How can a navigation menu be designed to work across a wide range of touch screen sizes?

Here are the demos:

• Split Screen Navigation
• Multi-Level Bottom Navigation
• Variation: Split Screen Navigation with a background
• Variation: Single Row

I did some work with Luke on these and would like to make a couple of points from an implementation standpoint.

No Zoom

One thing I couldn’t get around in the demos was the fact that I had to set user-scalable=no on the viewport meta tag. This really irks me because I’d like to be able to set a fixed position element and still have the ability for users to pinch zoom. I’d keep that as a side note when viewing these demos and it might be a viable option to use javascript to get that navigation fixed to the bottom of the screen. Use your head and don’t get silly is always good advice. For the proof of concepts I came up with I like to keep it relatively simple for demonstration purposes.

Sub Navigation on Multi-Level

Unless I’m missing something obvious, I couldn’t seem to get the absolutely positioned ul to sit nicely on top of its parent element without explicitly declaring a pixel value. In other words, I couldn’t declare -100% top margin of the element. My only suggestion for this is the use javascript to get the height of the element and then declare and negative top margin for said element. So with jQuery it would be something like:

var $subnav_height = $('.active-subnav').height();
$('.active-subnav').css('top', -$subnav_height);