CSS Message Boxes for Different Message Types

CSS Message Boxes for Different Message Types

CSS Message Boxes for Different Message Types

This article is for people who are already familiar with web design – development area.

As we have noticed, most of the time website designers and programmers hurry up to finish a project and they loose the meaning of what they are doing. The huge work load and the pressure these people face every day, makes them work like robots and not like humans.

The result is that they do not pay attention to some website elements, considering these elements as details. Unfortunately this behavior most of the times destroys the complete project. Even if they build a huge project with the most extreme functionality and technologies, still the meaning is getting lost, due to these so called “details”.

Unfortunately the most common “details” developers forget are called Message Boxes or Notification Boxes. These boxes are the ones who tell the user what to do, what went wrong, what was successful and so on. Therefore these boxes are actually the communication between the user and the application and if this communication is defective, the user will never be able to use the system and will navigate away.

The purpose of this article is to show what kind of boxes developers can use in their websites, when to use them and how to use them.

Let’s take a look at all the available Message Boxes:

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.

Success messages

Success messages should be displayed after user successfully performs an operation. By that we 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.

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.

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.

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

The goal is to have a single div that implements a single CSS class. So the HTML markup will look like this:

<div>Info message</div>
<div>Successful operation message</div>
<div>Warning message</div>
<div>Error message</div>

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.

And here are the CSS classes for all four 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');
}

Validation messages

Many developers can’t distinguish between validation and other message types (such as error or warning messages). In any websites validation message is displayed as error message and causes confusion in the user’s mind.

Validation is all about user input and should be treated that way. The purpose of validation is to force a user to enter all required fields or to enter fields in the correct format. Therefore, it should be clear that the form will not be submitted if these rules aren’t matched. That’s why it is better to style validation messages in a slightly less intensive red than error messages and use a red exclamation icon.

CSS class for validation message is almost identical to others (note that in some attributes are defined in previous code sample)

.validation {
    color: #D63301;
    background-color: #FFCCBA;
    background-image: url('validation.png');
}

Conclusion

Messages are an important part of the user experience that is often omitted. There are many articles that show nicely styled message boxes but it is not just a matter of design. It should provide a user with meaningful information, semantically and visually.

Janko Jovanovic 26/05/2008

Available Online: http://css.dzone.com/news/css-message-boxes-different-me

Share this post