Bildschirmauflösungen und Responsive Webdesign 2017
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.
>> Die Daten für 2018 gibt es bei Bildschirmauflösungen und Responsive Webdesign 2018 <<
Einige Grundlagen des Responsive Webdesigns werden in meinen früheren Blogposts behandelt:
- Responsive Webdesign 2015 und Upwardly Responsiveness
- Die häufigsten Bildschirmauflösungen und Responsive Webdesign 2014
- Die häufigsten Bildschirmauflösungen und Responsive Webdesign
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
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.
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
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)
Quelle: Eigene Darstellung