Smartphone Bildschirm-Auflösungen – Screen Resolutions

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

Nützliche Links

• https://developer.android.com/training/multiscreen/screendensities
• https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions