babytakt.app

Ein Umschalter, der die ganze Seite meint

Oben auf der Startseite stehen zwei Telefone und der Umschalter Glas | Holz | Knete. Er tauscht nicht nur die Bilder: Grund, Karten, Knöpfe und jedes App-Bild werden zu Holz oder Knete. Dafür braucht es kein Skript. Drei Optionsfelder und eine CSS-Regel mit :has() reichen. Ein kleines Skript merkt sich nur die Wahl, damit die Funktionen-Seite, Familie, Hilfe, Kontakt und Beitritt im selben Aussehen aufgehen. Ein Browser ohne :has() zeigt einfach Glas.

Jedes App-Bild gibt es in jedem Aussehen, nur „Knöpfe in Farbe“ nicht: Das gibt es auch in der App nur in Glas. Als Holz dazukam, kamen in einem Schritt 161 neue Aufnahmen dazu, 23 je Sprache für die damals sieben Sprachen, in Holz und in der neuen Knete. Aufgenommen sind sie in der echten App, mit denselben Beispieldaten wie die Glas-Bilder. Beim Umschalten ändert sich also nur das Aussehen, nicht der Inhalt. Nur die Rechtstexte bleiben in Glas; der Umbau hat an ihnen kein Wort und keinen Stil geändert.

Zwölf Sprachen, eine davon von rechts nach links

Die Seite spricht dieselben Sprachen wie die App, und sie nimmt dieselben Wörter. Zuletzt kamen fünf Sprachen auf einmal dazu, darunter Arabisch. Dafür steht dir="rtl" an der Seite, und alle Angaben für links und rechts sind auf logische Eigenschaften umgestellt. So spiegelt sich das Layout von selbst, die Pille im Umschalter und der Wegpfeil laufen mit. Für die Sprachen von links nach rechts hat sich dadurch nichts geändert.

Wo es eine App-Aufnahme in einer Sprache noch nicht gibt, springt die englische ein. Auf der arabischen Seite sieht man das an den Telefonen.

Die Sprachwahl oben ist ein einfaches Aufklappfeld und geht ohne Skript. Die hreflang-Angaben und die Sitemap entstehen beim Bauen aus derselben Zuordnung. So weiß eine Suchmaschine, dass /funktionen/ und /en/features/ zusammengehören.

Eine Seite, die hält, was sie verspricht

Bei einer Baby-App ist die Datenschutzseite das Kaufargument. Eine Seite, die selbst Schriften bei Google holt oder fremde Skripte lädt, würde ihren eigenen Text widerlegen. Deshalb gibt es kein fremdes JavaScript, keine Cookies und keine eingebetteten Inhalte.

Eine strenge Content-Security-Policy lässt nur eigene Skriptdateien laufen und eingebettete Skripte, deren Prüfsumme Astro beim Bauen ausgerechnet hat. Eingeschleuster Code liefe nicht, weil seine Prüfsumme nicht in der Liste steht. Dafür gibt es im Markup keine style-Attribute. Ganz ohne Lehrgeld ging es nicht: Ein kleines eingebettetes Skript auf der Beitrittsseite lief nicht, weil Astro für Skripte, die es unverändert durchreicht, keine Prüfsumme rechnet. Jetzt liegt es als eigene Datei daneben.

Gemessen, nicht geschätzt

Lighthouse mobil, zehn Läufe gegen die Live-Seite: Leistung in sieben Läufen zwischen 96 und 98, drei Ausreißer lagen bei 69 bis 77. Barrierefreiheit, Best Practices und SEO waren in allen zehn Läufen bei 100. Astro schreibt die Stile direkt in die Seite, und die zwei Schriften, die jede Seite braucht, werden vorgeladen.

Und eine Regel gilt für jeden Satz: Die Seite behauptet nur, was die App heute kann. Gezeichnete Beispiele sind als Beispiel beschriftet.