Always Twisted

This page is old.

Although the content of this page may be useful. The page was part of a migratian and may look different and unmaintained. I am working my way through, tidying them up.

🙏🖤

These 3 lines

On This Page:

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.

Icon

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.

Words

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.

Opinion

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.

Unsure how to structure your design tokens for scalability and future growth?

I can help define a scalable structure for your tokens, ensuring they grow with your system.

get in touch!