Mastering Responsive Web Design

The nav icon – basic guidelines to consider for RWD

The nav icon can be represented in many ways. RWD takes patterns from mobile apps since small screens apps and websites have many similar metaphors.

Let's take a look at the common navigation icon patterns:

• The hamburger icon.
• The word Menu.
• The hamburger icon plus the word Menu.

The hamburger icon

This is by far the most popular icon used to represent the navigation button: ≡.

The hamburger icon was created by Norm Cox in 1981. Norm's intention with this icon was to "…mimic the look of the resulting displayed menu list." (http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787).

In other words, the hamburger icon's real name is the list icon.

Now, if we think about it, the hamburger icon ...