X

Hallo! neu hier? Dann abboniere doch den RSS feed, um immer auf dem aktuellsten Stand bleibst.

Powered by WP Greet Box WordPress Plugin

Den Benutzer über durchgeführte Aktion eine Rückmeldung geben, ist besonders wichtig für eine gute Bedienbarkeit der Webpräsenz. Um diese Informationen zu transportieren bieten sich kleine Statusboxen an.  Um diese Statusboxen optisch und inhaltlich hervorzuheben, bietet sich die Verwendung der Signalfarben rot, gelb und grün an.  Für neutrale Statusmeldungen kann blau verwendet werden.

Um sich die Arbeit so einfach wie möglich zu machen, sollte man für vier CSS – Klassen in sein Stylesheet einfügen, die solch eine Statusbox in der entsprechenden Farbe formatieren. Folgende Klassennamen eignen sich gut, da sie ebenfalls die Funktion dieser Klasse beschreiben:

.fehler, .warnung, .erfolg, .info

CSS-Klasse: .fehler

1
2
3
4
5
6
7

.fehler {
  background: #feb296;
  border: 1px solid #FF4400;
  color: #fd3f05;
  font-weight: bold;
  padding: 5px 10px;
}

FEHLER! Das Löschen des Eintrags ist fehlgeschlagen

CSS-Klasse: .warnung

1
2
3
4
5
6
7

.warnung {
  background: #fbcd97;
  border: 1px solid #FF6600;
  color: #FF6600;
  font-weight: bold;
  padding: 5px 10px;
}

WARNUNG: Der Beitrag wurde gespeichert, aber es sind noch nicht alle Felder gefüllt.

CSS-Klasse: .erfolg

1
2
3
4
5
6
7

 .erfolg {
  background: #b4fcb4;
  border: 1px solid #009900;
  color: #009900;
  font-weight: bold;
  padding: 5px 10px;
}

Daten wurden erfolgreich gespeichert

CSS-Klasse: .info

1
2
3
4
5
6
7

.info {
  background: #bbc9fe;
  border: 1px solid #0033FF;
  color: #0033FF;
  font-weight: bold;
  padding: 5px 10px;
}

Die Daten können erst gelöscht werden, wenn alle keine verknüpften Daten mehr vorhanden sind.

Mit dieser Art der Statusdarstellung wird durch die jeweilige Farbe schon ein gewisser Grad der Priorität dieser Meldung übermittelt. Man kann sofort auf den ersten Blick erfassen, ob es eine kritische Meldung ist oder doch mehr ein Hinweis.

Ähnliche Beiträge:

• CSS: externe Links kennzeichnen
• Der Kampf gegen den IE6