Design für alle Screens
Die Vielzahl an Geräten kann Designer schnell an ihre Grenzen bringen. Unterschiedliche Displaygrößen, Pixeldichten, Viewports, Formate und Ausrichtungen machen die Gestaltung komplexer Anwendungen herausfordernd. Ein erfahrener UI/UX-Designer behält jedoch den Überblick: Er schafft konsistente, positive Nutzererlebnisse, die auf Smartphones, Tablets und Desktops gleichermaßen funktionieren.
Gerade im „Mobile-First“-Zeitalter entscheidet die Anpassungsfähigkeit über Akzeptanz und Erfolg. Studien zeigen: Bei gleicher Funktionalität werden Apps mit besserem Design klar bevorzugt bewertet. Der erste Eindruck hängt somit unmittelbar davon ab, wie gut ein Interface auf allen Geräten wirkt.
Screen-Size, Resolution & Viewport
- Screen-Size beschreibt die physische Größe des Displays in Zoll.
- Resolution (Pixelmaße) sind die absoluten Pixel des Geräts. Diese steigen seit Jahren, ohne dass die Gehäuse im gleichen Maß wachsen.
- Pixel Density (DPR / Retina-Faktor) gibt an, wie viele physische Pixel für einen CSS-Pixel genutzt werden (2x, 3x). Moderne iPhones (z. B. iPhone 16 Pro, iPhone 17 Pro Max) arbeiten mit 3x-Dichten.
- Viewport ist die logische Arbeitsfläche, mit der Designer tatsächlich umgehen müssen. Ein Gerät mit 1320 × 2868 Pixeln kann effektiv nur einen Viewport von 440 × 956 CSS-Pixeln liefern.
- Ausrichtung, im engl. Orientation bezeichnet die Ausrichtung des Handys in Quer=Landscape und Hoch=Portrait
Für Designer und Developer bedeutet das: Absolute Pixelwerte sind weniger entscheidend als das Zusammenspiel aus Auflösung, DPR und Viewport.
Orientierung an Gerätedynamik
Während Desktop-Displays fast ausschließlich im Querformat laufen, können Smartphones zwischen Hoch- und Querformat wechseln. UI/UX-Design muss diese Dynamik mitdenken. Elemente wie Navigation, Breakpoints oder Bildgrößen müssen sich automatisch anpassen.
RWD – Responsive Web Design
Ein fixes Design pro Gerät ist nicht mehr realistisch. Stattdessen arbeitet man mit einem Darstellungsspektrum: Layouts passen sich dynamisch an. Dazu setzen Designer auf Breakpoints und Gestaltungsregeln, etwa:
Ein typisches CSS-Snippet für Breakpoints sieht so aus:
- Textgrößen skalieren adaptiv statt starr zu sein.
- Interaktionsmuster unterscheiden sich je nach Device (z. B. kein Mouse-Over auf Touchscreens).
- Komponenten sind modular aufgebaut und reagieren flexibel auf Breite und Höhe des Viewports.
/* Smartphones (bis ca. 480px) */
@media (max-width: 480px) { ... }
/* Kleine Tablets und größere Smartphones */
@media (min-width: 481px) and (max-width: 768px) { ... }
/* Tablets im Hochformat */
@media (min-width: 769px) and (max-width: 1024px) { ... }
/* Desktop */
@media (min-width: 1025px) { ... }
Diese Werte sind nur Ausgangspunkte – moderne Projekte verfeinern Breakpoints oft stark, um optimale Übergänge sicherzustellen.
Apple Hardware (Hochformat / Portrait-Mode)
| Pixelmaße | Viewport-Faktor (>1 = Retina) | Viewport | |
| iPhone 17 Pro Max | 1320 x 2868 | 3-fach | 440 x 956 |
| iPhone 17 Pro | 1206 x 2622 | 3-fach | 402 x 874 |
| iPhone 17 Air | 1260 x 2736 | 3-fach | 420 x 912 |
| iPhone 17 | 1206 x 2622 | 3-fach | 402 x 874 |
| iPhone 16 Pro Max | 1320 x 2868 | 3-fach | 440 x 956 |
| iPhone 16 Pro | 1206 x 2622 | 3-fach | 402 x 874 |
| iPhone 16 Plus | 1290 x 2796 | 3-fach | 430 x 932 |
| iPhone 16 | 1179 x 2556 | 3-fach | 393 x 852 |
| iPhone 15 Pro Max | 1290 x 2796 | 3-fach | 430 x 932 |
| iPhone 15 Pro | 1179 x 2556 | 3-fach | 393 x 852 |
| iPhone 15 Plus | 1290 x 2796 | 3-fach | 430 x 932 |
| iPhone 15 | 1170 x 2532 | 3-fach | 390 x 844 |
| iPhone 14 Pro Max | 1290 x 2796 | 3-fach | 430 x 932 |
| iPhone 14 Pro | 1179 x 2556 | 3-fach | 393 x 852 |
| iPhone 14 Plus | 1284 x 2778 | 3-fach | 428 x 926 |
| iPhone 14 | 1170 x 2532 | 3-fach | 390 x 844 |
| iPhone 13 Pro Max | 1284 x 2778 | 3-fach | 428 x 926 |
| iPhone 13 Pro | 1170 x 2532 | 3-fach | 390 x 844 |
| iPhone 13 | 1170 x 2532 | 3-fach | 390 x 844 |
| iPhone 13 Mini | 1080 x 2340 | 3-fach | 360 x 780 |
| iPhone 12 Pro Max | 1284 x 2778 | 3-fach | 428 x 926 |
| iPhone 12 / 12 Pro | 1170 x 2532 | 3-fach | 390 x 844 |
| iPhone 12 Mini | 1080 x 2340 | 3-fach | 360 x 780 |
| iPhone 11 Pro Max | 1242 x 2688 | 3-fach | 414 x 896 |
| iPhone 11 Pro | 1125 x 2436 | 3-fach | 375 x 812 |
| iPhone 11 | 828 x 1792 | 2-fach | 414 x 896 |
Android Hardware (Hochformat / Portrait-Mode)
| Pixel Size (px) | Viewport-Faktor (DPR) | Viewport (CSS px) | |
| Phones | |||
| Samsung Galaxy S24 Ultra | 1440 × 3120 | 3 | 480 × 1040 |
| Samsung Galaxy S24 / S24+ / S24 FE | 1080 × 2340 | 3 | 360 × 780 |
| Google Pixel 8 Pro | 1344 × 2992 | 3 | 448 × 998 |
| Google Pixel 8 | 1080 × 2400 | 3 | 360 × 800 |
| Google Pixel 8a | 1080 × 2400 | 3 | 360 × 800 |
| OnePlus 12 | 1440 × 3216 | 3 | 480 × 1072 |
| Samsung Galaxy Z Fold5 | 1812 × 2178 (Innenseite) / 2316 × 904 (Außen) | 3 | 604 × 726 / 772 × 301 |
| Samsung Galaxy Z Flip5 | 1080 × 2640 | 3 | 360 × 880 |
| Xiaomi 14 Pro | 1248 × 2790 | 3 | 416 × 930 |
| Xiaomi 14 | 1220 × 2712 | 3 | 406 × 904 |
| Oppo Find X7 Pro | 1440 × 3168 | 3 | 480 × 1056 |
| Sony Xperia 1 VI | 1260 × 2916 | 3 | 420 × 972 |
| Motorola Edge 50 Pro | 1440 × 3120 | 3 | 480 × 1040 |
| Tablets | |||
| Samsung Galaxy Tab S9 Ultra | 1848 × 2968 | 2 | 924 × 1484 |
| Samsung Galaxy Tab S9+ / S9 | 1200 × 2000 | 2 | 600 × 1000 |
| Google Pixel Tablet | 1600 × 2560 | 2 | 800 × 1280 |
Hinweise und Quellen
- Diese Werte basieren auf typischen Angaben zu Auflösungen und Dichteklassen (DPR = 3 für viele High-End-Smartphones), angepasst auf wahrscheinliche CSS-Pixel Viewports.
- Hersteller geben selten direkte Viewport-Werte heraus. Für iOS ist es leichter, weil Apple oft offizielle CSS-Pixel nennt (z. B. 390 × 844 für iPhone 12) blisk.io
- Für Android stützt man sich oft auf Tools wie „Chrome DevTools Device Toolbar“, „BrowserStack“ oder Geräte-Spezifikationen in Entwicklerdokumentationen.
- Android weist über „density buckets“ (mdpi, hdpi, xhdpi, etc.) eine Skalierung zu. Android Developers+2Medium+2
Fazit
Die Vielfalt an Geräten wächst stetig – von faltbaren Displays über Ultra-Phones bis hin zu High-DPI-Tablets. Absolute Pixelzahlen steigen, doch für Designer entscheidend bleibt der Viewport, also die nutzbare logische Fläche. Ob iPhone 17 Pro Max mit 440 × 956 CSS-Pixeln oder ein Galaxy S24 Ultra mit 480 × 1040 CSS-Pixeln: Die reale Arbeitsfläche ist deutlich kleiner, als die Marketing-Zahlen suggerieren.
Erfolgreiches UI/UX-Design entsteht daher nicht durch starre Pixelwerte, sondern durch responsive und adaptive Konzepte, die auf allen Viewports funktionieren. Wer konsequent mit flexiblen Layouts, skalierbarer Typografie und device-gerechten Interaktionen arbeitet, erreicht eine gleichbleibend hohe User Experience – unabhängig davon, welches Gerät der Nutzer in der Hand hält.
