Deciding what to do with website navigation on a mobile web design can be tricky. There are lots of different ways to tackle this. We talked previous about the different design patterns that can be used on mobile web design but there was one we missed off. The one we now use on kc web design Kent.
Pull down for navigation
Almost all users are used to pulling down to refresh iPhone apps and it has slowly become a standard interaction on touch devices. All of the current navigation methods used on mobile websites have their place and pros and cons but I quite like the idea of using a native interaction on the iPhone to deal with navigation.
To achieve the ‘pull down for navigation’ feature on your mobile website design I suggest looking at this great little script by Tom Kenny at Inspect Element and having a play with it. It basically adds a pull down bar to the top of your mobile website design which has the mobile navigation above it. The script then positions the page at the right coordinates so the the pull down button is at the top of the screen. When you pull down on the button it shows the navigation above it. Its a very simple, elegant way to deal with the lack of screen space on mobile devices and it conforms to a standard interaction that all iPhone users will be used to. It also works for new users and less familiar iPhone users by being at the top of the page and having very simple explanation text. Its a simple feature that can add a lot of style and give your mobile site a native feel.
We’ve used the script on the kc web design Kent website so grab you mobile and go to www.kc-webdesign.co.uk to see it in action.