May 04, 2014
Responsive navigation with noscript fallback
My initial mobile navigation solution left a lot to be desired.
So it was back to the drawing board. I started to analyse how other solutions worked, and was looking everywhere for inspiration and a suitable solution. About two days later I caught a tweet to this article by Brad Frost.
One of the things I liked in the article is Brad listed the pros and cons for each solution.
After reviewing Brad's list my two favourite solution were:
'The toggle' Approach
The toggle is similar to the footer anchor approach, but instead of jumping down to an anchor at the bottom of the page, the menu slides open right in the header. It's a good-looking approach and is relatively easy to implement
'The Footer Anchor'
This clever solution keeps the navigation list at the footer of the site, while the header contains a simple anchor link pointing to the footer navigation. This approach clears up a lot of room for the core content while still providing quick access to the navigation.
I have a preference for navigation menus, which while user friendly do not impede on the limited screen space of small devices, such as smartphones and hand held gaming devices.
The Hybrid solution