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?

38 Responses to “Tale of a Mobile Menu Problem”

  1. Becc says:

    It is funny that you just don’t think about how the site will look on a mobile and yet, that is how many people view these things. We really need to think from all angles don’t we.

    • Leora Wenger says:

      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 …

  2. Diana says:

    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.

    • Leora Wenger says:

      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.

  3. Joanne says:

    Beautiful transition. And I love your advice when you don’t understand – just ask your webmaster – how does my mobile look like? That gave me a chuckle.

    What I’ve been curious about is if your site is an advertising driven site – how do you put the ads from the sidebar and footer Just a thought

    • Leora Wenger says:

      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!

  4. Jeevan Jacob John says:

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

  5. Catarina says:

    Leora, you are so right about the necessity for our sites to be displayed properly on not only computers but on mobiles and iPads.

    As you know, I have not got your technicals skills. But the WordPress plug-in Jetpack did the trick. Thank God for that, because if I had been forced to start programming I would most likely ruin my websites:-).

  6. Story telling is good for communications in general. I find it particularly helpful to influence or persuade. It makes a connection, kinds of bridges the gap, between an idea and it’s effect in real life.

    I do still have a problem with ONE section on my blog/website which my webmaster know about.

    Thanks Leora!

  7. Actually, it was a great story! Very effective teaching method and I very much appreciate the heads up on this. this has become an issue for me with my new Blackberry Q10.

    • Leora Wenger says:

      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.

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

  9. Susan Oakes says:

    I like the way you explained this Leora. My theme has responsive design but for some reason when I selected it the website looked weird and scrunched up on my website. Must investigate it further.

    • Leora Wenger says:

      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.

  10. Mark Brody says:

    I like this post. The nuts and bolts or the science of mobile communications is fascinating. Way too detailed for me, but reading your post, it makes sense why some sites look the way they do.

    Thank you for sharing!

    • Leora Wenger says:

      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.”

  11. 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.

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

  13. Jeri says:

    I keep resisting changing templates until I can take the time to find one that will be tablet and phone friendly. MailChimp is an example of a site that recently underwent a re-design to be tablet friendly. At first I hated it, but now the simplicity makes complete sense.

  14. Geek Girl says:

    When I was looking to upgrade my template the first requirement I had was it had to look good & be functional on mobile. No one should be looking at anything that does not look good & work on mobile.

  15. Arleen says:

    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.

  16. 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!

  17. Kire Sdyor says:

    Love that your technical paper was wrapped in a story. Still made my eyes glaze over though. Thank God for plug-ins.

  18. 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.

    • Leora Wenger says:

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

  19. 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)

Leave a Reply