• Active State:

    Mimics the header with italic red text, but also brings in the byline's style with the small info below it.
  • Hover State:

    Gray to red text, darker sub-text. You'll also notice a larger click area, which was already large enough on the existing site, but I decided to be a little more generous.
  • Subscribe via RSS:

    Not to clutter an otherwise simple navigation, I declined to add the RSS icon (it's farther down the page anyway). However, I felt RSS is still something people look for and should stand out.

    On the current site, it's simply off to the right. Here, it's to the right and orange.
  • Baseline:

    Taking a brief look at the font-size of body text, which is 14px Georgia/Times New Roman, I estimated a 21px line-height (1.5 ).

    The entire nav encompasses 3 line-heights worth of vertical space.

Redesigned iLT Navigation

Newer Older

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.

www.ilovetypography.com

Update: You can see my coded version here: www.markdotto.com/ilt/ with an alternate version at www.markdotto.com/ilt/index2.html

rmkonves, Ryan J. Wilke, pixeldiva, and 2 other people added this photo to their favorites.

  1. ilovetypography.com 84 months ago | reply

    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? ;)

  2. piotr, the flaneur [deleted] 84 months ago | reply

    Oh, I like that. Much better than the present menu.

  3. Mark Otto 84 months ago | reply

    ilovetypgraphy:

    Coding it might go something like this: markdotto.com/ilt/

    And if you didn't want the smaller text, you could always just turn that off ;). markdotto.com/ilt/index2.html

  4. Ricky Irvine 84 months ago | reply

    Make that hatchmarking at the top 100% on the body.

  5. ilovetypography.com 84 months ago | reply

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

  6. sandbaum 84 months ago | reply

    I like it! But I would add a few small detail to it. www.flickr.com/photos/24235712@N07/2493730665/sizes/o/

    Has this redesign something todo with the review at typesites?

  7. ilovetypography.com 84 months ago | reply

    @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.

  8. Brendan Falkowski 84 months ago | reply

    Yeah this would be great. Love the site anyway.

    @ Ricky Irvine - Agreed, good suggestion.

  9. Pedro Leal 84 months ago | reply

    I love the new menu! Way better than the older one!

  10. davidyeiser 84 months ago | reply

    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!

  11. Mark Otto 84 months ago | reply

    ilovetypography:

    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.

    davedotcom1983:
    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!

  12. Hamish M 84 months ago | reply

    Nice Job Mark, I love it!

  13. Mark Otto 84 months ago | reply

    Thanks, hamstu.

  14. ilovetypography.com 84 months ago | reply

    Mark, you've started something now. I've posted a quick mockup of an alternative sidebar (just a quickly drafted idea):
    www.flickr.com/photos/redsil/2495963456/

    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.

  15. Mark Otto 84 months ago | reply

    ilovetypography:

    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.

  16. Mark Otto 84 months ago | reply

    FYI everyone, links to my coded version are now fixed. Sorry about that!

  17. adamkayce 84 months ago | reply

    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.

  18. ilovetypography.com 84 months ago | reply

    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!

keyboard shortcuts: previous photo next photo L view in light box F favorite < scroll film strip left > scroll film strip right ? show all shortcuts