Cool notification messages with CSS3 & Jquery | Hacker News Reader

Cool notification messages with CSS3 & Jquery

red-team-design.com

194 pointsredmaniack33 comments

In this article, you’ll learn how to create some cool notification messages with CSS3 and Jquery.

There are a few... Ie. http://boedesign.com/demos/gritter/

Prefer this, less intrusive and nicer design!

Its a carbon copy of the Ubuntu notification system, (the regular notification which fades after timeout)

I think a system of notifications like this integrated into the chrome browser would be a real addition, as the popups now aren't all that nice to look at!

Which again is a 'carbon copy' of Growl, and etc.

Hey, thanks! I like this, it looks nice, and it actually got a license that let me use it instead of '© Copyright Red Team Design' :-)

Agreed that this is a much better alternative than the one in the OP. I don't quite see why the OP is getting so many upvotes when the UX really isn't very nice.

I think this depends on your use case. For the technically savvy, growl-style notifications are great. For a less technical audience, "more intrusive" notifications may be exactly what you need to make sure that the users actually see them.

I have to disagree that they are not suitable for the "non technically savvy".

Programs like ICQ, Zone Alarm, MSN Messenger, Yahoo Messenger, Skype, Windows Update, etc. have been doing bottom right "pop up, on top" notifications since Windows 95. Top right pop down isn't a very far removal from this.

I do agree that sometimes more intrusive notifications may be what you require, but don't think that the "top of page/app banner" is often the right use case. The best use case I can think of are control systems, where the screen starts turning red, with the main warning message at the top or the bottom. But this is done to allow the operator to see the entire screen to assess the state of the plant/system, with minimal screen estate taken away, and to allow immediate remedy (which of itself will probably remove the alarm condition, rather than the operator manually dismissing).

"I have to disagree that they are not suitable for the 'non technically savvy'."

I agree. That's why I said "may." It depends both on the nature of the notification, as well as on the sophistication of the user.

The sort of system you described sounds interesting. I'm trying to imagine how turning the whole web page reddish would work for common error/warning notifications. I've got a feeling that it wouldn't work well for the web, but it might be worth experimenting with.

Thanks for the idea!

Don't make the same mistake as Twitter, putting status notifications above navigation or other crucial elements. Disabling functionality due to a temporary notice is not good design.

The notifications are dismissable with a click, I don't think it's a big deal once you figure that out.

Very poor UX design then because there's nothing which indicates this would be the case, and no general understanding that clicking things makes them vanish.

It would be better with at least a close button in the top right that indicates that you can close it.

That's not good enough. Not in my UX book at least.

+ it's a waste of time, and clicks.

Then again, neither is pushing the entire page down for a notice at the top of the screen, and then moving everything after a couple of seconds just as the user is about to click on a button/link/whatever. It's amazing how many sites (and browsers!) currently do this particular stupid thing.

Yes, this 1000x over. I hate it when you have a huge DOM being pushed down by 20px for a notification, go to click on a button just as the notification is closing itself.

I much prefer the notification to come down from the top, have slight transparency to show covered elements, and then a way to easily close it. Very similar to the demo.

Not pushing down DOM or obfuscating the navigation is not a hard design to make.

I don't like it, also I'm pretty sure it isn't new. Stack Overflow has something similar, but it also pushes the page down as to not cover the topmost navigation.

Which can lead to misclicks since then you were trying to reach has simply moved. But, when you click a link from google, the message appears over the navigation for logged in users, so maybe they dropped that behavior?

Yeah, SO's notifications are similar. I think the shiny-ness of this technique is the gradient background images.

Thanks guys for your valuable feedback.

I just updated the article and demo: -Added CSS3 animation support for Mozilla 5+ -Fixed flickering the proper CSS3 animation -CSS3 gradients syntax updated. Now, Safari also renders background stripes.

Once again thanks for your comments! Catalin

Why would there be a warning-stripe background to the info & success variants? That doesn’t make any sense. Especially to colorblind users.

I found the animated stripes to impede the readability of the text. I agree the various notifications would be hard to separate for colour blind people. One could add some icons to indicate the type of message though.

Not bad, but I don't think I'd want to use something like this very frequently, as it's fairly intrusive. We typically use Pines Notifications for most of our work. Very flexible.

http://pines.sourceforge.net/pnotify/

I personally have a strong dislike for the Ubuntu-style notifications that can't be dismissed by clicking a close button, which Pines appears to use. My position is this: this is my desktop, if I want the notification closed, let me close the notification!

Now, with that rant out of the way, thanks for the link to another useful web notification tool.

the pines notifications have an 'x' to close them when you hover over the notification with your mouse.

is that not what you meant by the ability to close them?

At least on Firefox 5 on Ubuntu 11.04, the initial Pines page displays an Ubuntu-style notification at the top right of the page which becomes mostly transparent when hovered. This notification does not display an X, with or without hovering. Perhaps Pines changes notification style based on the detected operating system?

The article says the animated background diagonal stripes are visible in WebKit-based browsers, but I'm not seeing them in Safari 5.0.5 -- just in case that's of interest to the devs and perhaps to other folks as well.

I see them animate in Chrome but I don't see the stripes at all in Safari on Windows7.

We need a shim to use HTML5 notifications by default and fallback to something like this when notifications are not supported.

No we don't. HTML5 desktop notifications do not serve the same purpose as this.

This made Google Chrome Renderer eat 20% cpu, so no thanks.

Needs moar jQuery.

Reply on news.ycombinator.com