Design. Web. Fotografie. Das macht ein Bild.
Gemessen an der laufenden Fassung bildstelle-briefing.reg-26c.workers.dev, in Firefox, bei 2560x1400, 1920x1080, 1440x900 und 390x844. Alle drei Bildschirme (#screen-setup, #screen-interview, #screen-closing).
Nichts davon ist umgesetzt. Das ist eine Mängelliste, keine Änderung.
Es liefen zwei Prüfungen, und sie sind an einer Stelle gegenteiliger Meinung.
Die Layout-Prüfung sagt: die leere Fläche am Desktop ist verschenkt, der Bildschirm wirkt wie eine hochskalierte Handyansicht. Drei Richtungen dafür liegen unter bildstelle-briefing-layout.pages.dev.
Die Gestaltungsprüfung sagt das Gegenteil: die leere Fläche ist nicht das Problem, sondern die Rettung. Ein Erstgespräch verträgt keine Spalten daneben, weil jedes zusätzliche Angebot den Blick von dem einen Feld wegzieht, das gerade zählt. Was fehle, sei nicht Inhalt, sondern Absicht.
Meine Einschätzung: die zweite hat recht, und zwar aus einem messbaren Grund. Drei der Befunde unten (B11, B12, B1) erklären zusammen, warum der Desktop "nicht gut aussieht", und keiner davon hat mit leerer Fläche zu tun. Der Inhalt klebt oben, obwohl die Zentrierregel im Projekt längst existiert. Die Welle hängt an 90 Prozent und verhält sich bei jeder Fensterbreite anders. Und der Kontaktblock liegt auf dem Formular. Wer das behebt, hat den grössten Teil des Eindrucks gewonnen, ohne ein Layout anzufassen.
Vorschlag zur Reihenfolge: zuerst die Fehler, dann noch einmal hinsehen, dann über das Layout entscheiden. Die drei Richtungen laufen nicht weg.
Zwischen 601 und 1023 Pixel Fensterbreite, also auf jedem geteilten Fenster und jedem quer gehaltenen Tablet. .contact-foot steht auf position:fixed, left:28px, die Inhaltsspalte beginnt dort ebenfalls bei x=28. Gemessene Überlappung 104 Pixel: Name, Telefonnummer und Mailadresse stehen direkt über dem Platzhalter von "Thema / Stichwort". Die vorhandene Ausblendregel greift erst bei 600 Pixel.
Behebung: den Block aus der festen Position nehmen und als echte Fusszeile ans Ende setzen. Das löst zugleich B7.
Im Gespräch liegt das Antwortfeld bei sechs Nachrichten 155 Pixel unterhalb des sichtbaren Bereichs, und der Wert wächst mit jeder Nachricht. "Gespräch beenden" liegt bei fünf Nachrichten 441 Pixel darunter. Am Abschluss liegt "Absenden" 102 Pixel darunter, weil der Feedback-Block mit 232 Pixel dazwischensteht.
Behebung: das Antwortfeld unten fixieren, so wie es der Startknopf schon macht, und den Feedback-Block unter den Absendeknopf schieben. Danach steht "Absenden" bei 655 statt 887, also ohne Scrollen im Bild.
.mic-area.compact blendet #mic-status aus. Der Kompaktzustand greift am Handy ab 604 Pixel Verlaufshöhe, und die ist bei vier Nachrichten mit 621 Pixel überschritten.
Ab da unsichtbar: "Ich höre dich", "Sissi denkt nach", "Sissi spricht", und auch "Verbindung weg, stelle automatisch neu her" sowie "Verbindung fehlgeschlagen". Alle 26 Statusmeldungen laufen über dieses eine Element. Verbindungsfehler werden also stumm, genau dann, wenn das Gespräch läuft.
Behebung: nicht ausblenden, sondern verkleinern. Kostet 16 Pixel Höhe.
<div id="mic-orb"> mit Klick-Handler, ohne tabindex, ohne role, ohne Beschriftung. In 20 durchgezählten Tabulatorschritten taucht sie nicht auf. Im Sprechmodus ist das die einzige Handlung.
Dazu der Kontrast im Ruhezustand: Fläche gegen Umgebung 1,08 zu 1, Rand 1,15 zu 1. Für ein Bedienelement wären 3,0 nötig.
Gemessen bei 1440x900: Schritt 1 Logo, Schritt 2 Telefonnummer, Schritt 3 Mailadresse, erst Schritt 4 der erste Modus-Knopf. Ursache ist, dass das <address> im Markup direkt nach der Kopfleiste steht, aber unten links dargestellt wird.
maximum-scale=1 in der Viewport-Angabe. Auf iOS lässt sich die Seite dadurch nicht mit zwei Fingern aufziehen. Ein Zeichenblock zum Streichen.
outline:none entfernt den Standard, Ersatz ist ein grüner Rand mit 1,23 zu 1 gegen die Feldfläche und ein Schatten bei 1,04 zu 1. Nötig wären 3,0. Bei den Knöpfen ist der Standardring dagegen intakt.
Themen-Pillen 32 Pixel, Steuerknöpfe im Gespräch 33, Sterne 27 mal 32. In Ordnung sind Modus-Knöpfe (52), Themenfeld (49), Startknopf (59), Kontaktfelder (49), Absenden (59).
Null <label>-Elemente im ganzen Dokument. Die Feldbezeichnungen sind Überschriften ohne Bezug, die Bedeutung trägt der Platzhalter. Kein aria-live, neue Nachrichten werden also nie angesagt. Positiv: die Sterne haben role="radiogroup", die Pillen setzen aria-pressed.
Sollwert 4,5 zu 1 bei diesen Schriftgrössen. Ursache ist ein einziger Token, --fg-mute.
| Element | Grösse | Ist | Soll |
|---|---|---|---|
| Versionsnummer | 11 px | 2,34 | 4,5 |
| Platzhalter in Feldern | 15 px | 3,40 | 4,5 |
| Rollenzeile "SISSI" / "DU" | 10 px | 3,40 | 4,5 |
| Gruppen-Label ("MODUS") | 11 px | 3,68 | 4,5 |
| Kontaktblock | 12 px | 3,68 | 4,5 |
Bestanden haben Einstiegstext (7,39), Firefox-Hinweis (7,39), Sprech-Hinweis (6,95), Statuszeile (6,83), Sekundärknöpfe (7,39), Beschriftung auf Grün (13,49), Fehlertext (5,75).
Ein Token abdunkeln bringt alle fünf über den Sollwert.
Die Klasse main.warm-centered zentriert den Inhalt senkrecht und wird nur im warmen Pfad gesetzt. Derselbe Bildschirm ist also für Besucher mit warmem Link zentriert und für alle anderen oben angeschlagen.
Gemessen bei 1440x900: der Startknopf endet bei y 902 bei 900 Pixel Fensterhöhe, ist also um zwei Pixel angeschnitten. Bei 2560x1400 nutzt der Inhalt 16,6 Prozent der Fläche, unter dem Knopf bleiben 498 Pixel leer.
background-position:90% 50%. Überlappung mit der Lesespalte, gemessen: bei 390 Pixel über der gesamten Spalte, bei 768 über 591 von 712 Pixeln, bei 1440 über 346 von 760, bei 2560 über null, dort steht sie allein rechts im Nichts.
Dieselbe Seite wirkt dadurch einmal als Text auf gemustertem Grund und einmal als Text neben einer Grafik. Behebung: an die rechte Fensterkante hängen statt an 90 Prozent, am Handy abschalten.
61 Pixel am Desktop, 100 Pixel am Handy, also 11,8 Prozent des ersten Bildschirms, und der einzige umrandete Kasten im ganzen Einstieg, damit optisch ein Warnfeld. Er stellt genau die Voreinstellung in Frage, die das Werkzeug selbst gesetzt hat.
Vorschlag: die Entscheidung treffen statt sie weiterzureichen. Bei erkanntem Firefox "Schreiben" vorauswählen und den Kasten durch eine Zeile ersetzen:
In Firefox bricht die Sprachverbindung gelegentlich ab. Am Handy, in Chrome
und in Edge läuft sie stabil.
B6 Die Voreinstellung "Sprechen" ist nur am Farbton erkennbar. Aktive gegen inaktive Fläche 1,04 zu 1, aktiver gegen inaktiver Rand 1,07 zu 1. Bei Sonnenlicht oder Rot-Grün-Schwäche fällt die Unterscheidung weg. Vorschlag: ein Haken wie bei den Pillen, dazu je eine Zeile Untertext ("Du redest, Sissi antwortet mit Stimme." und "Du tippst, Sissi antwortet als Text.").
B14 Es gibt kein Signal, wie weit man ist. Kein Element im Gesprächsbildschirm enthält eine Fortschrittsangabe. Eine Prozentanzeige passt nicht, weil frei geführt wird. Was passt, wäre eine ruhige Themenspur aus den Kategorien, die die Pillen ohnehin definieren.
B16 Die Wortwahl bricht aus. Der Einstieg heisst "Gespräch starten", der Ausstieg "Interview beenden", der Verlauf "Transcript herunterladen". Drei Textstellen.
B17 Am Handy stehen die zwei Fussknöpfe ausgefranst, 41 Pixel Versatz ohne gemeinsame Kante.
Die Sprechblasen. 684 Pixel am Desktop, 319 am Handy, sauberer Umbruch auch bei langen Wörtern. Der beste Teil der Anwendung.
Die Schrumpf-Logik der Mikrofonbox. Von 325 auf 141 bis 191 Pixel, gesteuert über die Inhaltshöhe statt über die Scrollposition, mit 80 Pixel Hysterese gegen das Zittern. Der Kommentar im Code zeigt, dass der naive Weg schon durchprobiert und verworfen wurde. Nur die Nebenwirkung aus B3 wegnehmen.
Die Ausstiegswege am Abschluss. "Ohne Kontakt beenden" als gleichrangige Alternative und der Rettungsknopf auf der Danke-Ansicht. Unaufdringliche Lösung für die heikelste Stelle im Ablauf.
Sieben Eingriffe, alle klein, alle ohne Layout-Entscheidung:
--fg-mute abdunkeln (B10, fünf Stellen auf einmal)maximum-scale=1 streichen (B9)Danach noch einmal ansehen. Erfahrungsgemäss sieht die Seite dann deutlich anders aus, und die Layout-Frage stellt sich ruhiger.