Website und Landingpages

Die Website verkauft keine Funktionen, sondern beantwortet Misstrauen. Wer sie öffnet, fragt sich drei Dinge, in dieser Reihenfolge: Verstehe ich in fünf Sekunden, was das ist? Glaube ich, dass es uns hilft? Traue ich denen meine Familie an?

Darum ist die Seite genau so gebaut: Klarheit → Beweis → Vertrauen → Handlung. Quelle für jeden Satz ist docs/24-homepage.md, für die Technik docs/23-website.md.

Vier Regeln über allem

1. Prototypisch im Aufbau, eigen in Stimme und Bild. Hero, Problem, Ablauf, Beweis, Vertrauen, Preis, Fragen, Aufruf. Was erwartbar aussieht, wirkt seriös. Originell sind Sprache und Zeichnung, nie die Struktur.
2. Zeigen, nicht behaupten. Das echte Wochenboard mit Offenem überzeugt mehr als jede Aussage über Übersicht.
3. Vertrauen durch Grenzen, nicht durch Siegel. Kein Schloss, kein Prüfzeichen. Fünf Zusagen, die man nachprüfen kann.
4. Ein Ziel je Bildschirm, ein Verb je Knopf, ein Feld je Formular. Jedes Feld mehr kostet Einträge.

Der Hero

Der erste Bildschirm sagt, was Albert ist, und zeigt es. Auf dem Tisch steht der Text links, das Bild rechts. Auf dem Handy steht der Text oben, und der Knopf ist ohne Scrollen sichtbar.

• Überschrift: „Hey Albert. Er kümmert sich. Ihr dürft Familie sein.“
• Erklärzeile: eine Szene, keine Definition. Termine, Fahrten, Essen, Hausaufgaben, Verträge, Fristen.
• Ein Feld, ein Knopf: „Testfamilie werden“. Nach dem Start: „Im App Store laden“.
• Vertrauenszeile, klein: Geräte · Daten in Frankfurt · Albert liest nur, was ihr ihm gebt.
• Bildunterschrift: Familie Sonntag ist unsere Beispielfamilie.

Die vierzehn Sektionen

Die Temperatur wechselt bewusst: warm, ruhig, nüchtern, wieder warm. Register Erzähler für Überschriften und Fließtext, Sachbearbeiter für Vertrauen, Preis und Fragen. Nie mischen.

Albert als Figur erscheint dreimal: klein im Hero, beim Schritt „Sagen“, im Kinderbereich. Nie bei Preis, Fragen und Vertrauen.

Wortbudget

{
  "satzlaenge_max": 18,
  "anteil_ueber_15_max": 0.08,
  "silben_je_wort_max": 1.7,
  "wortteil_zeichen_max": 14,
  "wstf4_kinder_max": 5,
  "wstf4_erwachsene_max": 9,
  "homepage": {
    "hero_woerter_max": 40,
    "sektion_woerter_max": 90,
    "seite_woerter": [
      600,
      800
    ]
  }
}

Die Lesestufe liegt bei Klasse 5 bis 7. Die Seite wird um 22:40 am Handy gelesen. Jede Sektion enthält etwas Konkretes: einen Namen, eine Uhrzeit, einen Betrag oder einen Gegenstand. „Freitag, 18:40“ schlägt „offene Termine“.

Das Budget je Sektion nach docs/24 §8: Hero unter 50 Wörtern, jede Sektion unter 90, die Sektionen 5 und 12 unter 200.

Knöpfe nennen die Folge

Ein Knopf sagt, was danach passiert. Er ist einzeilig und hat ein Verb.

Anrede

Auf der Website sind mindestens zwei Erwachsene gemeint. Deshalb gilt ihr, durchgehend. Nicht „du“ und nie „Sie“. In anderen Sprachen gilt die Form für die Familie: you, vosotros, vous, voi, siz.

Bild

Das Produkt ist das Motiv. Echte Screens von Familie Sonntag auf flachen Gerätrahmen, ohne Glanz, ohne Perspektive, angeschnitten statt dreidimensional.

Die Personenfarben aus dem Designsystem sind auch die Farben der Kampagne. Wer Anna kennt, erkennt ihr Mint wieder. Mehr im Kapitel Bildsprache.

Handy zuerst

79 % der Besuche kommen vom Handy. Die Seite wird zuerst fürs Handy gebaut.

• Der Knopf steht im ersten Bildschirm, ohne Scrollen.
• Ab Sektion 2 steht ein fester Knopf am unteren Rand: „Auf die Liste setzen“. Er verschwindet, sobald ein Feld im Bild ist.
• Screens stehen auf iPhone-Rahmen. Das Wochenboard scrollt waagrecht oder wird zur Tagesliste.
• Das Menü „Bereiche“ ist auf dem Handy eine Liste ohne Vorschaubilder.

Landingpages

Landingpages gibt es auf zwei Achsen. Beide nutzen dieselben Blöcke wie die Startseite.

• Je Suchbegriff: fünf Seiten je Sprache zu den Kernbegriffen Kalender, Planer, Organizer, gemeinsamer Kalender, Haushaltsplaner. Titel und H1 tragen den Begriff. Darunter Intro, Feld, Bild, drei Bausteine, Fragen, zweites Feld.
• Je Zielgruppe: sechs Segmente mit eigener Kampagne — Singles, Paare, Familie mit einem Kind, mit mehreren Kindern, mit Großeltern im Haus, in zwei Haushalten. Je Segment ein Brief, eine Landingpage auf Deutsch und Englisch, Social-Entwürfe und eine Kampagne mit UTM.

Die Tür steht offen: „für Familien, Paare und alle, die einen Haushalt führen“. Die Bühne bleibt die Familie. Der Haushalt ist die Einheit, nicht die Kinderzahl.

Sprachen und Märkte

Deutsch ist der Master. Die Website erscheint in elf Sprachen: Deutsch, Englisch, Spanisch, Französisch, Italienisch, Türkisch, Polnisch, Bulgarisch, Schwedisch, Dänisch, Norwegisch. Dazu kommen Länderfassungen für Sprachen mit mehreren Ländern: /de-at/, /de-ch/, /en-gb/, /en-ie/, /en-us/.

• Eine Domain, Ordner je Sprache und Land. Länder-Domains leiten per 301 auf den passenden Ordner.
• hreflang und canonical auf jeder Seite. /en/ ist die internationale Fassung.
• Die Quelle für Märkte, Pfade und Preise ist packages/markets.
• Jede Fassung liest ein Mensch mit dieser Muttersprache, bevor sie live geht.

Was in allen Sprachen bleibt: Hey Albert, Albert, die Namen von Familie Sonntag, Frankfurt, Face ID, App Store, iPhone, iPad, Mac.

Vorschaubilder für Links

Wer einen Link teilt, sieht dieses Bild in WhatsApp, iMessage oder der Suche. Eine Fassung je Sprache, 1200 × 630 Pixel, erzeugt von tooling/og-bilder.py.

Leistung und Barrierefreiheit

Technik ist Vertrauen. Die Messlatte steht in apps/site/lighthouserc.json und läuft im CI.

• Text ist HTML, nie Bild.
• Schriften lokal, nie von Google-Servern.
• Keine Cookie-Wand. PostHog läuft ohne Cookie, bis jemand zustimmt.
• Das erste Bild jeder Seite lädt ohne Einblendung, als AVIF mit WebP als Rückfall.

Blöcke aus dem Designsystem

Die Seite entsteht aus Payload. Jeder Block in Payload hat genau ein Bauteil in packages/design-system/bloecke. Agenten füllen Blöcke, gestalten nie.

Die Bauteile der früheren statischen Startseite — WebNavigation, EmailZeile, Vertrauenszeile, SzeneKarte, PreisKarte, Akkordeon, StickyKnopf und weitere — stehen im Kapitel Bauteile.

Prüfliste vor dem Livegang

• Fünf-Sekunden-Test mit fünf bis acht Eltern. Sagen zwei „ein Kalender“, ist der Hero nicht fertig.
• Jeder Satz ist wahr: Die Funktion existiert, oder der Satz ist raus. Je Sprache.
• Kein Wort von der Nie-Liste, kein Superlativ, kein Ausrufezeichen, kein anderes Produkt beim Namen.
• Nur Familie Sonntag, in jedem Screen und jeder Zahl.
• Keine Kindergesichter. Ein einziges echtes Foto: der Gründer.
• Knopf im ersten Bildschirm am Handy.
• Lighthouse im CI grün.