DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

[DZone Research] Observability + Performance: We want to hear your experience and insights. Join us for our annual survey (enter to win $$).

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Elevating Web Design: The Art and Science of CSS Nesting and the Cascade
  • Demystifying the ‘Class’ Attribute in HTML: A Comprehensive Guide With Examples
  • Introduction To Template-Based Email Design With Spring Boot
  • Front-End Development Trends

Trending

  • Agile Estimation: Techniques and Tips for Success
  • Building AI Applications With Java and Gradle
  • Database Monitoring: Key Metrics and Considerations
  • Microfrontends for Quarkus Microservices
  1. DZone
  2. Coding
  3. Languages
  4. CSS Message Boxes for different message types

CSS Message Boxes for different message types

Janko Jovanovic user avatar by
Janko Jovanovic
·
May. 26, 08 · News
Like (0)
Save
Tweet
Share
359.16K Views

Join the DZone community and get the full member experience.

Join For Free

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.

[img_assist|nid=3132|title=|desc=Informational messages|link=none|align=none|width=555|height=69]

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.

[img_assist|nid=3133|title=|desc=Success Messages|link=none|align=none|width=555|height=58]

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

[img_assist|nid=3134|title=|desc=Warning Messages|link=none|align=none|width=555|height=57]

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.

[img_assist|nid=3135|title=|desc=Error Messages|link=none|align=none|width=555|height=62]

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.

[img_assist|nid=3138|title=|desc=Design Layout|link=none|align=none|width=635|height=122]

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.

[img_assist|nid=3139|title=|desc=Validation Errors|link=none|align=none|width=555|height=103]

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:

  • CSS Message Box collection
  • Create a valid CSS alert message
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
CSS

Published at DZone with permission of Janko Jovanovic. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Elevating Web Design: The Art and Science of CSS Nesting and the Cascade
  • Demystifying the ‘Class’ Attribute in HTML: A Comprehensive Guide With Examples
  • Introduction To Template-Based Email Design With Spring Boot
  • Front-End Development Trends

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: