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


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


Bildschirmauflösungen 2017 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)

Smartphone Auflösung Webdesign - iPhones 

Quelle: Eigene Darstellung

Kommentare
1

Christian

Sehr interessanter, guter und verständlicher Artikel.

am 13.04.2017

2

Taylando

Schaue ich mir immer wieder an. Könnt Ihr noch die Grafik mit den Auflösungen anpassen? Man kann die Grüntöne nicht unterscheiden

am 05.12.2017

3

Christian Schmidt

Hallo Taylando, Danke für Deinen Kommentar. Das ist ein guter Hinweis. Ich werde das bei Zeiten mal anpassen und die Daten von StatCounter für eine eigene (hoffentlich) bessere Darstellung verwenden. :) LG aus dem Kern Christian

am 05.12.2017

4

Dennis

Du schreibst, dass die Auflösung 1366x768 Pixel einen rückgängigen Trend verzeichnet. Das kann ich von unseren Web-Portalen nicht bestätigen. Es ist richtig, dass es mittlerweile eine Auflösung ist, die bei günstigeren oder schlicht älteren Laptops/ Notebooks eingesetzt werden, leider ist der Gebraucht dieser Geräte aber ungebrochen. Auch die Auflösung 1024x768 Pixel ist bei uns definitiv höher. Es ist vielleicht eher die Frage welche Auflösung in welcher Zielgruppe verwendet wird. Wir richten uns mit unseren Portalen an "den kleinen Mann", wenn ich das mal so ausdrücken darf. Meine Daten stützen sich auf Piwik, das wir zur Kontrolle einsetzen. Dennoch ist der Artikel von Dir gut geschrieben und macht einiges klar. Danke Dir dafür.

am 22.12.2017

5

Christian Schmidt

Hallo Dennis, vielen Dank für Dein Feedback. Es freut mich sehr, dass Dir der Artikel gefällt. Vielleicht noch kurz 2-3 Worte zur Erläuterung. :) Die Auflösung 1366x768 ist natürlich nach wie vor eine der am häufigsten genutzten, da hast Du natürlich vollkommen recht. Jedoch war bis zum letzten Jahr der relative Anteil dieser Auflösung zunehmend. Das ist er jetzt nicht mehr, da in der Regel nun auch die sehr preisgünstigen Laptops mit Full HD Panels ausgestattet sind. 1024x768 sowie 768x1024 werden noch lange Zeit vertreten sein, da dies auch die Auflösungen aller Apple iPad Modelle sind (Software Pixel, jeweils im Quer- und Hochformat). Die Daten die ich verwendet habe stammen vom StatCounter und stellen (hoffentlich) den Durchschnitt dar. Eine Auswertung nach Zielgruppe ist natürlich ein sehr Interessanter Ansatz. Vielleicht bekomme ich für das nächste Jahr genug Daten zusammen um eine entsprechende Auswertung nach Zielgruppen machen zu können. Danke für die Anregung. :) Jetzt wünsche ich aber erst mal schöne Feiertage sowie nur das Beste für das kommende Jahr 2018.

am 22.12.2017

6

Dennix

Dir auch ein schönes Weihnachten und ´nen guten Rutsch ins neue Jahr. 2018 wird spitze, das weiß ich jetzt schon :-)

am 25.12.2017

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