@@hmm > Aktuell Sieht sie so aus: Du hast dir viel Mühe gegeben, die Hinweise aus anderen Threads umzusetzen. \o/ Einiges gibt es noch anzumerken: > ~~~html, bad > <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"> > ~~~ Das wird nichts. Das sind zwei verschiede Angaben, die kannst du nicht in ein `meta`-Element packen. Also trennen: ~~~html <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ~~~ > ~~~html, bad > <label for="login_email">E-Mail-Adresse</label> > <input id="login_email" name="email" type="email" placeholder="max.muster@example.com" required> > <label for="login_password">Passwort</label> > <input name="login_password" type="password" placeholder="geheim" required> > ~~~ Die Platzhirsche – äh -halter sind sinnfrei. Nutzer wissen, wie eine E-Mail-Adresse aussieht und dass ein Passwort geheim ist. [Platzhalter verwirren nur.](https://uxdesign.cc/alternatives-to-placeholder-text-13f430abc56f) Weg damit! > ~~~html, bad > <img src="img/present-307984_1280.png" width="300" height="300" class="bild"> > ~~~ Dem Bild fehlt ein Alternativtext. Sollte die Bildbeschreibung als Bildunterschrift vorhanden sein oder sollte das Bild nur Dekorationszwecken dienen, muss trotzdem das `alt`-Attribut vorhanden sein (mit Leerstring als Wert: `alt=""`); Screenreader lesen andernfalls den Dateinamen vor. Im Fall Dekorationszweck könnte auch ein `role="presentation"` nicht schaden. Allerdings sollte das Bild dann gar nicht im HTML auftauchen, sondern als Hintergrundbild im CSS. Wie dem auch sei, eine Klasse `"bild"` ist auch recht überflüssig. Es ist doch klar, dass es sich bei `img` um ein Bild handelt. > ~~~html, bad > <fieldset> > <legend>Andrede</legend> > <label for="reg_keine">keine Anrede</label> > <input id="reg_keine" name="Anrede" type="radio" value="not" /> > <label for="reg_herr">Herr</label> > <input id="reg_herr" name="Anrede" type="radio" value="m" /> > <label for="reg_frau">Frau</label> > <input id="reg_frau" name="Anrede" type="radio" value="f" /> > </fieldset> > ~~~ Löbliche Erwähnung verdient das `fieldset` um die Gruppe von Radiobuttons. Es ist aber bei Radiobuttons (und Checkboxen) gängige Konvention, dass diese vor dem zugehörigen Label stehen. Weil bei dir dazu auch noch der Abstand zwischen Radiobutton und Label des nächsten Radiobuttons fehlt, würde man denken, wenn man in deinem Formular den ersten Radiobutton anclickt, man hätte „Herr“ gewählt; beim zweiten „Frau“. Also Radiobuttons vor die Labels und Abstand – dann zwischen Label des vorigen Radiobuttons und nächstem Radiobutton. Noch besser dürfte es sein, Radiobuttons untereinander anzuordnen. > ~~~html, bad > <p><label for="reg_gb">Geburtstag</label> > <input id="reg_gb" type="date" id="gebdat"/></p> > ~~~ Hier sollte ein Hinweis angebracht sein, welche Eingabe erwartet wird. Tag, Monat, Jahr? Sicher nicht, sondern Tag und Monat. > ~~~css, bad > header { > display: block; > top:0px; > left:0px; > right:0px; > position:absolute; > padding:0px; > text-align:left; > font-weight:bold; > color:#FAFAFA; > background: #3b5998; > width: 100%; > height: 82px; > z-index:3; > } > ~~~ Absolute Positionierung ist keine gute Idee. `82px` ist eine _magic number_{: @en} – keine gute Idee. Was, wenn „Geschenke Empfehlungsdienst“ nicht in eine Zeile passt? Dann passt es nicht in 82 Pixel. Übrigens sollte zwischen „Geschenke“ und „Empfehlungsdienst“ sicher [kein Deppenleerzeichen](https://de.wikipedia.org/wiki/Leerzeichen_in_Komposita), sondern ein Bindestrich stehen. > 3\. Ich hätte gerne die Beschreibungen der Inputfelder (die labels) in kleiner Schrift über den Inputfeldern, wie mach ich das? Labels oder/und Eingabefelder auf `display: block` setzen. Aber nicht Radiobuttons und Checkboxen sowie deren Labels. > 4\. Ich hätte die elemente der registrieren form gerne tabellarisch untereinander und nicht so chaotisch, wie mach ich das? Hat sich das mit 3\. erledigt? > 5\. aktuell sind in meinem css die beiden float-boxen .bild und .regstrieren links und rechts angeordnet, ich hätte sie aber gerne mittig links und rechts, d.h. beide boxen sollen möglichst nah zusammenstehen. wie mach ich das? Mir ist nicht klar, wie’s aussehen soll. > 6\. habt ihr ideen zur verbesserung des designs? Klar doch. Der Nutzer braucht nur jeweils eins der beiden Formulare. Wenn sie schon registriert ist, braucht sie nur das Login-Formular, andernfalls nur das Registrierungs-Formular. Man könnte die Formulare in [Tabs](http://heydonworks.com/practical_aria_examples/#tab-interface) tun, so dass der Nutzer nur jeweils eins angezeigt bekommt und zwischen ihnen umschalten kann. LLAP 🖖 -- _„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“_ —Johann Wolfgang von Goethe

@@hmm > Aktuell Sieht sie so aus: Du hast dir viel Mühe gegeben, die Hinweise aus anderen Threads umzusetzen. \o/ Einiges gibt es noch anzumerken: > ~~~html, bad > <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"> > ~~~ Das wird nichts. Das sind zwei verschiede Angaben, die kannst du nicht in ein `meta`-Element packen. Also trennen: ~~~html <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ~~~ > ~~~html, bad > <label for="login_email">E-Mail-Adresse</label> > <input id="login_email" name="email" type="email" placeholder="max.muster@example.com" required> > <label for="login_password">Passwort</label> > <input name="login_password" type="password" placeholder="geheim" required> > ~~~ Die Platzhirsche – äh -halter sind sinnfrei. Nutzer wissen, wie eine E-Mail-Adresse aussieht und dass ein Passwort geheim ist. [Platzhalter verwirren nur.](https://uxdesign.cc/alternatives-to-placeholder-text-13f430abc56f) Weg damit! > ~~~html, bad > <img src="img/present-307984_1280.png" width="300" height="300" class="bild"> > ~~~ Dem Bild fehlt ein Alternativtext. Sollte die Bildbeschreibung als Bildunterschrift vorhanden sein oder sollte das Bild nur Dekorationszwecken dienen, muss trotzdem das `alt`-Attribut vorhanden sein (mit Leerstring als Wert: `alt=""`); Screenreader lesen andernfalls den Dateinamen vor. Im Fall Dekorationszweck könnte auch ein `role="presentation"` nicht schaden. Allerdings sollte das Bild dann gar nicht im HTML auftauchen, sondern als Hintergrundbild im CSS. Wie dem auch sei, eine Klasse `"bild"` ist auch recht überflüssig. Es ist doch klar, dass es sich bei `img` um ein Bild handelt. > ~~~html, bad > <fieldset> > <legend>Andrede</legend> > <label for="reg_keine">keine Anrede</label> > <input id="reg_keine" name="Anrede" type="radio" value="not" /> > <label for="reg_herr">Herr</label> > <input id="reg_herr" name="Anrede" type="radio" value="m" /> > <label for="reg_frau">Frau</label> > <input id="reg_frau" name="Anrede" type="radio" value="f" /> > </fieldset> > ~~~ Löbliche Erwähnung verdient das `fieldset` um die Gruppe von Radiobuttons. Es ist aber bei Radiobutton (und Checkboxen) gängige Konvention, dass diese vor dem zugehörigen Label stehen. Weil bei dir dazu auch noch der Abstand zwischen Radiobutton und Label des nächsten Radiobuttons fehlt, würde man denken, wenn man in deinem Formular den ersten Radiobutton anclickt, man hätte „Herr“ gewählt; beim zweiten „Frau“. Also Radiobuttons vor die Labels und Abstand – dann zwischen Label des vorigen Radiobuttons und nächstem Radiobutton. Noch besser dürfte es sein, Radiobuttons untereinander anzuordnen. > ~~~html, bad > <p><label for="reg_gb">Geburtstag</label> > <input id="reg_gb" type="date" id="gebdat"/></p> > ~~~ Hier sollte ein Hinweis angebracht sein, welche Eingabe erwartet wird. Tag, Monat, Jahr? Sicher nicht, sondern Tag und Monat. > ~~~css, bad > header { > display: block; > top:0px; > left:0px; > right:0px; > position:absolute; > padding:0px; > text-align:left; > font-weight:bold; > color:#FAFAFA; > background: #3b5998; > width: 100%; > height: 82px; > z-index:3; > } > ~~~ Absolute Positionierung ist keine gute Idee. `82px` ist eine _magic number_{: @en} – keine gute Idee. Was, wenn „Geschenke Empfehlungsdienst“ nicht in eine Zeile passt? Dann passt es nicht in 82 Pixel. Übrigens sollte zwischen „Geschenke“ und „Empfehlungsdienst“ sicher [kein Deppenleerzeichen](https://de.wikipedia.org/wiki/Leerzeichen_in_Komposita), sondern ein Bindestrich stehen. > 3\. Ich hätte gerne die Beschreibungen der Inputfelder (die labels) in kleiner Schrift über den Inputfeldern, wie mach ich das? Labels oder/und Eingabefelder auf `display: block` setzen. Aber nicht Radiobuttons und Checkboxen sowie deren Labels. > 4\. Ich hätte die elemente der registrieren form gerne tabellarisch untereinander und nicht so chaotisch, wie mach ich das? Hat sich das mit 3\. erledigt? > 5\. aktuell sind in meinem css die beiden float-boxen .bild und .regstrieren links und rechts angeordnet, ich hätte sie aber gerne mittig links und rechts, d.h. beide boxen sollen möglichst nah zusammenstehen. wie mach ich das? Ist mir nicht klar, wie’s aussehen soll. > 6\. habt ihr ideen zur verbesserung des designs? Klar doch. Der Nutzer braucht nur jeweils eins der beiden Formulare. Wenn sie schon registriert ist, braucht sie nur das Login-Formular, andernfalls nur das Registrierungs-Formular. Man könnte die Formulare in [Tabs](http://heydonworks.com/practical_aria_examples/#tab-interface) tun, so dass der Nutzer nur jeweils eins angezeigt bekommt und zwischen ihnen umschalten kann. LLAP 🖖 -- _„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“_ —Johann Wolfgang von Goethe

@@hmm > Aktuell Sieht sie so aus: Du hast dir viel Mühe gegeben, die Hinweise aus anderen Threads umzusetzen. \o/ Einiges gibt es noch anzumerken: > ~~~html, bad > <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"> > ~~~ Das wird nichts. Das sind zwei verschiede Angaben, die kannst du nicht in ein `meta`-Element packen. Also trennen: ~~~html <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ~~~ > ~~~html, bad > <label for="login_email">E-Mail-Adresse</label> > <input id="login_email" name="email" type="email" placeholder="max.muster@example.com" required> > <label for="login_password">Passwort</label> > <input name="login_password" type="password" placeholder="geheim" required> > ~~~ Die Platzhirsche – äh -halter sind sinnfrei. Nutzer wissen, wie eine E-Mail-Adresse aussieht und dass ein Passwort geheim ist. [Platzhalter verwirren nur.](https://uxdesign.cc/alternatives-to-placeholder-text-13f430abc56f) Weg damit! > ~~~html, bad > <img src="img/present-307984_1280.png" width="300" height="300" class="bild"> > ~~~ Dem Bild fehlt ein Alternativtext. Sollte die Bildbeschreibung als Bildunterschrift vorhanden sein oder sollte das Bild nur Dekorationszwecken dienen, muss trotzdem das `alt`-Attribut vorhanden sein (mit Leerstring als Wert: `alt=""`); Screenreader lesen andernfalls den Dateinamen vor. Im Fall Dekorationszweck könnte auch ein `role="presentation"` nicht schaden. Allerdings sollte das Bild dann gar nicht im HTML auftauchen, sondern als Hintergrundbild im CSS. Wie dem auch sei, eine Klasse `"bild"` ist auch recht überflüssig. Es ist doch klar, dass es sich bei `img` um ein Bild handelt. > ~~~html, bad > <fieldset> > <legend>Andrede</legend> > <label for="reg_keine">keine Anrede</label> > <input id="reg_keine" name="Anrede" type="radio" value="not" /> > <label for="reg_herr">Herr</label> > <input id="reg_herr" name="Anrede" type="radio" value="m" /> > <label for="reg_frau">Frau</label> > <input id="reg_frau" name="Anrede" type="radio" value="f" /> > </fieldset> > ~~~ Löbliche Erwähnung verdient das `fieldset` um die Gruppe von Radiobuttons. Es ist aber bei Radiobutton (und Checkboxen) gängige Konvention, dass diese vor dem zugehörigen Label stehen. Weil bei dir dazu auch noch der Abstand zwischen Radiobutton und Label des nächsten Radiobuttons fehlt, würde man denken, wenn man in deinem Formular den ersten Radiobutton anclickt, man hätte „Herr“ gewählt; beim zweiten „Frau“. Also Radiobuttons vor die Labels und Abstand – dann zwischen Label des vorigen Radiobuttons und nächstem Radiobutton. Noch besser dürfte es sein, Radiobuttons untereinander anzuordnen. > ~~~html, bad > <p><label for="reg_gb">Geburtstag</label> > <input id="reg_gb" type="date" id="gebdat"/></p> > ~~~ Hier sollte ein Hinweis angebracht sein, welche Eingabe erwartet wird. Tag, Monat, Jahr? Sicher nicht, sondern Tag und Monat. > ~~~css, bad > header { > display: block; > top:0px; > left:0px; > right:0px; > position:absolute; > padding:0px; > text-align:left; > font-weight:bold; > color:#FAFAFA; > background: #3b5998; > width: 100%; > height: 82px; > z-index:3; > } > ~~~ Absolute Positionierung ist keine gute Idee. `82px` ist eine _magic number_{: @en} – keine gute Idee. Was, wenn „Geschenke Empfehlungsdienst“ nicht in eine Zeile passt? Dann passt es nicht in 82 Pixel. Übrigens sollte zwischen „Geschenke“ und „Empfehlungsdienst“ sicher kein [Deppenleerzeichen](https://de.wikipedia.org/wiki/Leerzeichen_in_Komposita), sondern ein Bindestrich stehen. > 3\. Ich hätte gerne die Beschreibungen der Inputfelder (die labels) in kleiner Schrift über den Inputfeldern, wie mach ich das? Labels oder/und Eingabefelder auf `display: block` setzen. Aber nicht Radiobuttons und Checkboxen sowie deren Labels. > 4\. Ich hätte die elemente der registrieren form gerne tabellarisch untereinander und nicht so chaotisch, wie mach ich das? Hat sich das mit 3\. erledigt? > 5\. aktuell sind in meinem css die beiden float-boxen .bild und .regstrieren links und rechts angeordnet, ich hätte sie aber gerne mittig links und rechts, d.h. beide boxen sollen möglichst nah zusammenstehen. wie mach ich das? Ist mir nicht klar, wie’s aussehen soll. > 6\. habt ihr ideen zur verbesserung des designs? Klar doch. Der Nutzer braucht nur jeweils eins der beiden Formulare. Wenn sie schon registriert ist, brauch sie nur das Login-Formular, andernfalls nur das Registrierungs-Formular. Man könnte die Formulare in [Tabs](http://heydonworks.com/practical_aria_examples/#tab-interface) tun, so dass der Nutzer nur jeweils eins angezeigt bekommt und zwischen ihnen umschalten kann. LLAP 🖖 -- _„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“_ —Johann Wolfgang von Goethe