DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3ca9f0b0cda3fc37c82fd31d4a0c30e1aa4568d6
dogfather-universe/webdesign/ablauf.html
T
DogFatherGitandClaude Opus 5 3ca9f0b0cd Gestaltung: WCAG-Messung ueber alle Seiten, alle Befunde behoben 
"Sieht gut aus" ist Geschmack und laesst sich nicht pruefen. Handwerkliche
Qualitaet laesst sich pruefen -- und bei einer WEBDESIGN-Seite ist sie
zugleich das Verkaufsargument: Wer selbst schludert, kann schlecht
Sorgfalt verkaufen.

Neues Werkzeug pruef-design.mjs misst 13 Seiten x 5 Sprachen auf
Handy-Breite gegen WCAG 2.2 AA -- denselben Standard, auf den auch das
Barrierefreiheitsstaerkungsgesetz verweist. Der Browser rechnet, es wird
nichts geschaetzt.

ERGEBNIS: 0 Befunde. Kontrast, Klickflaechen, Tastaturfokus,
Ueberschriftenstruktur, Bildalternativen, Feldbeschriftungen,
lang-Attribut, Schriftgroessen.

ECHTE BEFUNDE, DIE BEHOBEN WURDEN

1. 23 Schriftgroessen unter 12px (bis hinunter zu 10,9px), verteilt ueber
   CSS und sieben Seiten. Betroffen waren durchweg gesperrte
   Grossbuchstaben-Beschriftungen -- also genau die Textsorte, die klein
   ohnehin am schlechtesten lesbar ist. Alle auf mindestens 12px, die
   gesperrten auf 12,8px. Das ist zugleich die Dauervorgabe
   "augenschonend" ernst genommen.

2. Ueberschriftensprung h2 -> h4 in der Fusszeile, auf ALLEN 13 Seiten in
   allen 5 Sprachen (42 Stellen). Wer sich mit einem Screenreader durch
   die Ueberschriften bewegt, hoert dadurch eine Gliederung, die es nicht
   gibt, und vermutet uebersprungene Abschnitte. Jetzt h2 mit
   Gestaltungsklasse: Die Ebene sagt etwas ueber die STRUKTUR, die
   Groesse ueber die GEWICHTUNG -- zwei verschiedene Dinge.

3. code-Auszeichnung auf der Rechtsseite rutschte durch relative
   Groessenangabe auf 11,2px. Jetzt mit Untergrenze abgesichert.

SECHS FEHLALARME IM WERKZEUG -- ALLE GEFUNDEN UND BESEITIGT

Der erste Lauf meldete 302 Fundstellen. Fast alle waren falsch. Haette
ich sie "repariert", haette ich funktionierende Gestaltung zerstoert.
Jeder Fehlalarm hatte eine eigene, nicht offensichtliche Ursache:

  * Farbverlaeufe: getComputedStyle().backgroundColor liefert bei einer
    reinen Verlaufsflaeche "rgba(0,0,0,0)". Die Suche lief an der hellen
    Knopfflaeche VORBEI bis zum dunklen Seitengrund und verglich dunkle
    Schrift mit dunklem Grund -- Ergebnis 1:1 fuer 60 einwandfreie
    Knoepfe. Jetzt werden die Farbstopps ausgelesen und der
    unguenstigste Fall gerechnet.

  * MEHRERE Hintergrundebenen: Die Karten nutzen den bekannten Kniff
    "Flaeche padding-box, Rahmenverlauf border-box". Der helle
    Rahmenverlauf ist im Textbereich gar nicht sichtbar. Alle Ebenen
    zusammenzurechnen ergab 820 Meldungen mit Werten wie "3,45:1" fuer
    Text, der in Wahrheit ueber 7:1 liegt. CSS malt die ERSTE Ebene oben
    -- nur die zaehlt. Das Trennen an Kommas muss dabei die Kommas
    INNERHALB der Verlaufsklammern respektieren.

  * Verlaufsschrift (background-clip:text): Dort ist die Schriftfarbe
    durchsichtig und der Verlauf IST der Text. Farbe gegen Hintergrund zu
    vergleichen ergibt zwangslaeufig 1:1.

  * Verlaufsstopps mit wenig Deckkraft (9 % und 4 % Gold in den
    Hinweiskaesten) wurden verworfen statt auf den Untergrund gerechnet.
    Uebrig blieb "nicht messbar" fuer 72 Textstellen. Ein Pruefwerkzeug,
    das bei allem passt, prueft nichts.

  * Laufende Ueberblendungen: getComputedStyle liefert waehrend einer
    Ueberblendung den ZWISCHENWERT. Nach blur() verblasst der Fokusring
    ueber 0,16 s -- misst man sofort, sieht man ihn noch, und "vorher"
    ist identisch mit "nachher". Das Codefeld der Verwaltung wurde
    dadurch als "ohne sichtbaren Fokus" gemeldet. Nachgewiesen mit
    el.matches(":focus") === false bei gleichzeitig sichtbarem Schatten.
    Loesung: Ueberblendungen fuer die Messung abschalten.

  * Ausgeblendete Abschnitte: Eine Ueberschrift in einem versteckten
    Bereich hat selbst weiterhin display:block. Im Portal wurden dadurch
    drei h1 gezaehlt, obwohl immer nur eine sichtbar ist. Jetzt
    getClientRects().

Dazu zwei bekannte Muster, die das Werkzeug jetzt kennt: der Sprunglink
(absichtlich aus dem Bild geschoben) und die winzigen Auswahlfelder
hinter den Kacheln (die Kachel IST die Klickflaeche).

ALLE UEBRIGEN PRUEFUNGEN WEITERHIN GRUEN nach den Aenderungen:
Anfragedetail 20, Verwaltung 69, Portal 32, Widerruf 58, Textkodierung
55 Seiten-Sprach-Kombinationen.

Versionsstempel und Cache-Name auf v8.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-23 12:49:29 +02:00

190 lines
11 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="de" data-i18n-titel="seiten_titel">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ablauf — Dogfather Webdesign</title>
<meta name="description" content="Von der Anfrage bis zur Übergabe: sieben Schritte, jeweils mit dem, was du machst, was ich mache und was am Ende dabei herauskommt." />
<meta name="robots" content="noindex, nofollow, noarchive" />
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
<meta name="theme-color" content="#05070b" />
<link rel="manifest" href="/webdesign/app.webmanifest" />
<link rel="apple-touch-icon" href="/assets/img/wd-app-180.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd8" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
<style>
/* Zeitstrahl: die Linie verbindet die Nummernkreise. Sie liegt hinter
den Kreisen (z-index) und endet beim letzten Schritt, damit sie nicht
ins Leere weiterläuft. */
.abl-strahl { position: relative; }
.abl-strahl::before {
content: "";
position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px;
background: linear-gradient(180deg, var(--wd-blau-tief), var(--wd-lila-tief));
opacity: .35;
}
@media (max-width: 640px) { .abl-strahl::before { display: none; } }
.abl-schritt { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 1.2rem; margin-bottom: 1.1rem; }
@media (max-width: 640px) { .abl-schritt { grid-template-columns: 1fr; gap: .7rem; } }
.abl-nr {
position: relative; z-index: 1;
width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
color: var(--wd-blau); background: #0b1320;
border: 2px solid var(--wd-rand-stark);
font-variant-numeric: tabular-nums;
}
.abl-schritt--lila .abl-nr { color: var(--wd-lila); border-color: rgba(183,157,255,.4); }
@media (max-width: 640px) { .abl-nr { width: 40px; height: 40px; font-size: 1rem; } }
.abl-karte h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-bottom: .9em; }
.abl-rollen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 820px) { .abl-rollen { grid-template-columns: 1fr; gap: .8rem; } }
.abl-rolle h3 { font-size: 0.8rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .35em; color: var(--wd-blau); }
.abl-schritt--lila .abl-rolle h3 { color: var(--wd-lila); }
/* Die dritte Spalte ist das Ergebnis — bekommt einen leichten Rahmen,
damit sie sich von "wer macht was" abhebt. */
.abl-rolle--erg {
background: rgba(127,208,232,.05); border: 1px solid var(--wd-rand);
border-radius: 12px; padding: .8rem .9rem; margin: -.8rem -.9rem;
}
.abl-rolle p { margin: 0; font-size: .98rem; }
</style>
</head>
<body class="wd">
<div id="wd-kopf"></div>
<main id="wd-inhalt">
<section class="wd-abschnitt wd-abschnitt--eng" style="padding-top:clamp(2.4rem,6vw,4rem)">
<div class="wd-container">
<span class="wd-eyebrow" data-i18n="ab_eyebrow">Ablauf</span>
<h1 data-i18n="ab_h1">Sieben Schritte, keine Überraschungen</h1>
<p class="wd-lead" style="max-width:72ch" data-i18n="ab_lead">Jeder Schritt endet mit etwas, das du sehen und prüfen kannst. Du weißt jederzeit, wo dein Projekt steht und was als Nächstes von wem gebraucht wird.</p>
</div>
</section>
<section class="wd-abschnitt" style="padding-top:0">
<div class="wd-container">
<div class="abl-strahl">
<div class="abl-schritt wd-auf">
<span class="abl-nr" aria-hidden="true">01</span>
<div class="wd-karte abl-karte">
<h2 data-i18n="s1_h2">Anfrage</h2>
<div class="abl-rollen">
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s1_du">Formular ausfüllen — Ziel, Umfang, Budgetrahmen, Wunschtermin.</p></div>
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s1_ich">Anfrage prüfen und innerhalb weniger Tage melden.</p></div>
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s1_erg">Eine Bestätigung mit Zusammenfassung dessen, was du angegeben hast.</p></div>
</div>
</div>
</div>
<div class="abl-schritt abl-schritt--lila wd-auf">
<span class="abl-nr" aria-hidden="true">02</span>
<div class="wd-karte wd-karte--lila abl-karte">
<h2 data-i18n="s2_h2">Briefing</h2>
<div class="abl-rollen">
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s2_du">Fragen beantworten und sagen, was du schon an Texten, Bildern und Logo hast.</p></div>
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s2_ich">Nachfragen, wo etwas unklar ist — lieber jetzt als mitten im Bau.</p></div>
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s2_erg">Ein gemeinsames Bild davon, was die Seite können muss.</p></div>
</div>
</div>
</div>
<div class="abl-schritt wd-auf">
<span class="abl-nr" aria-hidden="true">03</span>
<div class="wd-karte abl-karte">
<h2 data-i18n="s3_h2">Angebot &amp; Anzahlung</h2>
<div class="abl-rollen">
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s3_du">Angebot lesen, Fragen stellen, annehmen oder ablehnen — und bei Annahme die 30 % überweisen.</p></div>
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s3_ich">Preis, Umfang, Zeitrahmen und alles, was extra kostet, schriftlich festhalten.</p></div>
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s3_erg">Ein reservierter Starttermin. Vorher wird kein Zeitfenster blockiert.</p></div>
</div>
</div>
</div>
<div class="abl-schritt abl-schritt--lila wd-auf">
<span class="abl-nr" aria-hidden="true">04</span>
<div class="wd-karte wd-karte--lila abl-karte">
<h2 data-i18n="s4_h2">Design</h2>
<div class="abl-rollen">
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s4_du">Entwurf ansehen und Rückmeldung geben — am besten gesammelt statt in vielen einzelnen Nachrichten.</p></div>
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s4_ich">Aufbau, Farben und Schriften entwerfen — und dir Handy- und Computeransicht zeigen, nicht nur eine davon.</p></div>
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s4_erg">Ein freigegebener Entwurf. Erst danach wird gebaut.</p></div>
</div>
</div>
</div>
<div class="abl-schritt wd-auf">
<span class="abl-nr" aria-hidden="true">05</span>
<div class="wd-karte abl-karte">
<h2 data-i18n="s5_h2">Entwicklung</h2>
<div class="abl-rollen">
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s5_du">Fehlende Inhalte nachliefern, falls noch welche offen sind.</p></div>
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s5_ich">Die Seite bauen — mit den echten Inhalten, nicht mit Blindtext.</p></div>
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s5_erg">Eine benutzbare Seite auf einer Vorschauadresse, die nur du und ich kennen.</p></div>
</div>
</div>
</div>
<div class="abl-schritt abl-schritt--lila wd-auf">
<span class="abl-nr" aria-hidden="true">06</span>
<div class="wd-karte wd-karte--lila abl-karte">
<h2 data-i18n="s6_h2">Tests</h2>
<div class="abl-rollen">
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s6_du">Selbst durchklicken — besonders auf deinem eigenen Handy.</p></div>
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s6_ich">Jedes Formular, jeden Link und jeden Fehlerfall durchspielen, auf Handy, Tablet und Computer.</p></div>
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s6_erg">Eine Liste dessen, was geprüft wurde — und was bewusst nicht enthalten ist.</p></div>
</div>
</div>
</div>
<div class="abl-schritt wd-auf">
<span class="abl-nr" aria-hidden="true">07</span>
<div class="wd-karte abl-karte">
<h2 data-i18n="s7_h2">Freigabe &amp; Übergabe</h2>
<div class="abl-rollen">
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s7_du">Ausdrücklich freigeben und den Restbetrag begleichen.</p></div>
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s7_ich">Live schalten, dich einweisen und die Zugänge übergeben.</p></div>
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s7_erg">Deine Seite, deine Zugänge, deine Nutzungsrechte. Betreuung ist optional, kein Zwang.</p></div>
</div>
</div>
</div>
</div>
<div class="wd-hinweis wd-auf" style="margin-top:1.6rem">
<p class="wd-hinweis-titel" data-i18n="ab_wichtig_titel">Keine Veröffentlichung ohne deine Freigabe</p>
<p data-i18n="ab_wichtig_text">Die Seite geht ausschließlich dann online, wenn du das ausdrücklich sagst. Das gilt auch für die Aufnahme ins Portfolio — beides ist getrennt und beides brauchst du nicht zu erlauben.</p>
</div>
</div>
</section>
<section class="wd-abschnitt wd-abschnitt--gehoben">
<div class="wd-container wd-container--schmal">
<h2 class="wd-auf" data-i18n="ab_dauer_h2">Wie lange dauert das insgesamt?</h2>
<p class="wd-lead wd-auf" data-i18n="ab_dauer_p">Die Zeitrahmen auf der Preisseite gelten ab dem Eingang der Anzahlung — nicht ab der ersten Nachricht. Der häufigste Grund für Verzögerungen ist nicht die Technik, sondern dass Texte oder Bilder noch fehlen. Deshalb wird im Formular gleich danach gefragt.</p>
<div class="wd-btn-reihe">
<a class="wd-btn wd-btn--haupt" href="/webdesign/anfrage.html" data-i18n="nav_anfrage">Projekt anfragen</a>
<a class="wd-btn wd-btn--zweit" href="/webdesign/preise.html" data-i18n="ab_zu_preise">Zu den Zeitrahmen</a>
</div>
</div>
</section>
</main>
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-ablauf.js?v=20260823wd8"></script>
<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink