CSS Message Boxes for different message types

May 22, 2008

Can you believe this: Few days ago I went to my bank to check my credit score with the Credit Bureau. The bank official typed in my personal data and sent a request. Web application responded by displaying a yellow message box with an exclamation icon saying that data processing is still in progress. He checked several more times, but he didn't notice that at one moment the message changed to "Account available". But the message box hasn't changed. He continued to check a few more times and eventually he realized that the request was successful.

I don't know what was in the minds of developers and designers who created this application, but it certainly wasn't the user. This poor bank official was really frustrated. I can't imagine what the rest of the application looks like.

To prevent this, different message types should be displayed differently. My opinion is that every web application should handle four main message types: information, successful operation, warning and error. Each message type should be presented in a different color and different icon. A special message type represents validation messages.

I will show you a remake of CSS message boxes I used on my latest project. I changed them slightly just to make them simpler for this example. In next article, you will see how to create ASP.NET user control that can support different message types and how to style it using CSS. You will also see how to style ValidationSummary in a similar way.

Let's first take a quick look at message types.

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.

 error_04

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.

error_03  

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.

error_05

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.

error_01 

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.

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

        <div class="info">Info message</div>
<
div class="success">Successful operation message</div>
<
div class="warning">Warning message</div>
<
div class="error">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.

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');
}

Note: Icons used in this example are from Knob Toolbar icons collection.

Validation messages

I noticed that many developers can't distinguish between validation and other message types (such as error or warning messages). I saw many times that validation message is displayed as error message and caused confusion in the user's mind.

Validation is all about user input and should be treated that way. ASP.NET has built in controls that enable full control over user input. 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 I like to style validation messages in a slightly less intensive red than error messages and use a red exclamation icon.

error_09

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.

There are two other articles I would like to recommend you:

In my next article I will show you how to create ASP.NET user control that can wrap all of these message types and present it to a user. You will also see how to apply this style to a ValidationSummary control.

Let's discuss this on twitter.

132 Comments

  • Nick Berardi (May 22, 2008)

    Very nice.

  • Kevin Jensen (May 22, 2008)

    What a great article!

  • Girl Names (May 22, 2008)

    helped me a lot. Great article

  • Steve Schilz (May 22, 2008)

    This is a very nice, simple CSS example! It combines clear, concise design advice (that should be obvious, but clearly is not to many designers) Thanks…

  • Dave (May 22, 2008)

    Very nice.

  • sir jorge (May 22, 2008)

    this is going to come in handy for sure.

  • Marnus (May 22, 2008)

    Thank you for the article!! It is so refreshing to get a story with it and the best is the layout picture of the different elements. And yes, information/warning/error messages are to much overlooked in thin client web apps!

  • Daniel Stockman (May 22, 2008)

    Here’s some cleaner CSS:

    .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: #D8000C;
    background-color: #FFBABA;
    background-image: url(‘error.png’);
    }
    .error {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url(‘warning.png’);
    }
    .validation {
    color: #D63301;
    background-color: #FFCCBA;
    background-image: url(‘validation.png’);
    }

    The border’s color is inherited from the color declarations, since they are the same values.

  • Tony White (May 22, 2008)

    Excellent article. Very helpful info to share.

    For those reading along, notice that the only different between each of those boxes are the colors and background images. All of those message boxes could have an additional class of "messageBox" that handles the shared styles (like border thickness, background image positioning, etc.) , then use .info, .error, etc to attach just the unique css attributes.

  • Andy Ford (May 22, 2008)

    A similar concept is built into BlueprintCSS. <a href=""http://code.google.com/p/blueprintcss/">http://code.google.com/p/blueprintcss/</a&gt;

  • Andy Ford (May 22, 2008)

    http://code.google.com/p/blueprintcss/

  • Janko (May 22, 2008)

    @Daniel, thank you so much for refactoring! I updated the code in the article :)

    @Steve, @Marnus, you are right. Unfortunatelly this is to much overlooked. Developers and designer often do not take care of it at all. I so many times refactored what other developer messed up and I got surprised each time! :)

  • nino (May 22, 2008)

    this is an amazing work! I will use this as an example for my framework! thanks for sharing!

  • Blog (May 23, 2008)

    Keep showing us more code.

  • Web Design (May 23, 2008)

    Very slick subject to cover.

    I have to agree with you that GUI Designers / Developers need to focus more on the user experience. Great coverage on how to develop some simple messages to help the designers of the future <thumbs up!>

  • mark (May 23, 2008)

    The class names are mixed up (warning should be error, and vice versa):

    .warning {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url(‘error.png’);
    }
    .error {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url(‘warning.png’);
    }

  • Janko (May 23, 2008)

    @Mark, thank you. I fixed the sample.

  • Manu Temmerman-Uyttenbroeck (May 23, 2008)

    Great post! I’m almost finished implementing them in our application.
    I have a few questions though.
    – Why is there the margin of 10px on top and bottom? This didn’t look nice here, so I removed it.
    – What is in your opinion a user friendly way of closing the popup?
    * use a timeout and fadeout after 2 seconds?
    * use a close image button on the top right corner?
    * click anywhere outside of the message?
    * …?

  • Daniel Stockman (May 23, 2008)

    [quote]The class names are mixed up[/quote]

    Funny how I didn’t notice that, refactoring it and all. Good eyes.

  • Daniel Stockman (May 23, 2008)

    [quote]All of those message boxes could have an additional class of "messageBox" that handles the shared styles (like border thickness, background image positioning, etc.) , then use .info, .error, etc to attach just the unique css attributes.[/quote]

    @Tony: Normally I would agree with you, but in this case (given no other requirements of the message box, style-wise) I think a grouped selector is the clearer, more parsimonious option.

    If there were other messageBoxes that weren’t getting styled with the icons, then perhaps the extra class would make sense (and not smell faintly of class-itis). But then that’d be beyond the scope of this example.

  • Janko (May 23, 2008)

    @Manu, this 10px margin is to make enough white space between this message box and other controls on the form.
    I’d recomment to place close button in the top right corner. It is better to let users have a control over it. If message disappears in some uncommon way, user can be confused, especially if it happens before user read it; and that would be a poor user experience.

  • mark (May 23, 2008)

    Not quite fixed. The colors are opposite now. It seemed only the background image was switched b/w each one.

    @Manu: It depends on what type of application you’re using it for. I just used this code to show error messages when a user submits a form, like for updating profile. It only disappears once they enter all the info in the form correctly and submits it (to make the error popup go and to show the success popup). Then once they leave that page, it disappears entirely.

    There is a margin for formatting reasons. Remove it if you don’t want it.

  • Manu Temmerman-Uyttenbroeck (May 23, 2008)

    Thx for the quick reply. Since you seem to be far better in design then I am, could you maybe post a sample screenshot of how that could look like? Also the icon you’re using for it would be nice ;)

  • Janko (May 23, 2008)

    @Mark, you are right again. That’s what happens when you are doing five things at the same time :) I hope it’s ok now.

    @Tony, for the purpose of this example I tried to keep it simple. Daniel suggested some changes which I applied and now it is as simple as it can be. However, I see your point, and in real-world apps this could be a way to do this.

  • Janko (May 23, 2008)

    @Manu: I’ll write another post on this subject – next post will show how to create asp.net user control that is more complex than those boxes in the example. But if you need it urgently, I could create some sample page for you during the day :)

  • Dragan (May 23, 2008)

    Excellent article, I like it very much. Keep posting, Janko :)

  • mark (May 23, 2008)

    Yup, it’s fine. I now just gotta find good gif icons b/c of the transparency problem in IE6. OR, not make these images as backgrounds, but regular images and use the png fix trick to fix it. OR, forget about IE6 lol.

  • Ramon Bispo (May 23, 2008)

    Great Job, guy!

    Looks good!

    Congrats.

  • ctraos (May 24, 2008)

    exelente !! muchas gracias!!

  • Lee Kelleher (May 25, 2008)

    Good article. I’ve been using a similar approach with my projects, but using different mark-up:

    <div class="message-box"><span class="success">Successful operation message</span></div>

    … but it’s all down to preference. I feel it gives me more control with the CSS.

    Looking forward to seeing your user control example!

  • video script (May 29, 2008)

    Excellent article. Very helpful info to share.

  • fashion freak (May 30, 2008)

    THank, I think I’ll use this on my drupal website.

  • MrMuhKuh (June 1, 2008)

    awesome, love you! <3
    :D

  • Norik (June 2, 2008)

    another alternative:

    .MsgBox {
    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’);
    }

    HTML:

    <div class="MsgBox info">Info message</div>
    <div class="MsgBox success">Successful operation message</div>

  • DailyCoding (June 3, 2008)

    Trackback from DailyCoding.com
    Links – Jun 02, 2008

  • Napolux (June 5, 2008)

    This is fuc*ing awesome dude, thanks a lot!

  • Scriptdaemon (June 13, 2008)

    Do you have a download of the validation icon handy? As the Knob pack doesn’t come with that particular one.

  • Janko (June 13, 2008)

    @Scriptdaemon: I sent you the icon on your email :)

  • Justin Kozuch (June 13, 2008)

    Another alternative, using shorthand, and set fonts to em to make more accessible:

    body{
    font: 0.81em Arial, Helvetica, sans-serif; /* 13px = 0.81em */
    }

    .msgbox {
    border: 1px solid;
    margin: 10px 0;
    padding: 15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    }

    .info {
    color: #00529B;
    background: #bde5f8 url(info.png);
    }

    .success {
    color: #4F8A10;
    background: #dff2bf url(success.png);
    }

    .warning {
    color: #9F6000;
    background: #feefb3 url(warning.png);
    }

    .error {
    color: #D8000C;
    background: #ffbaba url(error.png);
    }

  • Bassie (June 15, 2008)

    this should be standard for every application!

    nice work

  • Jenny (June 15, 2008)

    I’ve done this on my site before. No one liked it though so I got rid of it.

  • T (June 16, 2008)

    [quote]Another alternative, using shorthand, and set fonts to em to make more accessible:
    [/quote]

    when using the shorthand version (ie. background: #ffbaba url(error.png);) the all encompassing declaration (.info, .success, .warning, .error, .validation {}) needs to be after each individual class declaration. this also eliminates the need to use multiple classes as in Justin/Norik’s examples.

  • e devlet (June 17, 2008)

    css background examples , Properties , Attribute – – http://css-lessons.ucoz.com/background-css-examples.htm

  • Pete White (June 17, 2008)

    Great resource thanks

  • calmhuang (June 18, 2008)

    Very nice.
    I fav it.

  • Norman (June 18, 2008)

    Those look quite nice, may use that for my next project.Thanks!

  • opentone (June 19, 2008)

    Very handy tutorial. Thanks!

  • Shawn Adrian (June 22, 2008)

    Really cool post man, original idea and clearly written. I like it.

  • Muhammad Mosa (June 23, 2008)

    I loved this post Janko. Really cool

  • Alfredo Rodrigues Câmara (June 23, 2008)

    Artigo Maravilhoso, muito bem feito e muito bem escrito. Eu poderia também postar minhas observações mas acho que da maneira que foi feito já está ótimo.

    Parabéns.

  • eugene (June 23, 2008)

    nice. One drawback: having the icon as a background image will refrain the user/visitor of having the same experience when printing the page. Usually (by default?) backgrounds are not printed by the browser.

  • darky00 (July 2, 2008)

    Thank you!!! Very nice boxes.

  • jack (July 4, 2008)

    Thanks, very useful!

  • Jeff Justice (July 5, 2008)

    Hmm.. Now this is is a very detailed tutorial. If you combine it with some javascript, you get an excellent way to communicate with visitors.

  • czuk (July 6, 2008)

    Simple, but still very useful!
    Thanks for publishing it.

  • simplir (July 7, 2008)

    Nice guide, will definitely use these in apps I’m building

  • antique (July 8, 2008)

    That’s quite useful. I didn’t know it was that easy to customize a graphical response with CSS.

  • yamaniac (July 17, 2008)

    Good one!!! Keep em coming!!!:)

  • Ivo (July 29, 2008)

    Thanks a lot, great and very usefull… keep it up (H)

  • Romeo (July 29, 2008)

    Finally a .NET developer with a sense of style. :D

  • Shaal (July 29, 2008)

    Keep up the great work, was really useful!

  • ivan (July 30, 2008)

    Odlicno.

    Navistina e dobro pri programiranjeto da se obrnuva vnimanie i na izgledot i na porakata koja treba da se prenese.

    ps. I hope you speak my kanguage :) (Macedonian)

  • Janko (July 30, 2008)

    Ivan, thanks for the comment. I couldn’t say I speak Macedonian, but I understand it ;) I visited Skopje several times and had a great time there!

  • Leiken (August 2, 2008)

    Thanks a lot for the help, Janko!

    I already started using this on my site.

  • Aydin (August 12, 2008)

    very nice :)

  • Email Designer (August 14, 2008)

    Sweet message boxes, I’m working on implementing them right now. Thanks Janko!

  • Eazzy | Web Design (August 20, 2008)

    very nice :) great job!

  • Katy (August 27, 2008)

    Thanks for this – I had been looking for a nice way to display various types of messages back to the user and this has been an invaluable starting point :)

  • busby seo challenge (August 30, 2008)

    thanks for this tips.. i love it

  • kabonfootprin (September 8, 2008)

    I had been looking for a nice way to display various types of messages back to the user and this has been an invaluable starting point Smile. lolz :D

  • free ps3 (September 17, 2008)

    Nice will have to use one of them!

  • ChairNut (September 24, 2008)

    Just developing our new site and have used your message boxes! Absolutely awesome… Thanks for posting it up :P

  • Amr Elsehemy (September 26, 2008)

    This is a very nice post man.
    I will sure use this very very soon

  • Danh ba web 2.0 (October 1, 2008)

    Thanks for tutorial !

  • tom (October 1, 2008)

    great post. it was very informative

  • Website Hosting (October 2, 2008)

    nice guide, i will use that for my next project. thanx!

  • internet fax (October 3, 2008)

    I think all web developers should know this stuff.

  • Vivekanand (October 9, 2008)

    Yes! I would like to recommend all the webby people should know about this and about the standards as well.

  • Goji Juice (October 9, 2008)

    Nice and informative article…

  • Evan (October 17, 2008)

    Anybody that has anything to do wit computers should read this.

  • Mobile PC (October 28, 2008)

    Design of used icons in this case should be familiar to the user.

  • Marv (November 3, 2008)

    I really like the style! Could you also send me the validation icon? Thanks!

  • semenax (November 5, 2008)

    yea the style is great!

  • Free Gifts (November 7, 2008)

    Awesome style, love it so much, cheers mate!

  • Winardi (November 22, 2008)

    Very usefull information. Thanks for sharing.

  • PS3 (December 1, 2008)

    Wicked style mate, thanks!

  • Bugjee (December 3, 2008)

    really nice tips for new css learners

    thanks for this

  • iPods (December 6, 2008)

    Great Design of the message boxes.
    Thanks

  • Tony Oravet (December 9, 2008)

    Great Article! Thanks for the great tuts on creating css based message boxes.

  • Christian (December 11, 2008)

    nice!.. Thanks You

  • Matt (December 17, 2008)

    Mind sending me your notification icon? Mine is a little hacky :)

  • Jannie (December 23, 2008)

    Very nice indeed! If it is OK with you I would like to make use of these message boxes in my own web designs?
    If it is no trouble for you, would you mind passing on the validation icon, please? It seems that it is missing in the knob package.

    Thank you for sharing.

    PS. Merry Christmas

  • Alojaweb (December 26, 2008)

    Excellent, very well what agegare to my favorites, thanks for sharing your knowledge

  • Tuan (January 3, 2009)

    Wow, this is so great, thanks so much!

    Ummm, any chance you could send me that red exclamation point to use for validation messages? I couldn’t find it in that Knob Buttons package. Thanks!

  • XavierDev (January 3, 2009)

    Excelente articulo Janko! Gracias!

  • cuocthiseo (January 6, 2009)

    Great tips, compiling…
    Thank you very much.

  • Mortgage Broker (January 19, 2009)

    Yes, I wish more people would make more use of the CSS message boxes.

  • amine (January 29, 2009)

    Thanks , great post!

  • sbs (February 2, 2009)

    what a impressive article. last days I didn’ t read post like that. I am now your blog’ s follower thanks for this useful blog. I am now your blog’s rss follower.

  • free ps3 (February 7, 2009)

    Excellent post, nice style and thanks for sharing it.

  • WC (February 9, 2009)

    You’ve forgotten about color-blind people. 1 in 12 people are colorblind. To many of them, red and green are the same color. I know that to most people, green means ‘good’, but red meaning ‘bad’ is ever stronger. So I’d pick a different color for the ‘good’ dialog.

    And yes, I notice that the icon is different in your examples, but the idea of the colors is to make the status known at a glance, and colorblind people won’t be able to use that.

  • freelife (February 16, 2009)

    It’s really interesting post.I immediately tried the whole code.it’s working.i hope if you have other such code you will definately share. Thanks for sharing.

  • Samuel Garneau (February 17, 2009)

    I had the same error messages as you but with a little design difference. I can’ live without them :)

  • Electric golf trolleys (February 17, 2009)

    When doing my degree at university, we were told to make reports interesting and active for the reader. Your suggestion of using colours was what i used for different sections. This enabled the viewer to know instinctively and bring attention quickly.

  • free samples (February 20, 2009)

    thanks for the read. still trying to wrap my head around css

  • cornice (February 25, 2009)

    very good aarticle :) \thx

  • web design company (March 4, 2009)

    In respect to Jenny’s post which most seem to have ignored, I think this is a good idea, using colours to represent the type of error and using an icon to indicate the error that happened but the reason it was not liked is probably because the size, border and highlighting seems to be a bit of an overkill to me.

  • gio blog (March 10, 2009)

    This is great validation and helps us understand

  • Jeremy (March 12, 2009)

    Can someone please e-mail me the validation icon? It’s not included in the knob pack. Thanks.

  • Jeff (March 15, 2009)

    Nice job on this.

  • Gareth (March 17, 2009)

    Nice article – good work dude.

  • termi (March 18, 2009)

    very nice article

  • Mike (April 9, 2009)

    One suggestion I have would be use <p> instead of a <div>.

  • barackoli (April 20, 2009)

    excellent post. ..i love the style

  • oolivos (May 22, 2009)

    really usefull
    ty

  • Tom Bevers (June 1, 2009)

    Thanx for these nice message boxes!

  • Cesar (June 4, 2009)

    Excellent Article, very nice styles!

  • Aboo Bolaky (July 29, 2009)

    Simple and concise….I LIKE !

  • Jasmin Halkić (July 30, 2009)

    Awesome!

  • Rodrigo Fante (July 30, 2009)

    Really nice information indeed

  • Lilieks (July 31, 2009)

    Wow, great article. I never really think of that before. Thanks!

  • TuVinhSoft (July 31, 2009)

    Useful article. Now I can make a nice CSS Message Boxes as I expected. Thanks a lot for sharing this useful post.

  • Andi Forex (August 24, 2009)

    Wow, the message-boxes are very cool. Thanks for the article and the help :)

  • Eric Lebetsamer (August 30, 2009)

    Thanks for the great post!

    Does anyone know where I can get the validation icon, or can anyone send it to me?

    Thanks.

  • Dainis Graveris (September 3, 2009)

    wow, simple yet very well explained and beautiful tutorial – thanks!! I knew basics, but also find out few code snippets explained I didn’t know how to use right :)

  • gul (September 9, 2009)

    very useful
    thanks

  • SunJoo (September 14, 2009)

    Just great for applications/ websites all alike.

    Thanks for the great tip.

  • rantanplan (October 9, 2009)

    Thanks for sharing. Very helpful

  • waggi (October 19, 2009)

    Great post.

  • Bjørn (October 20, 2009)

    Hey, great post! Would you mind embedding the validation icon in your sample, or send it to me directly? Thanx :-)

  • Brainpool (January 24, 2010)

    Hey,

    can you send me the validation icon, too. Please!

  • Mike (February 17, 2010)

    Thanks for the article. I love the layout of these message boxes. Very clean!

    If you need the validation icon, you can make it yourself. Download the knob icons and open the blue exclamation point icon in Photoshop. To change the color go to Image > Adjustments > Hue/Saturation… and adjust the hue to your liking. Then just save for web.

    Hope this helps!