Redesigned iLT Navigation

I've been bugged by the original iLT nav ever since I first visited the site, but love everything else about it. I had already started working on something awhile back, but never got around it. It's a great website with an amazingly talented writer. I suggest everyone frequent this bad boy.


I'm not saying I'm perfect with this, just getting ideas out there :).


Notes on the screenshot have more thoughts on certain aspects.


Update: You can see my coded version here: with an alternate version at

  • 7y

    I like it! Would also be interesting to try single-line menus; e.g. Home, Tags, Contact, Font Game....
    Thanks, Mark. Any ideas on Coding it? ;)
  • Piotr 7y

    Oh, I like that. Much better than the present menu.
  • Mark Otto 7y


    Coding it might go something like this:

    And if you didn't want the smaller text, you could always just turn that off ;).
  • Ricky Irvine 7y

    Make that hatchmarking at the top 100% on the body.
  • 7y

    Goodness! You've actually coded it. I think I prefer the double-line one now. I'm really impressed.
  • sandbaum 7y

    I like it! But I would add a few small detail to it.
    iLT-minor by sandbaum

    Has this redesign something todo with the review at typesites?
  • 7y

    @Ricky trie that quickly with FireBug—looks great

    @segd yes. I've been meaning to change it for ages, but that review made me think seriously about it. There are many other elements of the design I'd like to change too (if I have the time); e.g. the drop-down thing (when one clicks "typography tags...") should be much prettier, and should not use a table.

    Then, next on the long list is the footer and tidying up the sidebar. I may remove that RSS icon.
  • Brendan Falkowski 7y

    Yeah this would be great. Love the site anyway.

    @ Ricky Irvine - Agreed, good suggestion.
  • Pedro Leal 7y

    I love the new menu! Way better than the older one!
  • David Yeiser 7y

    Very nice! Throwing my vote for the double-line version. I love that cross-hatching too! I would keep the width the way it is though, I think it fits better with the rest of the site. That's just my opinion though ;)

    Will the italicized title text (Home) be associated with the current page state or is it just on the home page? Having it on the current page would add a nice subtlety.

    Also putting a white border on the right of the navigation blocks would continue the theme of the 1px of white separation. (i.e. if you hover over "Typography" the gray wouldn't blend together with the "Home" navigation block.)

    Great work!
  • Mark Otto 7y


    I'd love to get in there and do more with the nav, and the rest of your site if time allows :). I got into Web design by doing small redesigns like this many years ago.

    Sedg - NL:
    I explored having borders for the nav when I did my redux, but realized that I was adding arbitrary noise to it. The graphic repeated at the top is to "cap off" the page, something the old nav didn't do and was lost because of it.

    I like the style, but it boxes in the nav instead of letting it flow. The boxed in style is something the rest of iLT lacks, and I think is the better for it. The main heading flows beautifully into the nav and doesn't cause any problems for readability.

    That said, you exercised great self control in adding only a few other borders. It's enough to be noticed, but not too much to cause problems.

    Good idea on the white border on the right. That's a great way to help add a little more contrast to each element without boxing in content more than necessary.

    Also, yes, Dave, the italicized tab indicates the current page, a nice throwback to the iLT logo.

    Thanks for everyone's comments!
  • Hamish Macpherson 7y

    Nice Job Mark, I love it!
  • Mark Otto 7y

    Thanks, hamstu.
  • 7y

    Mark, you've started something now. I've posted a quick mockup of an alternative sidebar (just a quickly drafted idea):
    iLT-redesign-sidebar by

    If you don't mind, Mark, I'd like to use your header. In fact, I'm thrilled that iLT readers are having a say in its design. It's your site more than it's mine.
  • Mark Otto 7y


    I would love it if you used my header! She's all yours!

    I'll take a look at the sidebar later this evening (I'm in California) and get back to you with something :).

    Glad to see your open to improvements and so receptive to the ideas. Makes iLT all the more worth reading.
  • Mark Otto 7y

    FYI everyone, links to my coded version are now fixed. Sorry about that!
  • Adam Kayce 7y

    This is an amazing example of user-driven community. iLT - shining example of being open and giving to your readers.

    I'm inspired, in more ways than one.
  • 7y

    The new menu is now live.
    A huge thank you to Mark for the design & coding; and thanks to everyone else who contributed. Now I'm off to tidy-up my side-bar.

    iLT readers are the best!
5 faves
This photo is in 2 albums

Additional info

  • Viewing this photo Public
  • Safety level of this photo Safe
  • S Search
    Photo navigation
    < > Thumbnail navigation
    Z Zoom
    B Back to context