The Responsive Universal Menu Icon

By Beacon News | Published November 1, 2012 | Categories: Web Development

Responsive website design will take over the internet, it's inevitable. It's a beautiful answer to the question of how to make content on the internet appropriate for a wide array of devices and screen sizes. With each new design and development approach comes a whole new set of standards.

Often the best way to deal with the menu in responsive design is to either stack it, creating an array of buttons or hide it in a drawer. Hiding the menu always seemed like it would compromise usability to me, but I've now accepted it as a reasonable way to deal with the main navigation of a site when it gets down to being displayed on a small screen size. Consider this, the menu isn't always needed for navigation, especially with the type of casual browsing someone may be doing from a mobile phone (while bored, waiting in line, at Starbucks).

Now that this technique is becoming standard, a universal icon is emerging to represent that menu that you instantly recognize. I present to you:

This seems to be the icon that is being most commonly used so far and seems to be quickly becoming a universally recognized symbol for a flyout navigation.

A few other options exist, however.

A menu in a standard type of drop down like shown above is not a bad option. But I think because that type of drop down is often used for many other areas (like contact forms) it isn't immediately recognized as a main navigation and may confuse some users.

The grid icon is also sometimes seen and it's commonly used to represent the menu in apps because they often utilize and icon based grid navigation. But for websites with text link navigations this symbol doesn't directly relate.

I think it's interesting how design is responding to responsive websites and creating graphics to suit it's needs. Time will tell if the three line icon will become a true standard or if more innovative ways of showing navigations will arise.