I don’t know about you, but I’m on my cell phone a lot, and I don’t mean making calls. I confess to having a bit of phone phobia, which I’m sure surprises my best friend, as we were just recalling the hours we spent on the phone, talking about absolutely nothing at all. But if I’m in a moment of waiting, which happens a lot, since I have kids, I’ll pull out my phone and catch up on Slack or Twitter, either of which can end up sending me completely elsewhere.
I know I’m not alone in this, so my experiences–both enjoyable and not so much–on various sites remind me that the mobile experience is really significant. Google’s “mobile-friendly” designation is helpful for users searching for answers, but for us as designers, developers, and builders, it should be a bit of a kick in the pants to make sure we are serving our users well.
Does it really matter? I think so, yes. I just took a quick scan through the data for websites I monitor, and found that mobile traffic ranges anywhere from 5% of traffic on the low end to nearly 50% on the high end. So while it may matter more for some users than others, I think those numbers will only continue to push upward, and will matter more for all of us.
mobile menus can be difficult…
One of the most challenging parts of building a website is the mobile menu, especially if the site’s navigation is complex, or has more than one menu (for example, a primary and a secondary menu). Some themes have decent mobile navigation built in, some not so much, and some (usually a bit older) just condense the regular navigation down to multiple lines, which can take up a lot of screen real estate, especially if you have more than one menu. And if you have more than one menu, hidden behind buttons, how easy is it for users to know which menu they want to open?
You May Also Like:
There are also a lot of tutorials out there (I’ve even written one, which I wouldn’t recommend anymore, and I still really like this one from Ozzy Rodriguez).
…or they can be pretty easy (for you)
This spring, though, I had a client with an extensive primary navigation menu and a secondary menu. I ended up building a mobile menu solution for them which worked by combining both menus, along with a search form, all packed neatly together in a sliding side panel. Of course, my next consideration was whether I could easily implement it again for other projects, most likely packaging it as a plugin.
Long story short, I most certainly did. It’s been a huge effort, but I’m so excited to finally announce my first premium plugin offering for WordPress: SuperSide Me. It’s a super simple, easy to use mobile menu plugin. In many cases, you can add it to your site, activate it, and be up and running right away! Here are some of the high points:
- It works automagically. Any menus you have assigned to a registered menu location on your site will be pulled together into one side panel. Don’t want one of them there? Fine, there’s a setting to remove it.
- It has one super simple settings page. Because no one likes to be overwhelmed by a new plugin.
- It has some slick filters. Because developers don’t like to be limited by someone else’s plugin.
- It supports widgets. Not giving you permission go crazy here, but if you want to add a search box to your menu, or social media icons, you can do that.
Ready to experience SuperSide Me, see some examples of it out in the wild, or just want to learn more? Start here:
Congrats on the official launch Robin! This is a great plugin that will surely ease a major pain point for many clients and developers. Thanks for making this available!
Well done! I am thrilled to see it out there.
Congratulations, Robin! SuperSide Me is one of the best responsive mobile menu widgets on the market. Easy to use, easy to configure & extend. I plan to integrate it to all my other sites soon.
Hi Robin,
Can your plugin used for Genesis and the child theme?
Yes, it can! Since I work exclusively with the Genesis Framework, it’s my first priority when I’m building a plugin. SuperSide Me will actually work with many themes–there is nothing in it which makes it Genesis-exclusive. Depending on the theme, Genesis or otherwise, you may have to do a little extra work to disable the theme’s built in responsive menu, or at least hide it if it cannot be deactivated, but that varies from one theme to the next, depending on how the theme author implemented their responsive menu, if one has been added.
Hi Robin, is there something about WordPress that doesn’t allow for a slide-out menu like this to auto-close when someone has selected their navigation choice? All the mobile menus I’ve seen so far require a “close” action. I’m looking for something more in the line of, say, how the nypost.com mobile menu works. When you tap on your navigation choice, it takes you there and the menu disappears at the same time. Thanks for your response in advance.
Generally, a menu like this will close when you navigate to a new page, because of the process of loading a new page. The exception would be if you’re on a site which uses on page anchor links, to scroll from one section to another without actually navigating to a new page. Using a filter, it is possible to force SuperSide Me to close when any link is clicked.
That being said, offering a “Close” button is generally partly a courtesy, partly for accessibility. Not everyone who opens a menu panel actually wants to leave the page they’re on–maybe they just wanted to see what their options were, so it’s important to give them a way to close the panel without having to reload everything.
Ah, good points about closing when going to new pages. The site I’m interested in (actually have developed) uses page anchor links vs. separate pages, so there’s no “reloading”, per se. I’m just looking to let people quickly zoom up/down via a menu and have the menu close upon navigating so as not to require another press. Thanks for your reply.
Yes, the on page anchors make it a bit trickier, but you can manage it by modifying your script to consider any click on a link to be a trigger for a close event.
Hi Robin:
This plugin fits the need for beginners and experts alike. It develops actively as I see by the recent update. I’m glad you’ve added an explanation for use with Genesis Centric-Pro, I was going crazy and was about to write to you to help me.
Congratulations, greetings: Huberto Canovas