Once upon a time there was a brand new shiny website. It appeared on a desktop wide and proud, sort of like this:
It had a header and a footer and a sidebar on the right. The navigation bar had little boxes and fit nicely on the screen, with room to spare for one or two more menu items.
When you viewed the new website on a tablet or scrunched up the browser window by holding the bottom of the browser window and dragging it to the left, it looked more like this:
Note that the navigation bar still fit, but it was snug. There was no room for more menu items in the tablet view!
And now we approach the “uh, oh” part of the story. When we view the website on a mobile phone, the navigation bar no longer fits! It breaks up into little pieces:
For the sidebar we used special CSS known as media-queries to the get the sidebar to go down under the content. But the mobile requires a more sophisticated solution. On a recent site I worked on (see very bottom of this post for screenshot of this site), the site owner decided she wanted navigation tabs. Well, on the mobile version, before applying any mobile menu fixes, the tabs looked just awful. At least boxes scrunch neatly.
Another issue with mobile menus is even if you display the navigation tabs neatly in a vertical position on mobile instead of the original horizontal, the navigation tabs might then take up the whole mobile screen.
Here are a few possible solutions to the mobile menu problem:
- Don’t display a horizontal navigation menu at all on mobile. This is a really simple solution. You put display:none in a media-query, and you are done. Hopefully, you have navigation available in your sidebar or footer.
- Create a separate menu for mobile. I have done this method for a client. The problem with this method is the client needs to remember to update both the mobile and the main menu. On the other hand, if the most important navigation remains in the mobile menu while the desktop version gets flooded with new tabs, it may not be a big deal. Might be an easy way to go for some businesses.
I hope I didn’t lose those with a less technical bent with this last section! If you got that glazed over look, just ask your webmaster: how does my mobile menu look?
As a case example, here’s a site I recently completed (click to visit the real site):
Here’s how one of the mobile pages looks (parts deleted so it won’t be so long):
As always, thanks for reading. Did my story-like explanation help you understand a technical post a little more? Is storytelling a good method for teaching technical material?