Multi-Plattform-Finish: 4K, iPad und Feature Flags

Foto: Unsplash

Die letzten zwei Wochen vor einem Launch sind keine Zeit für neue Features. Sie sind die Zeit, in der man herausfindet, dass die App auf einem iPad Pro im Querformat seltsam aussieht, dass auf einem 4K-Monitor die Breite nicht begrenzt ist und der Text über den ganzen Bildschirm läuft, und dass iOS-Geräte mit Home-Indicator am unteren Bildschirmrand eine Extra-Behandlung brauchen. Diese Woche ist ein Ehrlichkeitsbericht über den letzten Schliff.

Responsive Design auf drei Breakpoint-Ebenen

OutaStory läuft auf sechs Plattformen: Web, macOS, Windows, iPadOS, iOS, Android. Das sind unterschiedliche Formfaktoren, und CSS-Responsive-Design muss all diese abdecken.

Wir haben drei Maximalbreiten definiert:

• 1440px — Standard-Desktop
• 1920px — Full-HD-Monitor
• 2560px — 4K / Ultra-Wide

Auf jedem dieser Breakpoints wird der Content-Container neu dimensioniert. Auf 4K-Monitoren ohne diese Beschränkung würde ein Fließtext-Absatz sich über 50 bis 60 Zeichen Breite dehnen, was die Lesbarkeit massiv verschlechtert. Die Maximalbreite ist keine kosmetische Einschränkung — sie ist eine Lesbarkeits-Entscheidung.

Dazu kommen die üblichen kleinen Breakpoints für mobile Geräte. Auf Mobilgeräten wird zum Beispiel die "Schreib"-Schaltfläche auf der /my-stories-Seite ausgeblendet. Nicht weil man auf dem Telefon nicht schreiben kann, sondern weil der primäre Schreibfluss besser auf Tablet und Desktop funktioniert. Das Verstecken ist explizit, keine Layoutmagie.

CategoryTabs und Desktop-Wrapping

Die Kategorie-Navigation auf Desktop hat uns etwas Zeit gekostet. Die Category-Tabs zeigen alle Root-Kategorien horizontal. Auf kleineren Bildschirmen passen sie alle nebeneinander. Auf breiten Bildschirmen fängt ab einem bestimmten Punkt ein unschöner horizontaler Scroll an.

Die Lösung: Auf Desktop-Breakpoints wrappen die Tabs in zwei Zeilen, wenn sie nicht alle in eine passen. Das klingt einfach, ist aber in CSS nicht trivial — flex-wrap allein reicht nicht, wenn man möchte, dass die erste Zeile immer voll gefüllt ist und die zweite Zeile zentriert unter ihr erscheint.

Wir haben das mit einem Tooltip-System kombiniert, das rein CSS-basiert ist: data-tooltip-Attribute mit ::before/::after-Pseudo-Elementen. Kein JavaScript, keine externe Library. Der Hover-Tooltip zeigt den vollen Kategorienamen, wenn der Tab zu schmal ist, um ihn ganz anzuzeigen.

iPad Pro im Querformat

Das iPad Pro im Querformat war die größte Einzelbaustelle in der Multi-Plattform-Arbeit. Das Gerät hat eine Auflösung von 2732×2048 Punkten bei 264 PPI — es ist praktisch ein kleiner 4K-Monitor.

Das Problem: Blazor MAUI auf iPadOS rendert in einer WebView, die die Device-Pixel-Ratio berücksichtigt. Aber bestimmte CSS-Eigenschaften, die auf dem Web-Browser korrekt skalieren, verhalten sich in der MAUI-WebView anders. Das betrifft vor allem Schriftgrößen in rem, die in Edge auf Windows korrekt skalieren, aber in der iOS-WebView minimal anders interpretiert werden.

Die Lösung war keine Einheitslösung, sondern eine sorgfältige Überarbeitung der Layout-Komponenten mit expliziten min-height und max-width-Definitionen, die in allen Kontexten konsistent sind.

Safe Area: env(safe-area-inset-bottom)

iOS und Android haben beide einen Bereich am unteren Bildschirmrand, der vom Home-Indicator oder der Navigationsleiste belegt ist. Wenn man die Bottom-Navigation einer App dort platziert, verschwinden Buttons unter dem Home-Indicator.

Die CSS-Funktion env(safe-area-inset-bottom) löst das: Sie gibt den Abstand zurück, um den der Inhalt nach oben verschoben werden muss, damit er sichtbar bleibt. Auf Geräten ohne Home-Indicator (zum Beispiel auf einem iPad mit Tastatur) gibt sie 0px zurück — also keine unerwünschten Abstände.

OutaStory's Bottom-Navigation benutzt padding-bottom: calc(var(--os-space-md) + env(safe-area-inset-bottom)) — der eigene Spacing-Token plus der Safe-Area-Wert. Das funktioniert auf allen getesteten iOS- und Android-Geräten korrekt.

Foto: Unsplash

Feature Flags: Rollout-Strategie

Die drei großen neuen Features — KI-Cover-Generierung, Audio-Generierung und Story-Ads-Opt-out — sind alle hinter Feature Flags. Das ermöglicht einen kontrollierten Rollout.

Die Feature Flags werden über featureflags.json konfiguriert, eine Datei, die pro Host und per Deployment-Umgebung unterschiedlich befüllt wird. Die drei relevanten Flags:

• AiCoverGeneration — Aktiviert den KI-Cover-Schritt im Publish-Wizard
• AudioGeneration — Aktiviert den Audio-Schritt im Publish-Wizard
• StoryAdsOptOut — Zeigt den Opt-out-Schalter im Publish-Wizard

Beim Relaunch sind alle drei Flags auf true gesetzt — für Web, macOS, Windows, iOS, iPadOS und Android. Aber die Architektur erlaubt es uns, einzelne Flags auf einzelnen Hosts zu deaktivieren. Wenn Azure-Kontingente in einer Region ausgeschöpft sind, können wir AiCoverGeneration für diese Region deaktivieren, ohne die anderen Features zu beeinflussen.

Neue Autoren: Automatisches Author-Record-Anlegen

Ein kleines Detail, das aber wichtig für die Onboarding-Erfahrung ist: Wenn sich eine neue Nutzerin registriert und ihren ersten Draft anlegt, wird automatisch ein Author-Datensatz für sie erstellt.

Das klingt selbstverständlich, ist aber ein konkreter Schritt, der in der ersten Version manuell ausgelöst werden musste. Jetzt passiert es implizit beim ersten Draft-Speichern — transparent für die Autorin, ohne ein extra "Profil anlegen"-Formular. Sie fängt an zu schreiben, und der Rest ergibt sich.

Was die letzten zwei Wochen gelehrt haben

Wenn ich ehrlich bin: Die letzten zwei Wochen sind die anstrengendsten, weil jedes Problem klein und trotzdem wichtig ist. Ein falsch positionierter Button auf einem iPad-Querformat-Screen ist kein kritischer Bug. Aber er ist das erste, was eine neue Nutzerin sieht, wenn sie das erste Mal die App öffnet.

Die Zeit, die man in dieser Phase investiert, ist nicht glamourös. Aber sie ist der Unterschied zwischen einem Produkt, das "gut genug" ist, und einem Produkt, das sich durchdacht anfühlt.

Was kommt als Nächstes?

Morgen ist der Launch. Der Hauptankündigungs-Post erscheint zeitgleich mit dem Relaunch auf www.outastory.com. Wir freuen uns auf alle, die mit uns schreiben, lesen und zuhören.