Styling Kommentarfeld

[springers54]

https://reiki-lernen.de/ausbildungskosten/

• [x] Kommentarfeld mit leichtgrauem Hintergrund wie Beiträge rechts
• [x] Wort Kommentar in Dein Kommentar ändern und in das Feld ziehen.

Auf der alten Seite sah das so aus:

Ausgeloggt kann ich es nur zeigen, wenn ich die Seite mal kurzzeitig scharf schalte.

[joergsteinhauer]

Die Labels zu den Eingabefeldern würde ich so lassen - also oberhalb des Eingabefeldes - DENN - so wie es im alten System gemacht ist, ist es nicht HTML-Valide bzw. nicht konform. Ein Eingabefeld braucht einen Label. Im alten System fehlt dieser komplett, was ziemlich schlecht ist (google SEO recommendation).

Ich würde also das Label so lassen. Ggf. visuell anpassen, aber nicht entfernen.

Was stört dich denn daran genau?

[springers54]

Also hier stimme ich dir nicht zu und das möchten wir geändert haben.

Bei den Kontaktformularen Lehrer haben wir das auch innen.

Was stört dich denn daran genau?

der verschenkte Platz, die störende Dopplung der Zeile mit dem Wort Kommentar.

Hast du dir das mal angesehen, wenn du nicht eingeloggt bist? Also kurz mal den Coming soon Modus aus schalten:

Das sieht hier leider doch etwas besser aus, vielleicht kannst du es in diese Richtung bringen.

[joergsteinhauer]

Zum label:

Es ist kein Scherz oder Geschmackssache, wenn ich sage, dass ein Label wichtig ist: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#The_%3Clabel%3E_element

Zitate:

Label [...] is the most important element if you want to build accessible forms — when implemented properly, screenreaders will speak a form element's label along with any related instructions

If the label isn't set up correctly, a screenreader will only read out something like "Edit text blank", which isn't very helpful at all.

Also bevor ich es so fehlerhaft wie im alten System umsetze, gebe ich hier zum Nachdenken mit :-) Denn Design sollte nie wichtiger als Funktion sein. Wir wären heir wieder bei einem der vielen Leitsätzen: https://de.wikipedia.org/wiki/Form_follows_function

Dopplung des Wortes "Kommentar" kann man leicht umgehen. Platz wird hier nicht verschenkt, sondern gezielt sinnvoll genutzt.

Also überlegt es euch nochmal, vlt. sind die Argumente wichtig.

Anordnung der Elemente

Ich sehe jetzt, im alten System ist die Reihenfolge der Elemente anders - ich habe geschaut, schnell ist es nicht gemacht, wird mehr Zeit in Anspruch nehmen. Falls hier Probleme entstehen, melde ich mich.

[springers54]

Ich glaube, wir verstehen uns hier nicht wirklich. Das Label ist ja da, nur ist es nicht oberhalb des Feldes, sondern im Feld angezeigt. Nach deiner Definition müsste hier auch als Label stehen: Bitte geben Sie einen Suchbegriff ein.

Es sieht jeder, dass es ein Formular ist. Es steht da, was dort rein soll, ob nun darüber oder darunter. Es gefällt uns vom Design besser Du kannst jetzt argumentieren, aber beim Reinklicken sieht man dann nicht mehr, was man ausfüllen sollte. Ja, aber es gibt auch Felder, so das Label, das intern ist, weiterhin sichtbar ist. Wobei ich davon ausgehe, dass jemand, der in ein Feld klickt, wo die Mailadresse ausgefüllt werden soll, es sich in dem Moment auch merken kann und da keine Telefonnummer schreibt.

[springers54]

Selbst große Banken machen das nicht anders:

[joergsteinhauer]

Nochmal zur Erklärung:

Das Label, was du meinst, nennt man Placeholder. Das ist ein Attribut eines Eingabefeldes, welches visuell Verschwindet, wenn man rein klickt. Ein LABEL dagegen ist ein extra HTML-tag, welches mit einem Eingabefeld verknüpft ist und einige relativ wichtige Funktionen übernimmt, vor allem aus der Sicht des Barrierefreien Internets. Nun ist ein Label nicht zwingend notwendig, aber fördert dann doch einen positiven Impact bei Suchmaschinen - und vor allem bei behinderten Menschen, die sowas wie Screenreader verwenden.

Googles Startseite selbst hat tatsächlich keinen label, aber ist in dem Fall wohl egal - Google wird sich selbst kaum abstrafen UND vor allem hat die Startseite nur ein Eingabefeld, welches zudem noch sofort fokussiert wird - hier wird der behinderte User nicht viel rumsuchen müssen, denn die Aufgabe einer Suchmaschine ist klar - der User weiß sofort, was passiert, wo er ist und was er machen soll.

Postbank macht es etwas anders - da sind Label drin im HTML, aber ausgeblendet. Zusätzlich dann noch der Placeholder. Ob das so gut ist, muss ich noch etwas nachforschen ... will da aber nicht zu viel unnötigen Aufwand betreiben. Solchen Ansatz könnten wir auch machen. Aber auch hier - nur weil es eine große Bank macht, heißt es nicht, dass sie das korrekt macht.

Vlt. war deine Aussage "Wort Kommentar in Dein Kommentar ändern und in das Feld ziehen." war für mich etwas verwirrend, d.h. ja an sich - Label entfernen und dafür nur Placeholder einsetzen - was eben nicht optimal ist.

---

Warum erzähle ich das hier? Ich glaube, euch ist/war die Aufgabe eines Labels nicht klar. Da es aber relativ wichtig ist, wollte ich es euch nah bringen. Wenn euch Barrierefreies Internet unwichtig ist, dann machen wir ohne bzw. mit verstecktem Label weiter.

---

Aufgaben sind klar:

• [x] Placeholder einsetzen
• [x] Label visuell verstecken

[joergsteinhauer]

Zusatz:

was ist mit anderen Formularen? z.b. Kontakt-Seite - da sind die Labels zu sehen, sowohl im alten als auch im neuen System

[springers54]

Die anderen Formulare liegen in unserer Hand, weil wir es da selbst entscheiden können. Bei den Kontaktformularen der Lehrerseiten sind die Texte inline, beim normalen Kontaktformular sind sie als Label. Das finde ich auch in Ordnung so. Wir haben im normalen Kontaktformular Platz und es geht hier nur darum.

Bei den Lehrerseiten ist das Formular ein Zusatz, hier wird an Platz gespart. Also alles gut hier. So sieht es jetzt aus: Könntest du die Deine E-Mail-Adresse,... bitte auch etwas kleiner machen, also von 16 auf 14px und in Klammern setzen?

[joergsteinhauer]

Hab jetzt alle Kommentar-Notiztexte verkleinert (ich vermute das sind Zusatz-Testblöcke bei allen Kommentaren - könnten also auch andere Inhalte haben). Und u.a. aus diesem Grund macht es wenig Sinn, hier noch Klammern drumrum zu setzen. Würde ich es global machen, würden alle Notiztexte die Klammern haben. Oder ich müsste irgendwie einen enormen Aufwand nur für einen bestimmten Fall machen. Ich denke das ist es nicht wert. Im alten System gibts doch auch keine Klammern? Können wir auf die nicht auch hier verzichten?

[springers54]

Im Moment sieht es o aus: Es hat sich nichts verändert, Das Kommentarfeld ist immer noch zu groß, ebenso die -Schriften der Label in den Feldern. Was meinst du mit Klammern? Ich verstehe das im Moment nicht.

Kannst du bite shreiben: Dein Kommentar?

Das Du ist auf sämtlicheen Seiten die übliche Anrede

[joergsteinhauer]

Doch, es hat sich verändert. Die Schriftgröße war schon von 16px auf 14px geändert. Habe es nochmal auf 12px verkleinert.

---

Schriftgröße der Placeholder ebenfalls auf 14px verkleinert, man muss es ja noch lesen können.

---

Dein Kommentar auch angepasst.

---

Zu Klammern: Du hast doch selber das hier geschrieben:

Könntest du die Deine E-Mail-Adresse,... bitte auch etwas kleiner machen, also von 16 auf 14px und in Klammern setzen

Was meinst du also damit?

[joergsteinhauer]

Nachtrag: durch die Verkleinerung der Buttongröße habe ich die Größen der Eingabefelder komplett übersehen.

Diese sind nun nicht mehr gleich hoch wie die Buttons und verursachen daher an anderen stellen Probleme.

Hier ein Beispiel, wie es z.z. der Fall ist:

Weitere Folgen: die Suche ist ebenfalls zerschossen:

Die Lösung ist, die Größen der Eingabefelder gleich zu machen:

1. Eingabefelder kleiner machen
2. Buttons größer machen
3. Eingabefelder etwas kleiner UND Buttons etwas größer machen

Was wäre besser?

[springers54]

Ich würde 1 wählen und die Felder an die Größe der Button anpassen

[joergsteinhauer]

Ok, dann eben so - habe die Größe (wobei hier die Schriftgrößen gemeint ist) der Eingabefelder an die der Buttons angeglichen.

[springers54]

Kannst du bitte das Kommentarfeld vor die Kommentare setzen? Gerade bei Seiten mit vielen Kommentaren ist es sonst nicht mehr zu entdecken. Siehe: https://zen-reiki.de/internetschule/umfrage/

[joergsteinhauer]

Erledigt

[springers54]

super, danke