Why You Should Use The Hamburger Menu For Mobile Design

Website design is full of fads. Color combinations come and go. App design moves from “skeuomorphism” to “flat” design – like the simulation of a page turn in a books application instead of just sliding into the next page. Some of these fads stick around, whereas others fall by the wayside. I feel that the “Hamburger menu” belongs to the former category. And it takes on increased importance now that search engines like Google are making the website experience part of their ranking algorithm.

What is the Hamburger Design?

Here’s an example of a Hamburger menu on the NameHero website.

It’s represented by horizontal lines – usually three of them, but as you can see above, the design can vary. On the NameHero site (as of right now), it’s two lines, representing a list of menu items. Clicking this will either create a slide-out menu or show the menu covering the screen entirely.

You’ve probably seen in mobile apps that click the three lines on the top corner slides the menu into view.

Why It’s Good for Mobile Screens

The hamburger-style menu makes sense only for mobile screens because of the lack of screen space. Without a hamburger-like design, you’d have to show the menu with all its elements. And because the width of mobile devices is small, the menu ends up wrapping around to eat more vertical space, thus pushing your main content down. This isn’t a problem on desktop screens that typically have more horizontal space than they know what to do with. But it’s a real issue on mobile screens.

I can speak from personal experience, that this is a problem for my website WP-Tweaks on mobile screens. Here’s a screenshot of how the extra menu space hurts my NameHero review  by pushing it down:

I’m trying to work on a solution that doesn’t involve a lot of code, but it looks like I’m going to have to get a new theme. This brings me to my main problem.

Older Themes Suffer Badly

Not surprisingly, older themes have a hard time dealing with this. They were created before mobile screens were everywhere, and so were ill-equipped to deal with the explosion of mobile content. In those days, the biggest design consideration was responsiveness. The idea that you didn’t need a separate theme or subdomain for mobile content, and could make do with just one codebase.

But responsiveness is now a given. No theme worth its salt can afford to not work on smaller screens. And the hamburger menu is now a staple of responsive design. You simply need to have a better way to show menus.

Plugins are the Only Hope for Older Themes – But at a Cost

Changing a theme is a big deal. There are probably several artifacts related to the older theme which need to be updated or rewritten entirely. Also, there should be a good reason to change a theme other than just a menu. If everything else is working great, then it feels like overkill to do all that work just for a simple visual element like a menu.

For WordPress, the answer is obvious – plugins. Unfortunately, these plugins come at a cost – heavy additional code. I’m still in the process of experimenting with different plugins to see which ones can get the job done. I’m also taking a look at manual CSS options, but haven’t reached a firm recommendation yet.

Once I find a good solution, I’ll be sure to post it here on the NameHero blog so that everyone else can benefit from my research!