

Cool notification messages with CSS3 & Jquery - redmaniack
http://www.red-team-design.com/cool-notification-messages-with-css3-jquery
In this article, you’ll learn how to create some cool notification messages with CSS3 and Jquery.
======
keyle
There are a few... Ie. <http://boedesign.com/demos/gritter/>

~~~
Swannie
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.

~~~
joshuacc
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.

~~~
Swannie
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).

~~~
joshuacc
"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!

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

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

~~~
pixeloution
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.

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

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

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

~~~
emp_
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?

------
redmaniack
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

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

~~~
mark_story
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.

------
vailripper
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/>

~~~
nitrogen
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.

~~~
crcastle
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?

~~~
nitrogen
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?

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

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

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

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

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

------
hackermom
Needs moar jQuery.

