Bild von Christian Schmidt
Manager Online Marketing

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.

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 gepunktete 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

Multi-series Line Chart with caption "StatCounter Global Stats" Apr 2016May 2016June 2016July 2016Aug 2016Sept 2016Oct 2016Nov 2016Dec 2016Jan 2017Feb 2017Mar 20170%6%12%18%24%30% 1920x1080 360x640 1366x768 1600x900 Unknown 1280x800 768x1024 375x667 1280x1024 1680x1050 1024x768 1440x900 320x568 1536x864 Other (dotted) StatCounter Global StatsScreen Resolution Stats in Germany from Mar 2016 to Mar 2017

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.


Bildschirmaufloesungen 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


Multi-series Line Chart with caption "StatCounter Global Stats" Apr 2016May 2016June 2016July 2016Aug 2016Sept 2016Oct 2016Nov 2016Dec 2016Jan 2017Feb 2017Mar 20170%10%20%30%40%50% 360x640 375x667 320x568 Unknown 720x1280 640x360 480x800 320x480 320x534 414x736 320x570 1280x800 1024x768 1080x1920 Other (dotted) StatCounter Global StatsMobile Screen Resolution Stats in Germany from Mar 2016 to Mar 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)

Smartphone Auflösung Webdesign - iPhones 

Quelle: Eigene Darstellung

Kommentare
1

Christian

Sehr interessanter, guter und verständlicher Artikel.

am 13.04.2017

Kommentar hinzufügen
Vor und Zuname
E-Mail
E-Mail bei weiteren Kommentaren
Mein Kommentar