Webdesign für das neue iPhone: Warum UX jetzt neu gedacht werden muss

1. Warum die neue iPhone-Generation für Webdesign relevant ist

Responsive Webdesign ist längst Standard. Websites müssen auf Smartphones, Tablets und Desktop-Computern funktionieren und sich automatisch an unterschiedliche Bildschirmgrößen anpassen.

Mit der neuen iPhone-Generation bekommt dieses Thema jedoch eine zusätzliche Dimension. Apple hat neben dem iPhone 18 Pro und iPhone 18 Pro Max erstmals das iPhone Duo vorgestellt – ein faltbares iPhone mit einem äußeren 5,4-Zoll-Display und einem 7,6-Zoll-Display im geöffneten Zustand.

Damit kann dieselbe Website innerhalb weniger Sekunden auf zwei sehr unterschiedliche Nutzungssituationen treffen: kompakt und einhändig oder großflächig und multitasking-orientiert.

Für Webdesigner bedeutet das vor allem eines: Die UX muss flexibler werden.

2. Das iPhone Duo: Ein neuer Formfaktor für Websites

Apple hat das iPhone Duo am 9. September 2026 offiziell vorgestellt. Im geschlossenen Zustand besitzt das Gerät ein 5,4-Zoll-Außendisplay. Wird es geöffnet, steht ein 7,6-Zoll-Innendisplay zur Verfügung.

Apple beschreibt das Gerät ausdrücklich als neue Kombination aus kompakter Smartphone-Nutzung und größerer Fläche für Inhalte, Multitasking und andere Interaktionen.

Gleichzeitig ist die Software darauf ausgelegt, auf den unterschiedlichen Zuständen des Geräts zu reagieren. Inhalte können sich beim Öffnen, Schließen oder Drehen entsprechend anpassen.

Genau hier entsteht die Verbindung zum Webdesign: Websites sollten nicht nur auf eine Bildschirmbreite reagieren, sondern auf die jeweilige Nutzungssituation.

3. Die eigentliche Herausforderung: UX statt Bildschirmgröße

Die wichtigste Frage beim neuen iPhone lautet deshalb nicht: „Welche Pixelbreite hat das Display?“

Die wichtigere Frage lautet: „Was möchte der Nutzer in diesem Moment tun?“

Genau das ist der Kern moderner User Experience.

Ein kleines Display verändert die Prioritäten

Auf dem geschlossenen iPhone Duo steht vergleichsweise wenig Bildschirmfläche zur Verfügung. Navigation, Headlines, Buttons und wichtige Informationen müssen deshalb besonders klar priorisiert werden.

• Wichtige Inhalte müssen schnell erfassbar sein.
• Buttons müssen ausreichend groß und gut erreichbar sein.
• Navigation sollte möglichst wenig Platz beanspruchen.
• Lange Textblöcke sollten sinnvoll strukturiert werden.

Ein großer Viewport verändert dagegen die Möglichkeiten

Wird das Gerät geöffnet, entsteht deutlich mehr Fläche. Diese sollte jedoch nicht einfach mit zusätzlichen Elementen gefüllt werden.

Mehr Platz bedeutet nicht automatisch bessere UX. Stattdessen sollte der zusätzliche Raum dazu genutzt werden, Inhalte besser zu strukturieren.

Beispielsweise können Informationen stärker visuell gruppiert, Bilder größer dargestellt oder zusätzliche kontextbezogene Inhalte eingebunden werden.

4. Responsive Design reicht nicht mehr aus

Klassisches Responsive Design arbeitet häufig mit Breakpoints. Beispielsweise wird definiert:

• Mobile: bis 767 Pixel
• Tablet: 768 bis 1023 Pixel
• Desktop: ab 1024 Pixel

Dieses Modell funktioniert weiterhin sehr gut. Es sollte jedoch nicht als starres Regelwerk verstanden werden.

Moderne Websites sollten sich nicht nur an bestimmten Pixelwerten orientieren, sondern möglichst flexibel auf ihren verfügbaren Raum reagieren.

Von festen Layouts zu fluiden Layouts

Ein modernes Layout verwendet deshalb beispielsweise:

• CSS Grid und Flexbox
• flexible Containerbreiten
• minmax() für flexible Spalten
• clamp() für responsive Typografie und Abstände
• relative statt ausschließlich fixe Größen
• flexible Bilder und Medien

Dadurch kann sich eine Website kontinuierlich an unterschiedliche Viewports anpassen, ohne dass für jedes einzelne Gerät ein eigenes Layout entwickelt werden muss.

5. Die wichtigsten UX-Prinzipien für das neue iPhone

1. Content zuerst

Der wichtigste Inhalt sollte unabhängig vom Gerät schnell erreichbar sein. Nutzer sollten nicht durch zusätzliche Navigationsebenen oder unnötige Animationen geführt werden, bevor sie verstehen, worum es auf der Seite geht.

2. Klare visuelle Hierarchie

Headlines, Zwischenüberschriften, Bilder und Call-to-Actions sollten eine eindeutige Hierarchie bilden.

Besonders auf kleinen Screens hilft eine klare visuelle Struktur dabei, Informationen innerhalb weniger Sekunden zu erfassen.

3. Touch statt Maus denken

Buttons und interaktive Elemente müssen für Touch-Bedienung geeignet sein. Kleine Links, eng nebeneinanderliegende Buttons oder schwer erreichbare Navigationselemente führen insbesondere auf mobilen Geräten schnell zu Fehlbedienungen.

4. Keine wichtigen Elemente an kritischen Bildschirmrändern

Moderne Smartphones verfügen über unterschiedliche Systembereiche, beispielsweise für Statusinformationen, Navigation oder andere Interface-Elemente.

Deshalb sollten wichtige Buttons und Inhalte nicht ausschließlich direkt an den Bildschirmrand gesetzt werden.

5. Öffnen und Schließen mitdenken

Beim iPhone Duo kann sich der verfügbare Platz während der Nutzung verändern. Ein gutes Webdesign sollte deshalb nicht davon ausgehen, dass ein Layout nach dem ersten Laden unverändert bleibt.

Inhalte müssen auch dann logisch bleiben, wenn sich der verfügbare Raum verändert.

6. Navigation und Interaktionen neu denken

Navigation gehört zu den Bereichen, bei denen Unterschiede zwischen kleinen und großen Displays besonders schnell sichtbar werden.

Mobile Navigation

Auf einem kleinen Viewport sollte die Navigation möglichst kompakt bleiben. Ein gut konzipiertes Menü kann beispielsweise über ein reduziertes Mobile-Menü geöffnet werden.

Größere Darstellung

Steht mehr Platz zur Verfügung, kann die Navigation stärker sichtbar werden. Das bedeutet jedoch nicht automatisch, dass ein Desktop-Menü einfach auf einen mobilen Großbildschirm übertragen werden sollte.

Entscheidend ist immer die Frage: Welche Navigation unterstützt die aktuelle Aufgabe des Nutzers?

Beispiel: Produkt- oder Leistungsseiten

Auf einem kleinen Display könnte eine Leistungsseite zunächst nacheinander aufgebaut sein:

1. Leistung
2. Vorteile
3. Referenzen
4. Call-to-Action

Auf einem größeren Viewport können dieselben Informationen stärker miteinander kombiniert werden, beispielsweise durch Karten, zweispaltige Bereiche oder zusätzliche visuelle Orientierung.

Der Inhalt bleibt dabei derselbe – nur seine Präsentation verändert sich.

7. Content: Was auf kleinen und großen Displays funktioniert

Einer der häufigsten Fehler beim Responsive Design ist die Annahme, dass mehr Bildschirmfläche automatisch mehr Content bedeutet.

Gute UX bedeutet stattdessen: Die richtige Menge an Information zur richtigen Zeit.

Texte

Lange Textblöcke sollten durch Zwischenüberschriften, kurze Absätze, Listen und visuelle Elemente strukturiert werden.

Bilder

Bilder sollten flexibel skalieren und ihre Proportionen behalten. Gleichzeitig sollte darauf geachtet werden, dass große Bilder nicht unnötig viel Ladezeit verursachen.

Call-to-Actions

Ein CTA sollte unabhängig vom verfügbaren Platz eindeutig erkennbar bleiben. Auf kleinen Screens kann ein einzelner primärer CTA sinnvoller sein als mehrere gleichwertige Aktionen.

Auf größeren Screens können zusätzliche sekundäre Aktionen sichtbar werden, ohne den Nutzer von der Hauptaktion abzulenken.

8. Technische Umsetzung

Die Grundlage für eine gute UX auf der neuen iPhone-Generation ist keine spezielle „iPhone-Duo-Website“, sondern eine sauber entwickelte responsive Website.

Viewport korrekt definieren

Die korrekte Viewport-Konfiguration ist eine grundlegende Voraussetzung für mobile Websites. Apple empfiehlt für iOS-Websites die Verwendung von width=device-width.

<meta
  name="viewport"
  content="width=device-width, initial-scale=1"
/>

Flexible Layouts

CSS Grid und Flexbox ermöglichen Layouts, die sich flexibel an unterschiedliche verfügbare Flächen anpassen.

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

Responsive Typografie

Auch Schriftgrößen und Abstände sollten nicht ausschließlich über starre Werte gesteuert werden.

h1 {
  font-size: clamp(2rem, 5vw, 5rem);
}

section {
  padding-block: clamp(3rem, 8vw, 8rem);
}

Safe Areas berücksichtigen

Bei modernen mobilen Geräten können Safe-Area-Insets relevant sein. CSS stellt dafür beispielsweise env() mit safe-area-inset-*-Werten zur Verfügung.

.header {
  padding-top:
    max(1rem, env(safe-area-inset-top));
}

.footer {
  padding-bottom:
    max(1rem, env(safe-area-inset-bottom));
}

Segmentierte Displays

Für Geräte mit tatsächlich getrennten Viewport-Segmenten existieren spezielle CSS-Media-Features wie horizontal-viewport-segments und vertical-viewport-segments.

Diese Technologien sind jedoch noch nicht breit und einheitlich unterstützt. Sie sollten deshalb nicht zur Grundlage einer Website gemacht werden, deren grundlegende UX ohne sie nicht funktioniert.

Die bessere Strategie lautet: robustes Responsive Design zuerst, spezielle Gerätefeatures anschließend als Progressive Enhancement.

9. Warum echtes Testing wichtiger wird

Eine Website kann im Desktop-Browser perfekt aussehen und sich auf einem Smartphone trotzdem schlecht anfühlen.

Gerade bei einer neuen Geräteklasse sollten deshalb unterschiedliche Nutzungssituationen getestet werden.

• Smartphone im Hochformat
• Smartphone im Querformat
• iPhone Duo geschlossen
• iPhone Duo geöffnet
• unterschiedliche Textgrößen
• Touch-Bedienung
• langsame Netzwerkverbindungen
• Formulare und Conversion-Prozesse

Besonders wichtig sind dabei nicht nur visuelle Tests. Auch Interaktionen sollten überprüft werden:

• Kann der Nutzer problemlos navigieren?
• Sind Buttons erreichbar?
• Bleibt der aktuelle Kontext erhalten?
• Funktionieren Formulare weiterhin?
• Verändert sich die Seitenstruktur sinnvoll?
• Bleibt der wichtigste CTA sichtbar und verständlich?

10. FAQs: Webdesign für die neue iPhone-Generation

Muss meine Website für das iPhone Duo komplett neu entwickelt werden?

Nein. In den meisten Fällen ist keine separate Website notwendig. Eine moderne responsive Codebasis kann unterschiedliche Viewports und Gerätezustände abdecken. Entscheidend ist, dass das Layout flexibel aufgebaut ist und nicht von einem einzigen festen Bildschirmformat ausgeht.

Was ist beim iPhone Duo besonders?

Das Gerät kombiniert ein 5,4-Zoll-Außendisplay mit einem 7,6-Zoll-Innendisplay. Dadurch kann sich die verfügbare Fläche während der Nutzung deutlich verändern.

Brauche ich spezielle CSS-Regeln für das iPhone Duo?

Nicht zwingend. Die Basis sollte immer ein robustes responsives Layout sein. Spezielle Features für segmentierte Viewports können ergänzend eingesetzt werden, sofern Browser- und Gerätesupport zuverlässig gegeben ist.

Sollte eine Website auf dem geöffneten iPhone Duo anders aussehen?

Ja – aber nicht zwangsläufig komplett anders. Mehr Bildschirmfläche kann genutzt werden, um Inhalte besser zu strukturieren, zusätzliche Informationen sichtbar zu machen oder Interaktionen komfortabler darzustellen.

Was ist der wichtigste Punkt für UX auf der neuen iPhone-Generation?

Nicht die Optimierung für ein einzelnes Gerät steht im Mittelpunkt, sondern ein flexibles Designsystem, das Inhalte und Interaktionen unabhängig von der verfügbaren Bildschirmfläche verständlich hält.

11. Fazit: Gute UX muss sich an den Nutzer anpassen

Das neue iPhone Duo ist ein gutes Beispiel dafür, wie sich digitale Interfaces weiterentwickeln.

Ein Nutzer kann denselben Inhalt zunächst auf einem kleinen, kompakten Smartphone-Display betrachten und anschließend auf einer deutlich größeren Fläche weiterarbeiten.

Für Websites bedeutet das: Responsive Design darf nicht nur bedeuten, Elemente kleiner oder größer zu machen.

Gute UX bedeutet, dass sich die Informationshierarchie, Navigation, Interaktion und Darstellung sinnvoll an den verfügbaren Raum und die jeweilige Nutzungssituation anpassen.

Die wichtigste Zukunftsstrategie ist deshalb keine spezielle Website für jedes neue Smartphone.

Es ist ein flexibles Designsystem, das auf unterschiedliche Displays, Orientierungen und Nutzungssituationen vorbereitet ist.

Wer heute Websites entwickelt, sollte deshalb nicht fragen: „Für welches Gerät müssen wir optimieren?“

Die bessere Frage lautet: „Wie schaffen wir eine UX, die auch dann funktioniert, wenn sich das Gerät verändert?“

Ist Ihre Website bereit für die neue iPhone-Generation?

Wir analysieren Websites nicht nur auf ihre Optik, sondern auf die gesamte User Experience – von Navigation und Layout über mobile Interaktionen bis hin zu Conversion-relevanten Elementen.

Wenn Sie wissen möchten, wie Ihre Website auf modernen Smartphones und neuen Formfaktoren funktioniert, können wir Ihre wichtigsten Seiten gezielt auf UX und Responsive Design prüfen.

Kontakt: tim@ad-ninjas.net | www.ad-ninjas.net