Bildschirmauflösungen und Responsive Webdesign 2017

Geschrieben von Christian Schmidt veröffentlich am in der Kategorie Design, UX

Bei der Konzeption, Gestaltung und Entwicklung von Webseiten ist es enorm wichtig darauf zu achten, dass der Inhalt auf den von den Nutzern eingesetzten Endgeräten auch lesbar und bedienbar dargestellt wird. Aus diesem Grund beschäftige ich mich regelmäßig mit den aktuell häufigsten Bildschirmauflösungen, da diese für ein gutes Responsive Webdesign besonders berücksichtigt werden sollten.

Einige Grundlagen des Responsive Webdesigns werden in meinen früheren Blogposts behandelt: 



Die häufigsten Bildschirmauflösungen 2017

Bei den Bildschirmauflösungen hat sich in den letzten 12 Monaten erneut viel getan. Mobile Internetnutzung ist nicht bloß nur noch ein Trend, den es „auch“ zu berücksichtigen gilt. Mobile ist da und es dominiert! Man kann in der weiter unten dargestellten Grafik sehr deutlich erkennen, dass es eine explizite Auflösung gibt, die spätestens seit September 2016 die Rangliste in Deutschland anführt:

 

Platz 1: 360x640 – Auflösung vieler Android Smartphones

Platz 2: 1920x1080 Full HD 1080p – eher eine Laptop, Tablet und Desktop Auflösung

Platz 3: 1366x768 – bis vor kurzem eine beliebte Auflösung bei günstigen Laptops mit nun aber deutlich rückläufigem Trend

 

Man sollte aber auch die dunkelblaue Linie nicht unbeachtet lassen. Diese kumuliert alle weiteren, nicht in den Top 15 auftauchenden Auflösungen und macht den größten Anteil aus – ein deutliches Zeichen für die Vielfalt der verschiedenen Displayauflösungen und ein weiteres Argument für Responsive Webdesign.

 

Häufigste Bildschirmauflösungen - Gesamt

Bildschirmauflösungen 2017 ingesamt

Quelle: StatCounter Global Stats - Screen Resolution Market Share


Auflösung ist nicht gleich Auflösung

Moderne Smartphones haben in der Regel deutlich höher aufgelöste Displays als 360x640. Woher stammen also diese Werte? Die Antwort darauf gibt die sogenannte Device-Pixel-Ratio:

Die Device-Pixel-Ratio gibt an, wie viele Hardware-Pixel das jeweilige Display verwendet, um einen Software-Pixel darzustellen. Aktuelle Apple iPhones mit Retina Display nutzen standardmäßig vier Hardware-Pixel (2 mal 2), um einen Software-Pixel darzustellen. In der Höhe oder Breite ergibt sich daraus eine Device-Pixel-Ratio von 2.


Bildschirmauflösungen CSS und Device 

Quelle: Eigene Darstellung


360x640 stammt in den meisten Fällen von Android Smartphones mit Full HD Displays (1920x1080), die jedoch 3 Hardware Pixel in Höhe und Breite verwenden um einen Software Pixel (CSS-Pixel) darzustellen. Die Device-Pixel-Ration ist hier dann genau 3 (1080/3 = 360; 1920/3 = 640).

Apple iPhones nutzen diese Auflösung definitiv nicht. Daher ist es durchaus interessant ebenfalls einen Blick auf die häufigsten Smartphone Auflösungen zu werfen.


Die häufigsten Bildschirmauflösungen - Smartphones

  • Mobile Platz 1: 360x640 – Auflösung, die von vielen Android Geräten verschiedener Hersteller genutzt wird
  • Mobile Platz 2: 375x667 – Auflösung aller iPhones mit 4,7“ Display (iPhone 6, 6S und 7)
  • Mobile Platz 3: 320x568 – Auflösung der iPhones mit 4“ Display (iPhone 5, 5C, 5S, SE)


Häufigste Bildschirmauflösungen - Mobile

Bildschirmauflösungen Mobile 2017

Quelle: StatCounter Global Stats - Screen Resolution Market Share


Ein paar Worte zum iPhone

Aus meiner persönlichen Sicht ist der Marktanteil von Apple nicht zu unterschätzen und ich halte nicht viel von Aussagen wie „Android ist doch viel verbreiteter als Apple!“, da hier Äpfel mit Birnen verglichen werden. Apple ist ein Hersteller und sollte daher mit anderen Herstellern (Samsung, LG, HTC, HUAWEI, etc.) verglichen werden. Daher möchte ich unten stehende Übersicht nicht unerwähnt lassen.


Übersicht der iPhone Bildschirmauflösungen (CSS Pixel, Device-Pixel-Ratio und Device Pixel)

iPhone Bildschirmauflösungen 

Quelle: Eigene Darstellung