We have a good start on the responsive design. The menu at the smallest screen sizes breaks down into a 2×4 grid. It fits nicely on the screen, but between that and the the branding it takes up an awful lot of space. We open it up on the iOS simulator and see that in some cases you can’t see any actual content at all.
We take a look at a few resources on how to handle navigation patterns, like Brad Frost’s article Responsive Navigation Patterns and Jason Weaver’s Off Canvas. We also look at a cool demo on MDN called Paperfold.
We add an additional link to the navigation we ultimately call “Navigation ‘n’ Search” which will act as the button to reveal the mobile navigation when tapped. Through media query breakpoints, we hide and show this button as needed.
We spend a bunch of time tinkering with adding in the “paperfold” CSS, getting it working correctly, and then placing the search in a gap we create above the main content through some padding.
Ultimately, the sizing and position is tweaked to fit even nicer and a small close button is added. I go back and forth in my head with providing UI for toggling states on things like this. One one hand, now that the user has revealed the navigation, why would they need to close it? They’ve already seen it. If they don’t want to use it, they can just flick past it. On the other hand, I find it kind of annoying when I can’t toggle states like this on other apps (for some reason) so I’m inclined to provide a mechanism to do it.