Big news! LibraryThing is now free to all! Read the blog post and discuss the change on Talk.
This site uses cookies to deliver our services, improve performance, for analytics, and (if not signed in) for advertising. By using LibraryThing you acknowledge that you have read and understand our Terms of Service and Privacy Policy. Your use of the site and services is subject to these policies and terms.
  • LibraryThing
  • Book discussions
  • Your LibraryThing
  • Join to start using.

Standardization of "left nav" design

New features

Join LibraryThing to post.

This topic is currently marked as "dormant"—the last message is more than 90 days old. You can revive it by posting a reply.

Edited: Apr 26, 2013, 4:47am Top

LibraryThing's design needs a lot of help. One thing it needs is just standardization--the same sorts of things need to look the same on different pages.

I've just completed a standardization of the "left nav" on LibraryThing. The "left nav" is what we call LibraryThing's secondary, left-aligned navigation, used on Talk, Groups, Recommendations, More and so forth. At root the PHP and HTML code for this nav was the same across the site, but major differences crept into how the navigation was displayed.

I've gone ahead and standardized it, basing it on the one used in Talk, which fastens itself to the very left edge of the page. But I added a blue "call out" by the selected item, which was previously just bold. I think this helps somewhat.

Some of the old "left navs":

Here are the new ones.

You can see the new left nav here:

http://www.librarything.com/profile/timspalding/stats/library (slightly wider, breaking the standard)

Let me know what you think.

Apr 26, 2013, 4:46am Top

It looks nice. The More Options >> doesn't do anything though.

Apr 26, 2013, 4:48am Top

I'm confused. What?

Apr 26, 2013, 4:48am Top

"More options" works for me.

Apr 26, 2013, 4:49am Top

Down at the bottom under post.

Apr 26, 2013, 4:49am Top

Well now it suddenly works. Never mind.

Apr 26, 2013, 4:50am Top


Apr 26, 2013, 4:51am Top

It doesn't do anything unless you're in a topic. I suppose that is how it should work? I dunno.

Apr 26, 2013, 4:54am Top

Good job, Tim!

Apr 26, 2013, 5:03am Top

Looks nice! More options didn't work for me either this morning, until I did a Ctrl+F5 refresh.

Could you add brightcopy's floating style while you're in that bit of the code? http://www.librarything.com/topic/102583

Apr 26, 2013, 5:49am Top

More options did not work for me until a refresh either...
I always wonder why 'favourite messages' are there instead of in 'my world' but that's another discussion most likely.

Very nice Tim.

Edited: Apr 26, 2013, 7:25am Top

Even with a hard-refresh, the "More options" link on the main Talk page itself doesn't seem to do anything (on a thread page it breaks out and shows the various options, but not from the main Talk page). Others seeing the same thing?

Testing edit.

Apr 26, 2013, 7:20am Top

Same here - Chromium Version 25.0.1364.160 Ubuntu 13.04. Works on a topic page, not on Talk

Edited: Apr 26, 2013, 7:26am Top

add: and when I hit edit my message doesn't show just a blank box - albeit with the correct options underneath.
Wonder what it will do...

Apr 26, 2013, 7:24am Top

And now I can't edit my message either - tried to add FF 20 and Mac OS...
It showed a blank box with correct options but when I hit saved it did not appear...

Apr 26, 2013, 7:24am Top

10> I don't think Tim wants the nav bar to float. He could do it easily of he wanted. It's a design choice.

Apr 26, 2013, 7:24am Top

OH wait - it appeared (later) as another message...

Apr 26, 2013, 7:25am Top

It overwrote my entire message - which was yep - same here.

Edited: Apr 26, 2013, 7:26am Top

Can anyone else edit their message - properly?

ADD: OK now it is working... WT.. ?

Apr 26, 2013, 7:29am Top

19> It's probably caching. Sometimes it gets a little out of whack when a new change is pushed.

Apr 26, 2013, 8:41am Top

I love it. Thanks Tim!

Apr 26, 2013, 9:14am Top

Looks good to me.

Apr 26, 2013, 9:26am Top

"More options" doesn't work. What's under there?

I guess I can't really comment until that's working and I know what's there!

Apr 26, 2013, 9:28am Top

>23 lilithcat:

Favorite Messages and Ignored Topics.

But only if you are in a thread. On the main Talk page it doesn't work.

Apr 26, 2013, 9:38am Top

> 24

On the main Talk page it doesn't work.

That's silly. It's not intuitive. If it's there, it ought to work.

Apr 26, 2013, 9:42am Top

>25 lilithcat:

Based on the comments above (including from Jeremy, I think it's a bug at the moment :-)

Apr 26, 2013, 9:53am Top

Commenting on the overall look-and-feel, I like both the consistency, the blue font, and the blue call-out. Nice.

Apr 26, 2013, 10:43am Top

Very nice.

Edited: Apr 26, 2013, 10:55am Top

The more-options thing is a bug—I only changed the look. I suspect this changed because the showing or not showing is based on a style. I'll look into it.

Is anyone else having problems saving. This really shouldn't have changed anything there.

Apr 26, 2013, 10:59am Top

Looks fine, and good to have standardization. Personally, I liked the look of the black/white/grey/highlighted box navigation (more modern/clean) better than the blue links, but that's an aesthetic thing.

Edited: Apr 26, 2013, 11:04am Top

Ditto for personal preference, but making them the same on the various pages makes sense.

Apr 26, 2013, 11:09am Top

Yeah, agreed with 30, the other look was a bit sleeker. But this is alright.

Apr 26, 2013, 12:06pm Top

>1 timspalding:

I like them, particularly that they are all the same, giving a common look. However, in the "stats menu" the "Helper badges" page doesn't seem to have been updated and the "Librarything Local" has a gap between the side of the page and the menu.

This is using Chrome on Win7.

Apr 26, 2013, 12:12pm Top

Apr 26, 2013, 12:17pm Top

30> Yeah, basically repeating that comment and the personal preference thing. I loved the white slider-bar looking highlighty bits, though it wasn't necessarily immediately obvious.

Apr 26, 2013, 12:50pm Top

This hasn't been forgotten. Full plate today…

Apr 26, 2013, 12:53pm Top

Ooh, what else is happening today?

Edited: Apr 26, 2013, 12:56pm Top

Snort. Well, a blog post, SOTT, a vendor who wants me to tell them what percentage of a list of ebooks we can enhance, setting up a trip to New York to meet with two companies, etc. Two sharing features may come out today, but they're dependent on an outside company approving something.

Apr 27, 2013, 1:02am Top

Also not updated here yet:

Fixed. Thanks.

Apr 27, 2013, 2:52am Top

I don't like blue callout box to the left. It draws my eyes out to the lefthand wastelands where nothing happens.

Not a big thing, I'm likely to get used to it, but I thought I'd mention it as others didn't seem to like it either.

Apr 27, 2013, 8:45am Top

Yeah, I'm not real happy with that little blue box. Not a huge complaint, just a small annoyance.

Apr 27, 2013, 9:06am Top

I'd have to agree that I like the other box better. I do think part of the problem with the little blue call out is that it is smushed there against the edge of the window and just blends into the edge of my browser window. I think a bit of padding at the edge of the box would make it more noticeable and useful.

Apr 27, 2013, 11:04am Top

I think the last two messages show the problems in designing for a large site. Basically, one person finds it draws too much attention to itself. The next feels like it doesn't stick out enough. Whaddyagonnado? :D

Apr 27, 2013, 11:04am Top

I would prefer that it not be there at all. Much too eye pulling.

Edited: Apr 27, 2013, 11:07am Top

#44 by MarthaJeanne> What would replace it for navigation? Drop down menus? They have their own annoyances. X)

Apr 27, 2013, 11:09am Top

Just the bold that we have had until now. I don't see the point of the blue square.

Apr 27, 2013, 11:38am Top

I don't mind the blue. Back when there was a neon-toothpaste highlight box, I hated it with a fiery passion, but the blue sidebar isn't nearly as obtrusive.

Apr 27, 2013, 11:55am Top

I don't find it obtrusive at all, it doesn't bother me in the least. I just think the other style that Tim replaced everywhere was a much sleeker, more pleasing look.

Edited: Apr 27, 2013, 12:12pm Top

48> Me, too.

But I also recall having to relearn several times that the white bar highlighting bit indicated which page I was on and wasn't a header/label of some kind. I love the way it looks, but it really isn't necessarily immediately obvious what it means. The blue links with the blue flag are much more common in navigation language on the web, I suppose.

(And I just realized another possible reason the little blue flag is a good design choice - it echoes the darker section of the header of your own posts in talk threads.)

Apr 27, 2013, 2:38pm Top

#46 by MarthaJeanne> Ah, gotcha. I thought the "it" referred to the entire left nav. :)

Apr 27, 2013, 3:46pm Top

Seems like several people preferred the look of the black and gray font with the box rather than the blue links with little blue rectangle. I wonder how widespread that preference is. Poll? Maybe with a side-by-side comparison of a before and after for the same page?

Apr 27, 2013, 4:05pm Top

#51 by rsterling> Yeah, but you'll have to start a brand new thread. And phrase it PERFECTLY. ;)

The other aspect is simply time. ANY change always sticks out until your brain has time to tune it out. As it stands, in talk we're used to seeing a sidebar chocked full of blue links all the time. Yet we tune it out for the most part. I think in a year, people won't even notice.

Edited: Apr 27, 2013, 4:32pm Top

52 -Yeah, I don't have any major objection to it (the new design), and don't notice it much. I just think it's not as pretty/sleek/modern. If LT wants to modernize its visual design, I think the previous nav was a step in the right direction, while this revision looks more dated (eta: mostly because of the dominance of the "blue link").

Apr 30, 2013, 8:58pm Top

Also not updated here:



both places are missing the left-most blue call-out thingie.

Apr 30, 2013, 9:15pm Top

Why is there a "cursor: pointer" on the entire .leftnav div? I keep clicking on what I think is one of the links, but instead am just clicking on the empty space to its right.

Apr 30, 2013, 10:18pm Top

55: Ugh, yeah. That's no good.

May 1, 2013, 12:22am Top

The "More options »" thing is fixed.

May 1, 2013, 8:40am Top

I too find the little blue box a little weird. I mean, the option we've selected is in bold -- isn't that enough?

May 1, 2013, 11:46am Top

I don't mind the blue call-out, but I liked the rounded-corners selection box better.

Group: New features

45,361 messages

This group does not accept members.


This topic is not marked as primarily about any work, author or other topic.


No touchstones

About | Contact | Privacy/Terms | Help/FAQs | Blog | Store | APIs | TinyCat | Legacy Libraries | Early Reviewers | Common Knowledge | 146,530,103 books! | Top bar: Always visible