Navicon

Daniel recently asked a question on Twitter:

It was this article by Malarkey that he was looking for. Andy did a great job of comparing the iconography used for navigation in mobile apps and responsive sites. His conclusion:

Unless our navigation’s arranged in a grid (and so we should use a grid icon), I’m putting my weight behind three lines because I think it’s most recognisable as navigation to the average person.

The three-lines icon is certainly very popular, as can be seen in this collection of mobile navigation icons I gathered together on Dribbble.

But Tom has some reservations:

Andy Davies points out another potential issue:

I noticed this in the more recent versions of Android too. It does indeed look a little odd to see the same icon used in the browser chrome and in the document within the browser.

Double navigation (BUT WHAT DOES IT MEAN!?!?)

But I still think it’s a good shorthand for revealing a list of items.

The unicode character ☰ ☰ (U+2630) is the Chinese trigram for sky (or heaven)—one of the eight bagua. It consists of three horizontal lines. Now that could be a handy resolution-independent way of representing navigation.

Dribbble — Mobile First

Alas, when I tested this on a range of mobile devices, some of them just showed the square box of unicode disappointment. I had much better luck with the unicode symbol for black down-pointing triangle ▼ ▼ (U+25BC).

Dribbble — Navigation link

Mind you, with a combination of @font-face and sub-setting we’re not limited to what the browser ships with—we can provide our own icons in a font file, like what Pictos is doing.

Have you published a response to this? :

Responses

timkadlec.com

Jeremy Keith just wrote a post about mobile navigation icons wherein he talks about the “three lines” icon that Andy Clarke also advocated when he explored the topic earlier.

Theoretically, it would be easy to create the icon using Unicode symbols. For instance, you could create the icon by using the following HTML:


<a>&#9776; Menu </a>

Unfortunately, as Jeremy points out, many mobile devices fail to handle it correctly. Android and Blackberry devices, for example, don’t display the icon as intended.

I recently wanted to use the icon, and ran into this same issue. Inspired by Nicolas Gallagher’s post on pure CSS generated icons, I was able to get the icon to render nicely in about 10 minutes of CSS wrangling. So, if you’re dead set on rendering the icon without using an image, here’s how you can render it in CSS:


<li id="menu"><a href="#">Menu</a>></li>



li { list-style-type: none;
}
#menu{ position: relative;
}
#menu a{ padding-left: 20px;
}
#menu a:before { content: ""; position: absolute; top: 30%; left:0px; width:12px; height:2px; border-top: 6px double #000; border-bottom: 2px solid #000;
}

The above will render the icon to the left of the Menu link. (As someone pointed out on Twitter yesterday, Stu Robson did something very similar.) This is great, but we still have the problem of scalability. If the font-size is 16px, you’re sitting pretty. If it’s any larger or smaller, the icon will become disproportionate. Converting to ems makes for a more flexible solution.


li{ list-style-type: none;
}
#menu{ position: relative;
}
#menu a{ padding-left: 1.25em; /* 20px/16px */
}
#menu a:before { content: ""; position: absolute; top: 30%; left:0px; width:.75em; /* 12px/16px */ height:.125em; /* 2px/16px */ border-top: .375em double #000; /* 6px/16px */ border-bottom: .125em solid #000; /* 2px / 16px */
}​​​​​​​​​​​​​​​​​​​​​​​​​​​

If you want to be extra safe, you can wrap those styles inside of a media query as Roger Johanson has suggested. This should ensure that the styles are only applied to devices that can support generated content.

Is it a hack? Oh, absolutely. And several people were quick to point that out on Twitter. The result though, is the same: the trigram icon rendered without the use of images. The only difference? It’s supported much better.

If you see anyway to improve on it, feel free to fork the Gist.

# Thursday, August 16th, 2012 at 9:04am

Previously on this day

11 years ago I wrote Automatic eagle

I’m going a long way to test this feature.

12 years ago I wrote Commentary

Backing up my position on blog comments with some quotes.

14 years ago I wrote Web 2.0

Everybody’s talking about the new meme on the block: Web 2.0. But what exactly does it mean?

14 years ago I wrote Ligers, Lamarr and Eliza

When I first started reading this National Geographic article about ligers, a creature named in Napoleon Dynamite (it’s probably his favourite animal), I thought it was a parody. When the article began quoting actress Tippi Hedren about ligers and t