An example of this functionality can be found in this site (shrink the browser viewport to see the selectbox navigation take over.)
Is this a good practice? Wondering if anyone has any experience to back this up one way or the other.
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
Yes. Drop-down is a perfectly fine way to keep navigation on top of the page while saving space with responsive mobile design. However, the standard rules of mobile design still apply. The drop-down must have a clear call-to-action associated with it indicating that it's navigation not a selector for a form and it must contain links to sections that are important to mobile user.
In your example, there's a good call to action Navigate... but the selection includes Source, which points to GitHub where no mobile version is available.
Since the time of the original answer, Smashing Magazine has rolled out a new responsive design layout. In that new layout, the primary navigation bar also becomes a drop-down with the first option called Smashing Categories when screen width drops below 590px.
CSS Tricks published the complete recipe for this approach in summer of 2011.
I think that using a drop-down is not a great interface to use for navigation on mobile. My experience from user testing on mobile device is that people want to do very specific tasks on a mobile browser, not just casual browsing. Additionally, users are used to native apps and enjoy using the same interface on a mobile browser.
The main goal on mobile browser should be :
So if you are going to use the drop-down list make it little bigger and make it look tapable. Another idea is to know exactly what your user wants and just give those features in one home page and make them click which ever they want. For example: See (www.dropbox.com) on mobile.