These 3 lines

Back in March, that Andy Clarke wrote a post on the need for a 'standard' icon for navigation in responsive web design. Two month's later in May, when I found my blogging 'mojo', I wrote a post on making navigation icons with only CSS. Then some months later Jeremy Keith wrote an article on three lined 'navicons' and two days later Tim Kadlec took a similar approach to mine and created a better CSS version of the three lines icon using nice and responsive ems.

This week Jordan Moore (not the country singer) wrote a post on 'The semantic, Responsive Navicon' and a couple of days later the trickster Chris Coyier wrote a post that showed various ways to have the three lines as a responsive navicon

After Jordan's post, there was a brief discussion on twitter on the use of the icon and 'it depends'. So I thought I'd quickly throw down some thoughts on what I think. 

So, here goes.


I think the icon is great, I think the fact that a site that has over a billion users of which just under half access via mobile which (possibly not for all devices) uses the icon helps. A lot. Yes, Facebook's site is more 'app-like' than your common or garden, um, garden centre website but I'm sure (at a wild guess) those users will recoginise it on the website you've created for your client.


I also think that if you've decided to go with the three lines including the word 'menu' is just a little bit of extra bulk you don't need. Let's not forget that space on a narrow viewport is at a premium, you could be taking up precious white space by 're-affirming' what the icon is doing. So I would suggest one or the other. Not both. As well as my feeling towards the added 'bulk' it's not very all encompassing in the World Wide Web. 

For instance...

menu is four charecters, in Icelandic the word is Valmynd. That's three extra charecters taking up room, breaking your site, making it look crappy. 


Of course, this is just my opinion. There are many opinions like it, but this one is mine. If I was to use an icon for navigation on a narrow viewport I would use three lines with no wording.