CSS Message Boxes

[brittbr2]

1. Information messages
The purpose of information messages is to inform the user about something relevant. This should be presented in blue because people associate this color with information, regardless of content. This could be any information relevant to a user action.

For example, info message can show some help information regarding current user action or some tips.

2. Success messages
Success messages should be displayed after user successfully performs an operation. By that I mean a complete operation – no partial operations and no errors. For example, the message can say: “Your profile has been saved successfully and confirmation mail has been sent to the email address you provided”. This means that each operation in this process (saving profile and sending email) has been successfully performed.

I am aware that many developers consider this as an information message type, but I prefer to show this message type using it’s own colors and icons – a green with a checkmark icon.

3. Warning messages
Warning messages should be displayed to a user when an operation couldn’t be completed in a whole. For example “Your profile has been saved successfully, but confirmation mail could not be sent to the email address you provided.”. Or “If you don’t finish your profile now you won’t be able to search jobs”. Usual warning color is yellow and icon exclamation.

4. Error messages
Error messages should be displayed when an operation couldn’t be completed at all. For example, “Your profile couldn’t be saved.” Red is very suitable for this since people associate this color with an alert of any kind.

Design process
Now when we know the way to present messages to users, let’s see how to implement a it using CSS. Let’s take a quick look at the design process.


Info message
Successful operation message
Warning message
Error message
CSS class will add a background image to the div that will be positioned top-left. It will also create a padding inside the div so that text can have enough white space around it. Note that left padding has to be wider to prevent text overlapping with the background image.

error_07

And here are the CSS classes for all four (five with validation) different message types:

body{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url(‘info.png’);
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url(‘success.png’);
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url(‘warning.png’);
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url(‘error.png’);
}

More tutorials will be posted on my wordpress blog

 

[essellar]

Very nice, as far as it goes. But Mister Accessibility here can't leave it at that, now can he?

The problem is that there is important content here that lives in CSS and in "invisible" HTML class attributes. At least the CSS is being handled absolutely correctly: the border around these alerts should not be considered optional, since it is the one thing that carries over consistently to "high contrast" and other low-vision user modes. (And make sure you are using real borders, and not border-images — CSS images are usually the first thing to go in accessibility modes.)

The info, success, warning and error modes, though, are only indicated by a class attribute, colour and CSS background image (in this brief tutorial). Your <div> should also carry an ARIA role of "note" for info panels, "status" for success panels or "alert" for warnings and error messages:

<div id="message" class="warning" role="alert"> ... </div>

That only solves the problem for people using audio assists (screen readers) though. Low-vision users are going to need to have something else to draw their attention when it is actually required, since they are probably not going to see your colour codes, and definitely won't see your background images. If you give a warning or an error message, you should explicitly include the word "warning" or "error" (preferably in all caps) at the beginning of the message. There's no need to include anything for an info panel. You may or may not feel the need to emphasize the successfulness of an operation; usually just the "that worked" text by itself covers the territory, and there's nothing that requires user action.