Bildschirmauflösungen und Responsive Webdesign 2018

Geschrieben von Christian Schmidt veröffentlich am in der Kategorie Design, UX
Das Jahr 2018 ist schon halb vorbei und der längste Tag des Jahres liegt bereits hinter uns. Es ist höchste Zeit für ein Update! :-)  
In den vergangenen Jahren habe ich bereits ausführlich über die Verwendung der verschiedenen Bildschirmauflösungen bei unterschiedlichen Devices (in Deutschland) berichtet. Insbesondere bei der Umsetzung von responsiven Webseiten ergeben sich daraus stets neue und spannende Herausforderungen.

Wer ein bisschen tiefer in diese Thematik reinlesen möchte, dem empfehle ich an dieser Stelle meinen Blogpost aus dem vergangenen Jahr: „BILDSCHIRMAUFLÖSUNGEN UND RESPONSIVE WEBDESIGN 2017“ 

Was hat sich im Vergleich zu 2017 bei den häufigsten Bildschirmauflösungen 2018 geändert und was gilt es zu beachten?

 

HÄUFIGSTE BILDSCHIRMAUFLÖSUNGEN - GESAMT

Fangen wir an mit den Top 3 Auflösungen gesamt. Hier hat sich an der Rangfolge nichts geändert.

Häufigste Bildschirmauflösungen 2018
Platz % Auflösung
1 17.45 360 x 640
2 13.04 1920 x 1080
3 8.17 1366 x 768
Quelle: StatCounter Global Stats - Screen Resolution Market Share

 

Der erste Platz wird dabei von der Auflösung vieler Android Smartphones mit HD Display belegt. Auf Platz zwei findet sich Full HD / 1080, eine eher für Laptops-, Tablet- und Desktopgeräte gebräuchliche Auflösung. Platz 3 ist HD Ready und gehört bei aktuellen Neugeräten kaum noch zur Ausstattung, ist aber in vielen aktuell benutzten Geräten verbaut. Der Trend ist hierbei rückläufig.

Die Top 3 Auflösungen machen insgesamt einen Anteil von 38,66% aus und knapp die Hälfte davon sind Mobile Devices. Wer also noch immer nicht darauf achtet, Mobile Devices auf seiner Webseite mit einer angemessenen Nutzungserfahrung (UX) zu bedienen, wird voraussichtlich bei vielen Usern für Frust und Unverständnis sorgen und verschenkt massiv Potenzial.

 

HÄUFIGSTE BILDSCHIRMAUFLÖSUNGEN - MOBILE

Aber widmen wir uns auch nochmals genauer den Top 3 Mobile-Device-Auflösungen:

 

Mobile Platz 1 mit 43,1%: 360x640 – Auflösung, die von vielen Android Geräten verschiedener Hersteller genutzt wird

Mobile Platz 2 mit 14,77%: 375x667 – Auflösung aller iPhones mit 4,7“ Display (iPhone 6, 6S und 7)

Mobile Platz 3 mit 6,1%: 320x568 – Auflösung der iPhones mit 4“ Display (iPhone 5, 5C, 5S, SE)

Quelle: StatCounter Global Stats - Screen Resolution Market Share

 

Auch wenn hier im Jahresvergleich keine Veränderung der Rangfolge stattgefunden hat, finde ich eine Erkenntnis besonders bemerkenswert: Die dritt-häufigste Mobile-Device-Bildschirmauflösung ist noch immer die 4 Zoll iPhone Auflösung (5/5S/SE).

 

DIE MISERE MIT DEN LANGEN ÜBERSCHRIFTEN

Insbesondere neuere Webseiten gehen auf die oben genannte Bildschirmbreite des 4 Zoll Apple Displays kaum noch ein. Häufig fällt schon bei der Headline einer Website auf, dass die Auflösung nicht berücksichtigt wird. Wörter brechen dann an ungünstiger Stelle um, da die festgelegte Schriftgröße zu groß für die Displaybreite ist. Aus Sicht der User Experience ein ungünstiger Zustand, der sich aber durchaus einfach beheben lässt. Wie das? Mit „Viewport Sized Typography“ wird die Schriftgröße dynamisch and den Viewport bzw. die Breite des Displays angepasst. Ein einfacher CSS Trick mit großer Wirkung. Getreu dem Motto „Old but Gold!“ findet man Details zu dieser – nicht mehr ganz so neuen – CSS Funktionalität in folgendem Post aus dem Jahr 2012- https://css-tricks.com/viewport-sized-typography/.

 

ABSCHLIEßEND WIEDER EIN PAAR WORTE ZUM IPHONE

Meine persönliche Meinung ist nach wie vor, dass der Marktanteil von Apple bei modernen Webseiten unbedingt beachtet werden muss. Die Aussage „Android ist doch viel verbreiteter als Apple!“ mag zwar stimmen, jedoch werden hier Äpfel mit Birnen verglichen. Apple ist ein Hersteller und sollte daher mit Herstellern (Samsung, LG, HTC, HUAWEI, etc.) und nicht mit Betriebssystemen (Android) verglichen werden. Daher auch hier ein Update der untenstehenden Übersicht, erweitert um das iPhone X. Ich gebe hier sowohl die CSS- als auch Device-Auflösung an, sowie die jeweilige Device-Pixel-Ratio (mehr dazu in meinem Blogpost von 2017).

 

ÜBERSICHT DER IPHONE BILDSCHIRMAUFLÖSUNGEN (CSS PIXEL, DEVICE-PIXEL-RATIO UND DEVICE PIXEL)

iPhone Bildschirmauflösungen - CSS Pixel, Device-Pixel-Ration und Device Pixel