Tale of a Mobile Menu Problem

Once upon a time there was a brand new shiny website. It appeared on a desktop wide and proud, sort of like this:
website mockup
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:
tablet website mockup

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:
website mockup mobile
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.
  • Create a new way of viewing the same original main menu, but show it differently on mobile. Most menus that I researched required javascript, which adds one more level of complexity to a menu (and sometimes javascript is disabled), but I did find this really simple CSS only method I decided to use. There are tons of mobile menu solutions available – if you Google “mobile menu” you will see.

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):

mybankstherapy screenshot home page

Here’s how one of the mobile pages looks (parts deleted so it won’t be so long):
screenshot mobile

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?

Please share:Pin on PinterestTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

38 thoughts on “Tale of a Mobile Menu Problem

    1. Becc, there are people whose only access to the internet is through their smart phone! Yes, it is becoming more and more important to view one’s site on mobile. And then there are those that use tablets for reading …

  1. Nice post, Leora! First off, let me say that i think storytelling is a good method for teaching anything, not only technical materials. i am a big fan of storytelling – your post it spot on πŸ™‚

    On your last screen – where different tabs are displayed one below the other (Home, About, Types of Therapy, etc.) – how does this work… is it like accordion? on click – the content below the specific tab reveals? if so, this is VERY neat, i like it πŸ™‚

    I am using responsive theme or for my wordpress something called mobile press which gives you a little square symbol which on tab (or click) reveals what options you have on the menu to navigate to another page. I think it is an easy way for non-technical people without a budget like me to still have a mobile site.
    Diana recently posted…How to Know Your Potential Freelance Client from Their Job PostMy Profile

    1. Diana, accordion menus are quite nice. However, they do require javascript. For simplicity reasons, I often choose a CSS-only approach, meaning no javascript. But if this were a business with heavy mobile use, then I would probably pick one from one of those many mobile menus that make it like an accordion.

      On the site I created, the menu is just relocated to the bottom of the screen. That way, you see content first instead of a crowded screen of navigation items.

      Already built responsive themes like you have are a great approach for small businesses.

    1. Great question about ads, Joanne. If an ad is simply an image, it needs to be re-sized for mobile. If one gets the CSS code right, this can be done along with the other images. Alternatively, one might serve different ad areas to mobile than one does to desktop. This is similar to serving different navigation menus.

      There is a lot written on the topic of ads. For example, Google Ads are a fixed size. But one can use javascript to alter which sizes appear on a browser.

      It seems there are companies specializing in this problem of ads on mobile!

  2. Ever since I was with WordPress, I have been using WPTouch to integrate my blog with mobile phones πŸ™‚

    The only disadvantage to the approach is that it will present a generic theme (won’t have that unique in my blog). So, I did remove it, once I got headway themes (their themes were responsive; so the themes were mobile ready :D).

    I do plan to try new themes in the future, so I should keep this in mind.

    Anyways, Thank you for sharing the experience, Leora πŸ™‚ This is something I don’t actually think about a lot, especially since I don’t own a smartphone; I am more of a laptop guy πŸ™‚

    1. Good, Jacqueline – I’m going to work on storytelling as a method for teaching tech. It will combine my love of a good short story with teaching what gives some the heeby jeebies, shall we say.

      Hope you figure out your own issues.

  3. That was really interesting. I had no idea how it worked but knew if you didn’t do in a different way you got something pretty darn funky. As for your question, I loved the story theme. But then again I love stories. It was fun to read and really made it fun and interesting to understand. πŸ™‚
    Susan P Cooper recently posted…Smoking Loon Pinot Noir 2012: WineMy Profile

    1. Susan, it could be the sidebar is not swinging down or the theme is suggesting everything become thin, thin, thin, which is not necessarily legible, even if it fits on your mobile screen.

    1. Mark, I’m glad you got the gist of it. That’s what was most important – just understanding that parts of putting a site on mobile are easy, and parts take a little more work. Mobile menus fall into the category of “think it through and investigate a decent solution.”

  4. Great post. When I created my website I was so unaware of the fact that it needed to be mobile optimized. It wasn’t without the help of my web developer that I had a mobile site that was user friendly.

  5. This was great and I didn’t get confused by jargon, which is a miracle for me. The first time I looked at my blog on a smartphone I was so surprised. I had no idea how it translated. Now that I’m rebuilding my organization’s website (well, not me personally of course) I have been flipping back and forth in the view to make sure that strange priorities are not being built into the design. I love that you provided suggestions for managing things. My IT guy is going to think I’m a genius. πŸ™‚
    Debra Yearwood recently posted…Label Blindness – When You Become Trapped By Your TitleMy Profile

  6. Leora- With more people accessing the internet through their smart phones, have a mobile site is becoming more and more important. I do have this on my things to do. I want to also analysis but Google Analytics to see the mobile traffic that I do get. One more thing to look at.

  7. Everything is always easier to understand when there’s a story. Good on you for taking the time to portray this dilemma in a way even us techno-peasants can understand! With so many people using tablets, it’s crucial to have a site that’s tablet-friendly. When I saw my blog on an iPad, I was horrified, and immediately changed the font. Yikes!

  8. I took the easy way out and created a separate mobile website which was really easy to do on Duda Mobile. They have a variety of templates. What’s neat is that when you go to the site you type in the url of your website and they create the mobile view almost instantaneously. You can then reorganize it. I called tech support and the rep took me through the process and I had a mobile view in short order that I’m quite happy with. The cost is $9 a month, and well worth it.
    Jeannette Paladino recently posted…Why You Should Edit the Headlines in Your LinkedIn DiscussionsMy Profile

    1. Jeannette, glad you found a solution that works for you. I’ve had companies that specialize in this type of work approach me to sell their version to my clients (not really a good fit, but it might be for some).

  9. Hi Leora, tough topic, Media queries can indeed solve many of these problems, but there are so many devices out there we can never really know, but only do our best. I think a hidden menu is the best for mobile as they really have very little real estate (except for that huge samsung note)
    Ashley Faulkes recently posted…Is Pinterest just for Chicks?My Profile

Please leave a comment.

Your email address will not be published. Required fields are marked *

CommentLuv badge