Responsive Navigation: Optimizing for Touch Across Devices

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? In these demos, Jason Weaver and I decided to find out. The Demos Why do these navigation menus work across a wide range of touch screen sizes? Across Screen Sizes First, why do we care about touch across a wide range of screen sizes? Tablets are no different. And the very notion of what defines a tablet is being challenged by laptop/tablet convertibles and touch-enabled Ultrabooks. Even beyond 13 inches, touch and gesture interfaces are possible. Accounting For Touch So what does it mean to consider touch across all screen sizes? Touch target sizes are relatively easy: just make things big enough to prevent accidental taps and errors. Designing towards touch really forces us to simplify and decide what's most important- what needs to stay on the screen. An Adaptive Solution

Implementing Off-Canvas Navigation For A Responsive Website Responsive WordPress Menu Plugin for Mobile Devices The Responsive Select Menu plugin lets you automatically turn your “WordPress 3 Menus” into an easy-to-scroll select box/dropdown menu. (A “WordPress 3 Menu” is a menu created through the WordPress admin area: Appearance > Menus. Many people typically use these menus in their top navigation spot, as well as other places.) The Plugin in Action Let’s go ahead and jump right into some examples to show you what it looks like. Here’s a look at a normal top menu in a mobile device using the WordPress Twenty Ten theme. And now here’s a look at that same top menu with the Responsive Select Menu plugin activated. When you touch the menu and pull it down, you get a select box/dropdown menu that you can easily scroll through with your finger. Featured Plugin - WordPress Newsletter Plugin Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot. Find out more Settings Width Breakpoint See a Working Demo

Responsive Menu Concepts The following is a guest post by Tim Pietrusky. I know Tim from his prolific work on CodePen and from being a helpful community member there. He wrote to me with this guest post about responsive menus which I'm more than happy to share with you below. When it comes to responsive design we are faced with various techniques on how to best handle altering our navigation menus for small screens. Three of them are made with pure CSS and one uses a single line of JavaScript. Before We Start In the code presented in this article, I don’t use any vendor-prefixes to keep the CSS easier to see and understand. All menu concepts in this article are based on this simple HTML structure which I call basic menu. <nav role=""><ul><li><a href="#">Stream</a></li><li><a href="#">Lab</a></li><li><a href="#">Projects</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul></nav> To address small screens I use the same media query on all concepts. @media screen and (max-width: 44em) { } 1. 2.