Please make new comments easier to spot during page scrolling.
Rationale: Ergonomics. Topics with several non-consecutive new comments force user's eyes away from the main content to the right, in order to notice the red "New" tag while scrolling. On the other hand, if the background of new comments was given a very slight visual clue, a very gentle shade of red, the eyes and focus could remain on the content. Even while scrolling towards new posts, glancing over older ones makes it easier to remember what the topic was about, or what the other comments said.
Required:
- slight CSS modification;
.comment-new.even, .comment-new.odd { background-color: #ffeeee; }
or "optimized"
.comment-new.even,.comment-new.odd{background-color:#fee;} - slight modification to the gradient image set in .comment{}, from gray-to-white into gray-to-transparent. An approximation image made in GIMP, encoded in Base64:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAaCAYAAACO5M0mAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAMpJREFUOMvFUzsWwzAMgvd8/xt16tT7JFnpYP2suFnrKX5GIJDC1/sjIo/KN8t9ALj0AydABuYAcHglN+jKeDaQNsocnEAJII2Y8x5gAhgq0kqaKgIBGAQOK6UWbLKp9liruymXPq0nouoZ1noPxiDSRtbjOdAcKqU9icnYHoFmSo3RnXdfyYieycMIqxl4X3U6dSncDHfOfdbrBmSGiBxlZnTPMQqwYVy81HE6Ix82R7QNv5Aub9NZAi/bEpieZwRefyTX5jrSf50vCJ6DklQ0f3cAAAAASUVORK5CYII%3D
"Optimized" version:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAaCAYAAACO5M0mAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAMFJREFUeNrFUjEOAzEIs6X+/0edOvU/uVtdRXVlBL2uzUISjMEA74+niByVO8v7BuDUBU6ADOYGLhrBjm6MRwNpZN6MfAO16bkdtipgbkaV1AqNr0m/GZdDGUCsH6kx0VPUJ/VB1+jPnNRuxkJU0/eGL9+HM50wY5y2TZQqY5QPXWFEDb8c4RQD2l+nk6WIGH5T7lm3DUgPrdyzdprWxwRgMNrMcYaRPzZH9IafiMoxnTTcqtFSN3AarjC5jIBt/nVeCJ6DkkcnzEAAAAAASUVORK5CYII%3D
Conclusion: Might be worth to try it for a few days. It should improve usability for logged in users without impacting any performance, and if there is negative feedback it's fairly easy to remove. After all those recent CSS changes, what's one more? 
Visit the Community page
Join our forums
Subscribe to our email newsletter
Subscribe with RSS
Follow us on Facebook
Follow us on LinkedIn
Follow us on Twitter
Follow us on Mastodon
Follow us on BlueSky
I use the Firefox addon Stylish with the PortableApps.com Enhancements+ style to do exactly what you're asking for.
I was thinking it would be useful as a default option on the website. Kind of like merging patches upstream in programing. Makes one less custom thing for others to install.
My posts are old and likely no longer relevant.
I can definitely see the benefit of having it upstream - I sometimes wish i had the enhancement when I'm looking at the site on my iPhone.
I agree that the 'New' was sometimes a little less than easy to notice. I just make it blink -- obvious (hard to miss) w/o being too distracting (for me anyway). To each his own.
I always thought it was easy to see the word "New". If I just scroll casually, I see a flash of red out of the corner of my eye, scroll up and it's there.
It's an nitpicky thing. Looking at "New" forces the eye to move off the content while reading, and it's not immediately noticeable. Maybe it's just my, but I can see "New" in the corner of my eye, but not exactly which comment it is.
I didn't even new there was a 'new' until this thread :). Guess I'll go with OP's idea.
have then 3 sets of colours in the rows, the light grey, dark grey and light red.
For me, the red "new" on the right works well enough at not being obtrusive. I'm here everyday and I notice it
Don't be an uberPr∅. They are stinky.
I've implemented something similar to this now. We'll see what folks think of it. Note that you may still have the non-transparent version of that image unless you clear your browser's cache.
Sometimes, the impossible can become possible, if you're awesome!
I like the change, but I find it's not quite dark enough to be noticeable at first glance. What about something like #FFDCDC?
What say you?
Sometimes, the impossible can become possible, if you're awesome!
Honestly looks a bit too standoutish to me.
Plus if you are interested in any level of web standards for readability and accessibility, the signature text and the "New" text in the top right both fail the WCAG contrast test against both the new message background and the existing background.
I backed it off a bit. Let's give this a try. It's supposed to be subtle. Just enough to draw your attention more easily.
Sometimes, the impossible can become possible, if you're awesome!
I'm good with this. We'll see what others think.
I strongly dislike it. It's too... I don't know the word in english, but I'll say corriente, for which the closest word google translate could come up with was unexceptional. So I'll take it. I really prefer the word New over the whole color change, but I know you mustn't ignore the masses and so I'll tuck my thoughts in the back of my head and hope I get used to it (if indeed you choose to go with it).
I'm sure specific suggestions will be entertained, but what does "New over the whole color change" mean? (Do you mean a column of 'New' from top to bottom?)
As for me, I don't like the new look enough to disable my current look (but, that's the beauty of Firefox/Stylish--most things are easy to "adjust" to your liking).
the word "New" is there.
I personally am fine with just that.
Well, another couple alternatives: a (thin) reddish border all around the new comments or just a (somewhat thicker) border on the right.
It's much better now.
Winterblood: yes, it's standoutish, but that's the point, make it obvious which posts are new at a glance. If this becomes a permanent change, we can get rid of the red "new" text, so that would get closer to meeting the standards you mention.
In fact it should make it much easier when there are multiple new reponses in different parts of a topics "tree"
“Be who you are and say what you feel because those who mind don't matter and those who matter don't mind.” Dr. Seuss
Not seeing any difference (on prod site anyway--are you "experimenting" on dev?). (I clear cache at Fx shutdown.)
UPDATE: OK, it's there now. Looks OK, I guess--the silver and "pinkish" seem to clash a bit to me, but... meh.
UPDATE 2: lighter pink now, less "clash"
UPDATE 3: I like this somewhat better:
.comment-new.even, .comment-new.odd { background-color: #ffe0e0 !important; background-image: -moz-linear-gradient(top,#ff9090,#ffe0e0 55px) !important; }That will only work in Firefox-based browsers though.
There are also (different) ways to do it in Webkit, IE and Opera, but not all of them function the same as I believe IE can't handle colour stops (the 55px bit in your background image).
but I was more interested in posting the colors and "suggesting" the gradient change (plus, I [obviously] use Firefox Portable
[<- this emoticon doesn't look that much like a "smile" to me]). However, w3c has standardized on the Mozilla Gecko format for gradients, so WebKit et al will be changing theirs. The gradient support also only exists in the newer versions of the browsers (which one would hope that almost everyone reading these forums uses(?). 
[<- and this one really doesn't look that much like a "wink"]
Thank you John!
I've been away for the weekend, but I like the change. Now, let's hope the lynch squad doesn't mind... 
Oh, I see I'm not late after all.
My posts are old and likely no longer relevant.
if it's going to be a shade of the red, make it one step up from imperceptable red. It should show a very slight difference so it doesn't distract you from the thread chain.
Don't be an uberPr∅. They are stinky.
Love it!!
It amazes me that on the internet you can be anything you want, and yet so many people still choose to be idiots.
I'd be more inclined to go for yellow. It is a much easier colour to contrast for readability, and looks less like it is screaming "YOU HAVE TO LOOK AT ME" while still being visible.
Maybe something like this?
All it takes is this:
.comment-new.even, .comment-new.odd { background-color:#ffe; background-image:none; }the "pink/red" is just a lighter color of the same PortableApps "red", so it's more "logical" (to me). Plus, my normal/not-new comments already use a yellowish shade for a background.
Just because it is mathematically a lighter shade of the PortableApps red doesn't make it an attractive colour, and doesn't mean it fits into the design of this site. Designs involving red/pink are, to me, one of the hardest things to get looking right, and most of them don't - I hate when clients ask for red or pink, I just try to avoid those colours as primary design elements as they are easy to get wrong. This is one of the few sites who's red design I like, but I just think the pink is reaching too far into potentially ugly territory. Plus from a readability point of view, it is one of the hardest colours to provide a good, readable contrast for text.
And please don't take this the wrong way, I am happy for the discussion etc. and I'm not trying to dismiss your opinion, but I don't think that you using a particular colour for one element in your custom CSS should influence John into not using that colour in the default CSS for a different element.
I can't really disagree with your statement that red can be "difficult". I generally don't like pink shades much at all. I played around with several here (darker is too dark and lighter is too light--again, for my taste). But, red shades are generally good for signifying change (or "new"); and in this case it's more of a temporary change. It does what it's supposed to as far as I'm concerned, which--yes--is to be very noticeable without being obtrusive. However, whatever the site ends up using, I'll still be using what I'm using. At least the text is black by default, so it's easy to read (unlike those places where the text is just a medium grey).
Yeah, sites can get away with grey as a font colour when it is dark enough (#555 or darker on white, #333 or darker on light grey), but black is usually a better choice.
One of my small issues with this site is the colour of the signature on the blue/grey background. Do I whinge about the contrast not being to spec for people with sight-affecting issues or do I just agree to disagree with John's design decisions because it isn't really "important" text?
And thanks for not being offended by my previous post. I seem to have a rare talent for offending with comments that I think are just being to-the-point. I almost didn't post it in fear of it being taken the wrong way.
I agree with both of you on several accounts. Red is not as easy to work with as for example blue or silver, and it often ends up less than ideal, but red looks really nice on PA. I went with that color in my suggestion because 1) PA already used various shades of pink in multiple places and 2) it looks more consistent with the overall red website.
Out of curiosity, winterblood, would you consider #555 to be dark enough for the signatures or is that still too bright to you? Doesn't really matter since it's less important content, just curious.
GlennAllen, I've found that red border would look out of place. Since the website uses a subtle border color, default comment borders almost blend with the background. Red border makes them look very boxy. Not sure if setting a border-radius would make it any better. Anyway, I was looking for an easy tweak, one John might actually implement and that wouldn't impact the overall design. Just a simple usability enhancement.
My posts are old and likely no longer relevant.
I'm also using a 5px border radius, which is something I typically do.
This is what I'm now using for comments (only the first section isn't "new"):
/* comments */ .comment { background-color: #ffd !important; background-image: -moz-linear-gradient(top,#fb4,#ffd 55px) !important; } .comment .new { color: #b00 !important; } /* new */ .comment-new.even, .comment-new.odd { border: solid 1px #B43006 !important; border-radius: 5px !important; background-color: #ffe0e0 !important; background-image: -moz-linear-gradient(top,#ff9090,#ffe0e0 55px) !important; } .comment a[href="/user/172683"] { background-color: #0b0 !important; color: #ffb !important; font-weight: bold !important; }UPDATE: I decided to add a left border for #comments and .indented -- to get some "tree lines"; since the rounded corners (and dark border) don't really look good with that, I'm just left with the reddish bg/gradient (which is fine all by itself).
The current contrast levels are fine to read (for me). It is dull, but it shouldn't be too heavy or it will appear to be part of the main content. I have still seen a couple of people in the forum mistake a signature as content, so I would prefer there to be a non-text separator like a top border on the sig.
What I am comparing the contrast to is the WCAG 2.0, which is a set of guidelines that specify ways to make websites more accessible to people with vision, hearing or other issues that may make traversing a website more difficult.
Going by the WCAG #777 fails, #666 passes to AA standard, while #555 passes to AAA (the highest) standard. There is an A standard, but it does not have any strict rules regarding mathematical contrasts.
It definitely does the task, though. It really helps make new comments jump out.
I like the idea of using a thicker or darker border for new posts instead.
I made this half-pony, half-monkey monster to please you.
I'm actually using all of my "test" methods right now: light red background with the gradient at the top, thin red border, and the thicker red border on the right (which I'll probably drop in the near future). New posts are easy to pick-out without being at all distracting (to me). I've also taken to highlighting my own profile link in the header to make my own posts more readily noticeable. I just think the quicker you can "see" what you might look for, the easier it is to read the posts (without being distracted by the "what's new?" or "where's mine?" little, nagging, internal questions).
I think the combination of the pink and the grey shadow at the top is a bit strange.
"What about Love?" - "Overrated. Biochemically no different than eating large quantities of chocolate." - Al Pacino in The Devils Advocate
I'd just like the comments to be a little more noticeable, regardless of the exact implementation or color. Going by general feedback, I'd like to edit my initial suggestion. John, would you please consider trying another iteration? Either a brighter shade of red, like #fff8f8, or as winterblood said a very bright yellow. Though red looks more consistent.
Another thing worth trying, if it's not too much of an effort, is a second gradient image specifically for the new comments. One that uses a darker shade of the whatever background color is decided on.
Example code usable in Stylish:
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("portableapps.com") { .comment-new.even, .comment-new.odd { background-color: #fff8f8 !important; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAaCAYAAACO5M0mAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAIlJREFUOMvFkTsOwCAMQ18k7n/C3qKla7oUhFJD2JoFFFmOP+bH4WxMAer7N8DDv78N2JYpYwSOzB/gOBZ3BbgEgwedHYjQ6DPX2/FMjQA+nk7N1AXTxzUrUDtdg76U0UR+XU4B7o1mrACn6NmijKhRtWPKzLKZK4mmA5WZNPBpnuq0YrdtMz/OAxJCNxiUweBFAAAAAElFTkSuQmCC") !important; } }Example code for the website (image currently in Base64):
.comment-new.even, .comment-new.odd { background-color: #fff8f8; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAaCAYAAACO5M0mAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAIlJREFUOMvFkTsOwCAMQ18k7n/C3qKla7oUhFJD2JoFFFmOP+bH4WxMAer7N8DDv78N2JYpYwSOzB/gOBZ3BbgEgwedHYjQ6DPX2/FMjQA+nk7N1AXTxzUrUDtdg76U0UR+XU4B7o1mrACn6NmijKhRtWPKzLKZK4mmA5WZNPBpnuq0YrdtMz/OAxJCNxiUweBFAAAAAElFTkSuQmCC"); }I strongly feel this would be useful, we just need to find the proper tweak. Though I'll drop it if it doesn't get implemented.
My posts are old and likely no longer relevant.
The new comments are already absolutely impossible to miss... to the point people complain they are too noticeable, so I don't think we'll be making them MORE noticeable. The only situation they wouldn't be noticeable is if your monitor's color calibration is really messed up.
Sometimes, the impossible can become possible, if you're awesome!
Due to complaints, I've suggested using even brighter colors, the ones that are less noticeable than currently. Toning it down so to speak... Sorry for poor choice of words, I was saying to others why I suggested that color in the first place ("to make it more noticeable than the way it was"). Then follows a suggested code that should be less visible.
Edit: from this to something like this. Should address concerns raised by the community, and the gradient change is suggested due to Simeon's input.
My posts are old and likely no longer relevant.
I think the real complaint is that the silver/grey gradient and the pink background look, well, kind of ugly together (and, yeah, "ugly" can be "impossible to miss"). That gradient looks fine with the normal comment's white background, but it doesn't really look good with the pink. (Of course, to each his own.)