DogFatherGitandClaude Opus 5
37f1b4a8f5
Der wichtigste Fund: env(safe-area-inset-*) stand bereits im CSS, lieferte aber immer null -- viewport-fit=cover fehlte auf allen dreizehn Seiten. Der Code sah richtig aus und tat nichts. Zusammen mit apple-mobile-web-app-status-bar-style=black-translucent (schon gesetzt) hiess das: installiert lag die Kopfzeile auf einem iPhone hinter Uhr und Akkuanzeige. Behoben: - viewport-fit=cover auf allen 13 Seiten. - Vier Sicherheitsabstaende zentral benannt statt an jeder Stelle einzeln geschrieben. Kopfzeile weicht der Statusleiste, Container dem seitlichen Notch im Querformat, Fusszeile der Gestenleiste. - Der 'Ueberspringen'-Knopf des Vorspanns lag mit bottom:2rem praktisch AUF dem Entsperr-Strich (34px). Man haette die App verlassen statt uebersprungen. - Eigener Zweig fuer den installierten Betrieb: kein Gummiband- Nachfedern (sieht in einer App nach einem Fehler aus), kein Installations-Hinweis. - Die vier Sprungmarken auf der Rechtsseite waren 39px hoch -- fuenf unter dem Daumenmass. Ausgerechnet dort muss man zum Widerrufsrecht springen koennen. - 'Waehle links einen Verlauf aus': Auf dem Handy gibt es kein links, die Liste steht darueber. Richtungswort entfernt. - Sechs Reiter brauchten auf dem Handy drei Zeilen. Jetzt ein Wischstreifen mit Einrasten und Auslauf am Rand; der aktive Reiter wird herangeholt, wenn man ueber eine Kachel springt. - Uebersicht zweispaltig statt zwoelf Zeilen untereinander: 2635px -> 1924px. Eine Uebersicht, an der man vorbeiwischen muss, ist keine. Geprueft mit 55 neuen Handy-Pruefungen auf iPhone 14 Pro, Pixel 7 und 320px Breite, jeweils im Browser und im installierten Zweig. Drei Fehlalarme der eigenen Pruefung wurden begruendet ausgenommen (Honigtopf bei left:-9999px, Eingabefeld in einer Beschriftung, Inline-Link im Fliesstext -- WCAG 2.5.8 nimmt letztere ausdruecklich aus). Zwei Selbstkorrekturen an der Pruefung dokumentiert: Die Emulation von display-mode wirkt nicht (Chromium nimmt den Befehl an und ignoriert ihn) -- ohne das waeren die zwoelf 'installiert'-Zeilen ein zweiter Browser-Durchgang gewesen. Und die Messung gegen die Systemleisten mass zuerst die Kastenkante statt der Inhaltskante und meldete elf korrekte Seiten als fehlerhaft. Eine Selbstpruefung mit einem absichtlich falsch gesetzten Knopf belegt jetzt, dass die Messung echte Fehler findet. Co-Authored-By: Claude Opus 5 <[email protected]>
195 lines
12 KiB
HTML
195 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-i18n-titel="seiten_titel">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<!-- viewport-fit=cover ist die Voraussetzung dafuer, dass env(safe-area-inset-*)
|
|
ueberhaupt einen Wert liefert. Ohne diese Angabe gibt jedes env() null zurueck
|
|
-- die Sicherheitsabstaende im CSS waeren totes Recht. Zusammen mit
|
|
apple-mobile-web-app-status-bar-style=black-translucent (siehe unten) laeuft
|
|
der Inhalt sonst installiert unter Uhr und Akkuanzeige. -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<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=20260823wd20" />
|
|
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd20" />
|
|
<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: rgb(var(--wd-lila-rgb) / .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: rgb(var(--wd-blau-rgb) / .05); border: 1px solid var(--wd-rand);
|
|
border-radius: 10px; 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 & 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 & Ü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/leistungen.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=20260823wd20"></script>
|
|
<script src="/assets/js/wd-core.js?v=20260823wd20"></script>
|
|
</body>
|
|
</html>
|