From e4c6d69ce86242aa854a1fac85a0d51a1246dda2 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Tue, 22 Sep 2026 02:02:46 +0200 Subject: [PATCH] "Wie geht's dir?" -- lesbar und um ein Drittel kuerzer Filipe: "auf der seite von der kategorie wie gehts die, sind die kacheln viel zu hell, man bekommt fast nichts gelesen, die sollen viel kraeftiger und dunkler sein. ich will dass auch alles viel uebersichtlicher ist, es ist alles so lang gezogen, muss ewig scrollen um alles zu sehen." BEIDES GEMESSEN, BEVOR ICH ETWAS ANGEFASST HABE: Kachelgrund rgba(0, 0, 0, .2) -- also 80 % durchsichtig. Die Seite traegt ein helles Buehnenbild (Husky, Hase, viel Licht), und das schien mitten durch den Text. Laenge 2487 px am Rechner, 3431 px am Handy. 3,4 Bildschirme fuer neun Fragen. DIE LESBARKEIT: Die Kacheln sind jetzt deckend -- und nicht schwarz, sondern einen Hauch heller als die Seite, damit sich eine Frage von der naechsten abhebt. Gemessen mit pruef-buehne: schlechtester Kontrast 4.95:1 an 39 gemessenen Stellen (noetig 4.5). DIE LAENGE -- gespart wurde an Weissraum und Wiederholung, NICHT an Text. Die Erklaerung unter jeder Frage ist der Grund, warum man sie ehrlich beantwortet. Vier Knoepfe, eine Reihe. Gemessen waren sie 94 von 214 Pixeln je Frage -- zwei Reihen, also 450 Pixel Scrollweg allein aus Umbruch. Gerechnet: 390 minus 28 Innenabstand minus drei Luecken, geteilt durch vier = 86 px je Knopf. "Kann ich nicht sagen" braucht mehr, "Unklar" nicht. Der LANGE Name bleibt im `aria-label` -- wer hoert statt sieht, bekommt weiterhin den ganzen Satz. Die Marke "jede Runde" steht neben der Frage statt darunter. Sie ist eine Eigenschaft der Frage, keine eigene Zeile. Zwei Spalten am Rechner. Bei 880 px Inhaltsbreite und Fragen, die keine 400 brauchen, halbiert das den Weg, ohne eine Frage zu verstecken. `break-inside: avoid` ist dabei der Kern -- sonst steht die Antwortreihe in der anderen Spalte. ERGEBNIS: Rechner 2487 -> 1770 px, Handy 3431 -> 2781 px. Eine Fragekachel am Handy 228 -> 139 px. Und ein Fehler, den nur das Bildschirmfoto gezeigt hat: Mein erster Anlauf sparte die Kurzform, wenn sie dem Namen gleicht -- bei "Laeuft" ist das so. Am Handy ist die lange Fassung ausgeblendet, und der Knopf zeigte dann nur noch das Haekchen. Geprueft: pruef-befinden 113/0, pruef-resuemee 35/0, pruef-entwicklung 48/0, pruef-buehne fuer diese Seite 10/0. --- server/workspace-entwicklungs-punkte.js | 22 +++- workspace/anruf-probe.html | 8 +- workspace/app.webmanifest | 8 +- workspace/assets/css/entwicklung.css | 166 ++++++++++++++++++++++++ workspace/assets/js/befinden.js | 15 ++- workspace/aufgaben.html | 34 ++--- workspace/automation.html | 30 ++--- workspace/befinden.html | 28 ++-- workspace/bereich.html | 40 +++--- workspace/bewerben.html | 34 ++--- workspace/bewerbungen.html | 32 ++--- workspace/calls.html | 32 ++--- workspace/chat.html | 36 ++--- workspace/content.html | 32 ++--- workspace/crew-index.html | 10 +- workspace/crew.webmanifest | 8 +- workspace/dateien.html | 32 ++--- workspace/entwicklung.html | 28 ++-- workspace/hilfe.html | 26 ++-- workspace/index.html | 8 +- workspace/kalender.html | 32 ++--- workspace/leistung.html | 30 ++--- workspace/personen.html | 30 ++--- workspace/profil.html | 34 ++--- workspace/rechte.html | 28 ++-- workspace/report.html | 32 ++--- workspace/scouting.html | 30 ++--- workspace/start.html | 28 ++-- workspace/startcheck.html | 32 ++--- workspace/steckbrief.html | 34 ++--- workspace/talente.html | 30 ++--- workspace/team.html | 28 ++-- workspace/teamlage.html | 28 ++-- workspace/teilen.html | 26 ++-- workspace/treff-moderation.html | 28 ++-- workspace/treff-regeln.html | 28 ++-- workspace/uebersicht.html | 30 ++--- workspace/unsere-seiten.html | 24 ++-- workspace/werdegang.html | 28 ++-- workspace/willkommen.html | 22 ++-- workspace/wissen.html | 32 ++--- 41 files changed, 718 insertions(+), 525 deletions(-) diff --git a/server/workspace-entwicklungs-punkte.js b/server/workspace-entwicklungs-punkte.js index 435d8a0a..391be059 100644 --- a/server/workspace-entwicklungs-punkte.js +++ b/server/workspace-entwicklungs-punkte.js @@ -121,14 +121,28 @@ export const BEFINDEN_FELDER = [ text: "Ob es sich auf Sicht lohnt." }, ]; +/* `kurz` KAM AM 22.09.2026 DAZU -- fuer schmale Schirme. + --------------------------------------------------------------------- + Gemessen auf einem 390-px-Handy: Die vier Knoepfe brauchten zwei + Reihen, 94 von 214 Pixeln einer Fragekachel. Bei neun Fragen sind + das allein 450 Pixel Scrollweg fuer Weissraum. + + Filipe: "es ist alles so lang gezogen, muss ewig scrollen um alles + zu sehen das ist uncool." + + DER LANGE NAME BLEIBT DIE WAHRHEIT -- er steht am Rechner, im + Vorleseprogramm (`aria-label`) und ueberall dort, wo eine Antwort + spaeter genannt wird. Die Kurzform ist nur die Beschriftung, wenn + der Platz nicht fuer beides reicht. "Unklar" statt "Kann ich nicht + sagen" verkuerzt, ohne etwas anderes zu behaupten. */ export const ENTWICKLUNG_STUFEN = [ - { schluessel: "laeuft", name: "Läuft", zeichen: "✓", + { schluessel: "laeuft", name: "Läuft", kurz: "Läuft", zeichen: "✓", text: "Habe ich gesehen. Passt." }, - { schluessel: "waechst", name: "Wächst gerade", zeichen: "↗", + { schluessel: "waechst", name: "Wächst gerade", kurz: "Wächst", zeichen: "↗", text: "Geht in die richtige Richtung – noch nicht durchgehend." }, - { schluessel: "hakt", name: "Da hakt es", zeichen: "!", + { schluessel: "hakt", name: "Da hakt es", kurz: "Hakt", zeichen: "!", text: "Ist mir aufgefallen. Kein Vorwurf – ein Thema." }, - { schluessel: "unklar", name: "Kann ich nicht sagen", zeichen: "–", + { schluessel: "unklar", name: "Kann ich nicht sagen", kurz: "Unklar", zeichen: "–", text: "Habe ich nicht gesehen. Ehrlicher als zu raten." }, ]; diff --git a/workspace/anruf-probe.html b/workspace/anruf-probe.html index 8c010f1a..588b7a8d 100644 --- a/workspace/anruf-probe.html +++ b/workspace/anruf-probe.html @@ -16,15 +16,15 @@ verdeckt. Gefunden hat es pruef-struktur. Richtig sind `gate.css` (die Farbwerte des Hauses) und `haus.css`. --> - - + + - +