Smartphone Bildschirm-Auflösungen – Screen Resolutions

Erstellt am: 15.Dez 2018 | Letztes Update: 09.Sep 2019 | von: | Kategorie(n): Design, How-to & Anleitungen

App Website Resolutions Screensizes

Design für alle Screens

Das Breite Angebot von Geräten läßt so manchen Designer verzweifeln, wenn es darum geht, das beste Design für die „Generation Mobile“ zu schaffen. Doch ein UI/UX-Design-Profi kennt sich aus in diesem Dickicht und ist souverän in der Lage den Silberstreif am Horizont zu finden und eine Device-übergreifende, positive User-Experience zu schaffen. Bei der Gestaltung von Apps und mobilen Websites ist es jedoch wichtig, mit den gängigsten Bildschirmgrößen und Auflösungen auf dem Laufenden zu bleiben. Eine entsprechende optimierte und ansprechende Applikation sorgt für einen einfacheren Benutzerfluss und letztendlich für ein erfreuliches Erlebnis für Ihr Publikum. Und das entscheidet wesentlich über die Akzeptanz und den Erfolg einer App oder Website. Wußten Sie, das eine App bei gleicher Funktionalität besser bewertet wird, wenn sie ein gutes Design hat? Damit dieser gute Eindruck auf allen Geräten entsteht, befassen sich UI-Designer mit Screen-Sizes und Resolutions.

Screen-Size, Resolution & Viewport: Was bedeutet das alles?

Die Screen-Size ist ein technischer Aspekt der gern vom Marketing benutzt wird. Mehr Pixel gleich mehr Leistung. Tatsächlich werden die absoluten Pixel eines Smartphones immer mehr, die Größe des Gerätes verändert sich jedoch nicht im gleichen Maß. Lediglich die Dichte der Pixel bezogen auf die Screen-Größe verändert sich und damit steigt die Darstellungsqualität. Bei den iphones ist man bereits bei 3x-erhöhter Qualität angekommen. Developer und Designer jedoch müssen weiterhin den immer noch kleinen Bildschirmausschnitt benutzen. Dennoch gibt es Unterschiede zwischen den Geräten die im Design berücksichtig werden müssen.

Während Desktop- und Laptop-Displays im Querformat (breiter als hoch) sind, können viele mobile Geräte gedreht werden, um Websites sowohl im Querformat als auch im Hochformat (höher als breit) anzuzeigen. Dies bedeutet, dass Designer und Developer auch für diese Unterschiede entwerfen müssen.

RWD – Responsives Styling

Es ist defacto unmöglich, für jedes einzelne Gerät individuell zu designen. Der Aufwand dafür würde Software-Entwicklungskosten explodieren lassen. Stattdessen müssen Entwickler bei der Programmierung Designs entwickeln die flexibel auf Bildschirmausschnitte reagieren können.

  • an statt eine fixes Design zu entwickeln, wird ein Design eher in der Form eines Darstellungsspektrums entwickelt. Dazu werden gestalterische Orientierungspunkte benutzt, mehr dazu kann man auch in der Gestalttheorie nachlesen
  • Textgrößen können je nach Display variieren
  • es werden Verhaltensweisen definiert, die die Nutzung auf den verschiedene Endgeräten optimal ermöglichen (Beispiel: Mouse-Over-Designs die erscheinen, wenn die Maus über ein Bildschirm-Objekt bewegt wird, machen auf Touch-Geräten keinen Sinn, da dort kein Mauszeiger existiert)

Developer benutzen nachfolgendes CSS-Snippet, um via CSS verschiedene Bildschirmgrößen anzusteuern. Diese Haltepunkte sollen nur eine grobe Orientierung bieten und können beliebig verfeinert werden.

/* desktop styles */
@media screen and (max-width: 991px) {
/* large tablet styles */
}
@media screen and (max-width: 767px) {
/* medium tablet styles */
}
@media screen and (max-width: 479px) {
/* smartphone styles */
}

Verbreitete Bildschirmauflösungen

Desktops, Laptops & Co.

1024×768 Pixel und höher. Zugegeben, heute werden meist nur Laptops mit mindesten HD-Auflösung verkauft. Tatsächlich überschneiden sich die Auflösungen von Desktop-, Laptop- und Tablet-Produkten, sodass eine eindeutige Definition der Geräte-Zielgruppe dort etwas diffus wirkt. Nachfolgend ein paar Beispiele:

Pixelmaße Viewport-Faktor Viewport
XGA (alte Notebooks, Ultra-Kompakte-Atom-Books)) 1024×768 1-fach 1024×768
WXGA 1280×800 1-fach 1280×800
QVGA 1280×960 1-fach 1280×960
WXGA 1376×768 1-fach 1376×768
UXGA (CAD-Screen, 21-Zoll-Röhre) 1600×1200 1-fach 1600×1200
HD (heute üblich im Massenmarkt) 1920×1080 1-fach 1920×1080
WQHD (Retina MacBooks) 2560×1440 1-4-fach 640-2560×360-1440
UHD (4K-Screens LG, Samsung) 3840×2160 1-4 fach 960-3840x-540-2160

Apple Produkte

Pixelmaße Viewport-Faktor (>1 = Retina) Viewport
iPhone
iPhone XR 828 x 1792 2-fach 414 x 896
iPhone XS 1125 x 2436 3-fach 375 x 812
iPhone XS Max 1242 x 2688 3-fach 414 x 896
iPhone X 1125 x 2436 3-fach 375 x 812
iPhone 6/6S/7/8 Plus 1242 x 2208 3-fach 414 x 736
iPhone 6/6S/7/8 750 x 1334 2-fach 375 x 667
iPhone 5 /SE /SC 640 x 1136 2-fach 320 x 568
iPhone 4/4S 640×960 2-fach 320×480
iPhone 2G/3G/3GS 320×480 1-fach 320×480
iPod
iPod Touch 640 x 1136 2-fach 320 x 568
iPad
iPad Pro 2048 x 2732 2-fach 1024 x 1366
iPad 3 & 4 1536 x 2048 2-fach 768 x 1024
iPad Air 1 & 2 1536 x 2048 2-fach 768 x 1024
iPad Mini 2 & 3 1536 x 2048 2-fach 768 x 1024
iPad Mini 768 x 1024 1-fach 768 x 1024
iPad 1 & 2 768 x 1024 1-fach 768 x 1024

Android Geräte

Pixel Size Viewport-Faktor Viewport
Phones
Samsung Fold 5G 2152 x 1536 / 720 x 1680
Nexus 6P 1440 x 2560  3,5 412 x 732
Nexus 5X 1080 x 1920 412 x 732
Google Pixel 3 XL 1440 x 2960  3,5 412 x 847
Google Pixel 3 1080 x 2160 412 x 824
Google Pixel XL/2XL 1440 x 2560 412 x 732
Google Pixel 1080 x 1920 412 x 732
Samsung Galaxy Note 9 1440 x 2960  4 360 x 740
Samsung Galaxy Note 5 1440 x 2560  3 480 x 853
LG G5 1440 x 2560 480 x 853
One Plus 3 1080 x 1920 480 x 853
Samsung Galaxy S8+/S9+ 1440 x 2960  4 360 x 740
Samsung Galaxy S8/S9 1440 x 2960  4 360 x 740
Tablets
Nexus 9 1536 x 2048 768 x 1024
Nexus 7 (2013) 1200 x 1920 600 x 960
Samsung Galaxy Tab 10 800 x 1280 800 x 1280
Chromebook Pixel 2560 x 1700 1280 x 850

Nützliche Links

Nach oben

Schreibe einen Kommentar

Beiträge aus der gleichen Kategorie

Über den Autor

Hier schreibt das Management des DESIGNSTUDIO Ingo Förster über User-Interface-Design, Web-Design & Programmierung, manchmal auch über Online-Marketing und alles was zum täglichen Brot eines Designers gehört.

Ingo hat durch seine selbständige Tätigkeit viel Erfahrung in zwei Hauptbereichen sammeln können. Zum einen in im weiteren Sinne Interaction Design mit allen Disziplinen, angefangen mit Grafischer Gestaltung für Web, Programmierung von Internet-Auftritten mit Typo3, Wordpress oder Magento eCommerce und Usability-Konzepten für Touch-Bedienung. Randbereiche wie SEO und Online-Marketing wurden regelmäßig bearbeitet.

Ingo interessiert sich für Webtechnologien, Touch-UIDs und erleichterte Bedienverhältnisse in Software. Ingo ist im Bereich Multimedia lehrend tätig gewesen.