One of the trickiest things to deal with that I’ve been finding in committing to responsive web design is that it really challenges to think about your site navigation.

Generally speaking this is a good thing. Critical to the success of any website is clear and logical navigation — so anything that forces you to think more carefully about how your navigation works should be positive. Particularly if it leads to simplification.

So over the last few months I’ve been developing a little library of navigation patterns to use on the responsive WordPress themes that I develop. Essentially these patterns are about answering the question of what to do with your menu when the width of your screen shrinks down to the size used on mobile devices. Mostly these are using media queries with CSS, but some use a little bit of JavaScript.

In developing this library I’ve been relying pretty heavily on the ideas developed by Erick Arbe on his site ‘Adventures in Responsive Navigation’. This is a really useful resource. There are a lot of practical ideas here — but he also understands that RWD forces you to think about your navigation in different way. This video also acts as a good introduction to these issues:

What I’ve not yet really tackled is what to do with the more complicated drop-down menus on responsive sites and the tricky issue of getting these to work with touch screen devices. Something that needs a more detailed post of its own.