Seitenbreite von Webseiten – Welche Größe und Breite für eine Website?

Seitenbreite von Webseiten

Diesen Beitrag könnte ich damit beginnen: Jetzt haben wir den Salat. Aber eigentlich ist nur das eingetreten, was Google seit 2 Jahren schon voraussagt und was ich auch in dem Beitrag: Auflösung Mobil, Desktop oder Tablet gesehen habe. Erstmals dominiert bei der Auflösung eine Mobilauflösung.

Welche Auflösungen werden derzeit am meisten genutzt?

Die Mobilauflösung 360×640 hat in den letzten 6 Monaten ordentlich an Fahrt aufgenommen und sich an den Spitzenplatz geschoben. Die ursprünglichen Spitzenreiter 1920×1080 Pixel und 1366×768 wurden auf die Plätze verdrängt.

Vergleicht man einmal die Entwicklung der Auflösungen mit denen vor 5 Jahren, sieht man die Welt ist vielfältiger geworden. In der Zwischenzeit tummeln sich durch die unterschiedlichen Geräte so viele verschiedene Auflösungen in diesem Bereich, dass man sehr genau überlegen sollte, wie man seine Webseite aufbaut. Ein einfaches Design, wie es vor 5 Jahren noch möglich war, gehört endgültig der Vergangenheit an.

PlatzSeitenauflösungProzentPlatzSeitenauflösungProzent
1.360×64014,84%9.1600×9005,02%
2.1920×108012,72%10.375×6674,79%
3.1366×76811,20%11.1440×9003,75%
4.768×10249,78%12.1920×12003,02%
5.1280×8007,63%13.1536×8641,74%
6.320×5686,33%14.1024×7681,59%
7.1280×10245,70%15.320×4801,55%
8.1680×10505,59%16.Rest4,75%
Webseiteauflösung 2. Halbjahr 2015

Mit diesen Auflösungen haben die Besucher die Webseiten im 2. Halbjahr 2015 besucht.

3 weitere interessante Auswertungen

  1. Desktop, Tablet oder Smartphone – Für welche Geräte sollte meine Webseite optimiert sein?
  2. Google Chrome, Firefox oder Internet Explorer? – Für welche Browser sollte meine Website optimiert sein?
  3. Google, Facebook oder direkt? – Woher kommen die Besucher auf meiner Webseite?

Wie habe ich ausgewertet?

Für diese Auswertung habe ich mir 11 Webseiten rausgesucht, welche im zweiten Halbjahr 2015 mehr als 50.000 Besucher hatten. Von diesen Webseiten entnahm ich die Seitenaufrufe in Kombination mit den Auflösungen. Alle Auflösungen mit weniger als 1.000 Sitzungen wurden ausgesiebt.

So findest du deine TOP-Auflösung selbst heraus

3 weitere interessante Beiträge zu Google

  1. An welcher Stelle befindet sich meine Webseite bei Google?
  2. Lohnt sich der erste Platz bei Google wirklich?
  3. Woran erkennt man ob eine Webseite für Google optimiert ist?

Historie

Seitenbreite von Websites 2015 – 1.Halbjahr

Im ersten Halbjahr 2015 haben die beiden Spitzenreiter mit einer Auflösung von 1366×768 und 1920×1080 Pixel ihre Positionen miteinander getauscht und erneut etwas an Volumen eingebüst. An 3. Stelle befand sich eine mobile Hochkantauflösung, welche im letzten halben Jahr von 4,87 Prozent auf 8,71 Prozent hochgeschnellt war. Danach folgt eine Querauflösung und eine Hochkant-Tablet Auflösung.

PlatzSeitenauflösungProzentPlatzSeitenauflösungProzent
1.1920×108012,87%10.1440×9004,00%
2.1366×76812,57%11.1024×7683,32%
3.360×6408,71%12.1920×12002,55%
4.1280×10248,37%13.1536×8642,19%
5.1280×8008,01%14.375×6671,73%
6.768×10247,46%15.320×4801,64%
7.1600×9006,76%16.1280×7201,54%
8.1680×10506,36%17.720×12801,34%
9.320×5684,04%18.480×8001,25%
19.Rest5,31%
Websiteauflösung 2015 - 1. Halbjahr

Mit diesen Auflösungen wurden Webseiten im 1. Halbjahr 2015 am meisten aufgerufen.

Seitenbreite von Websites 2014 – 2.Halbjahr

Im 2. Halbjahr 2014 konnten die beiden Spitzenreiter mit einer Auflösung von 1366×768 und 1920×1080 Pixel ihre Positionen halten, aber im Vergleich zur letzten Auswertung nicht weiter gewinnen. Was jedoch im Vergleich zu den letzten Auswertungen auffiel war, dass es eigentlich keine echten Spitzenreiter mehr gab, sondern nur noch ein breites Mittelfeld.

PlatzSeitenauflösungProzentPlatzSeitenauflösungProzent
1.1366×76813,14%10.1440×9004,31%
2.1920×108012,34%11.320×5683,78%
3.1280×10249,81%12.1920×12002,28%
4.1280×9608,49%13.320×4802,27%
5.768×10247,47%14.1536×8641,95%
6.1600×9007,18%15.720×12801,69%
7.1680×10506,88%16.1280×7201,53%
8.1024×8195,51%17.480×8001,48%
9.360×6404,87%18.Rest5,02%
Webseitenauflösung im 2. Halbjahr 2014

Mit diesen Auflösungen wurden Webseiten im 2. Halbjahr 2014 am meisten aufgerufen.

Seitenbreite von Websites 2014 – 1.Halbjahr

Im ersten Halbjahr bauten die beiden Spitzenreiter mit einer Auflösung von 1366×768 und 1920×1080 Pixel ihre Positionen weiter aus. 27,5 Prozent aller Seitenaufrufe wurden mit einer dieser Auflösungen durchgeführt. An dritter Stelle befand sich erstmalig eine Hochkantauflösung von 768×1024 Pixel.

Auf den Positionen 4, 5, 6 und 7 waren wieder Querauflösungen. Hier tauchte auch der Spitzenreiter von 2010 auf, die Auflösung 1280×1024 Pixel.

PlatzSeitenauflösungProzentPlatzSeitenauflösungProzent
1.1366×76815,24%10.1024×7683,76%
2.1920×108012,41%11.320×4803,71%
3.768×10249,83%12.360×6403,44%
4.1280×8009,14%13.720×12803,06%
5.1280×10248,51%14.1920×12002,88%
6.1680×10506,83%15.480×8002,59%
7.1600×9006,53%16.1536×8641,55%
8.320×5684,96%17.1280×7201,08%
9.1440×9004,50%
Grafik zur Seitenauflösung von Websites 2014

Mit welchen Bildschirmauflösungen haben 2014 Besucher die Webseiten angesehen.

Seitenbreite von Websites 2013

Bereits 2013 stellte ich fest, dass die Auflösungen vielfältiger werden. Dieser Trend war auch 2012 schon zu sehen, doch in der Zwischenzeit schienen zwei Formate immer mehr zu dominieren. Dies war zum einen der mobile Bereich, mit seinen Auflösungen von 320 x 480 Pixel und 320 x 568 Pixel (Auflösung von iPhones). Hinzu kam das am häufigsten genutzte Format von 1366 x 768 Pixel, einem 16:9 Format, dass von Breitbildmonitoren stammt.

Dazwischen gesellten sich Auflösungen von 1680 x 1050 Pixel, 1600x 900 Pixel und dem Klassiker von 1024 x 768 Pixel, der aber nur noch von 6,64 Prozent der Nutzer genutzt wurde. Etwas weiter oben in der Liste fand man dafür ein anderes Format, die Auflösung von 768 x 1024 Pixel.

Die Zeiten, in denen man sich nur einer bestimmten Auflösung widmete, waren bereits 2012 vorüber. Seit diesem Jahr steht fest, dass man seine Website auf die verschiedenen Anzeigemöglichkeiten einstellen und über ein responsives Webdesign nachdenken sollte. Als Beispiel empfehle ich einen Blick auf die neuen YouTube Kanäle zu werfen. Diese wurden 2012 für alle gängigen Formate umgestellt, sodass man sich heute die Videos auf jedem Gerät in der entsprechenden Qualität ansehen kann.

PlatzSeitenauflösungProzentPlatzSeitenauflösungProzent
1.1366×76814,56%10.1440×9005,24%
2.1920×108011,44%11.1920×12002,81%
3.1280×80010,18%12.720×12802,10%
4.1280×10249,89%13.320×5681,80%
5.1680×10507,41%14.480×8001,68%
6.768×10246,99%15.1024×6001,60%
7.1600×9006,81%16.1280×7201,19%
8.1024×7686,64%17.Rest4,01%
9.320×4805,65%
Grafik zur Auflösung von Websites 2013

Welche Seitenauflösung nutzten die Besucher von Webseiten 2013 am meisten?

Seitenbreite von Websites 2012

2012 surften die meisten Menschen noch mit großen Auflösungen im Web. Diese dominierten die Ergebnisse. Allerdings war der Anteil der 1024er Auflösung erheblich gesunken. 2011 befanden sich diese mit 13 Prozent noch auf dem dritten Platz. Ein Jahr später fand man die erste Auflösung mit einer Seitenbreite von 1024 Pixel erst auf dem sechsten Platz mit einer Nutzung von nur 8,86 Prozent. Daraus konnte ich schlussfolgern, dass die erste Generation von 17 Zoll TFT Monitoren in der Zwischenzeit von größeren Monitoren verdrängt wurde.

Auf den Plätzen 9 und 10 fand man Auflösungen von 320×480 Pixel und 768×1024 Pixel. Bei diesen Auflösungen handelte es sich um Smartphones, iPhones und Tablet PCs. Im Durchschnitt riefen 2012 rund 8,25 Prozent der Nutzer die Webseiten mit diesen Geräten auf. Verglich man die Zahlen mit 2011, war der Zuwachs erheblich. 2011 befand sich noch keine dieser Auflösungen in den Top 10.

PlatzSeitenauflösungProzentPlatzSeitenauflösungProzent
1.1280×102415,96%7.1440×9007,32%
2.1366×76815,43%8.1600×9005,70%
3.1920×108014,45%9.320×4804,39%
4.1680×105011,35%10.768×10243,86%
5.1280×8009,92%11.1920×12002,75%
6.1024×7688,86%
Grafik zur Auflösung Websites 2012

Welche Seitenauflösung nutzten die Besucher von Webseiten 2012 am meisten?

Seitenbreite von Websites 2011

Die meisten Besucher surften 2011 im Internet mit einer Seitenbreite von 1280 Pixel. Der Anteil der Besucher, die mit dieser Auflösung unterwegs waren, lag bei 33 Prozent. Gleich danach folgten Nutzer mit einer Auflösung von 1024 Pixel, deren Anteil bei 15 Prozent lag. Nur einen Prozentpunkt niedriger lagen die Nutzer, die eine Seitenbreite von 1680 Pixel verwendeten.

PlatzSeitenauflösungProzentPlatzSeitenauflösungProzent
1.1280×102420%6.1366×76810%
2.1680×105014%7.1440×9008%
3.1024×76813%8.1600×9005%
4.1280×80013%9.1920×12004%
5.1920×108011%10.1024×6002%
Webseitenbreite 2011

Die populärsten Auflösungen von Webseiten in 2011

Seitenbreite von Websites 2010

2010 wertete ich erstmalig die Breite von Webseiten aus. Hierbei nutzte ich die Zahlen von einem Portal mit knapp 36.000 Besuchern über 4 Monate hinweg. Damals verwendeten 17,9 Prozent eine Auflösung von 1280×1024 Pixel. 14,82 Prozent surften mit einer Auflösung von 1024×768 Pixel auf der Seite. Unter den ersten zehn meist genutzten Auflösungen befand sich keine Seitenbreite unter 1024 Pixel, was immerhin rund 85 Prozent aller Besucher waren. Rechnete man noch die restlichen Besucher hinzu, die mit mindestens dieser Auflösung auf die Webseite kamen, kam man auf rund 95 Prozent.

Da 2010 kaum ein Besucher mit einer kleineren Seitenbreite als 1024 Pixel im Web unterwegs war, empfahl es sich, die Breite einer Webseite auch auf diesen Wert festzulegen. Aufgrund der Scrollleiste auf der rechten Seite, sollte man aber 2010 noch darauf achten, eine Breite von 950 Pixel nicht zu überschreiten. Denn hätte man die 1024 Pixel komplett ausgeschöpft, wäre ansonsten im unteren Bereich des Browsers, eine weitere Scrollleiste erschienen.

Webseitenbreite 2010

Die populärsten Auflösungen von Webseiten in 2010

Hast Du Fragen?

Vielen Dank erst einmal für das Lesen des Beitrages. Ich hoffe, er konnte dir weiter helfen.

Hast du Fragen zu diesem Beitrag, dann schreibe diese bitte in die Kommentare. Ich werde sie gerne beantworten.

Autor: Ronny Siegel

Ich beschäftige mich mit Content (Texte, Video, Bilder) und die Conversionoptimierung bei AdWords. Dabei werte ich aus woher die Zugriffe kommen und mit welchen Maßnahmen man Zugriffe, Aufenthaltsdauer und Conversion verbessern kann. Wenn Sie mehr über meine Aktivitäten erfahren möchten, folgen Sie mir einach bei Google+ oder Twitter.

11 Kommentare

  1. Zum Druck kann ich leider nichts sagen. Dafür fehlt mir das Know-How. Im Web gilt derzeit jedoch, die Webseite sollte auf möglichst vielen Endgeräten ordentlich und schnell angezeigt werden.

  2. Im Web nimmt man üblicherweise 72 dpi – für den Druck kommt es drauf an. Ein allgemeiner Richtwert für den heimischen Druck sind 300 dpi.
    Je nach Druckart, Papier und Verwendungszweck kann die Auflösung höher oder auch geringer sein.

    Ein 1/18 Plakat braucht z.B. eine geringere Auflösung, da es von der Ferne betrachtet wird, als eine Hochglanzbroschüre, die man direkt vor der Nase hat.

  3. Na ihr seid ja lustig.
    Ihr schreibt die Webseite muss sich heutzutage automatisch anpassen und dann füttert ihr meinen Monitor mit einer festen Seitebreite, die gerade einmal zu 40 % meinen Monitor mit Informationen versieht!

  4. Hallo Stefan, danke dir für die Info, aber ich kann den Fehler leider gerade gar nicht nachvollziehen. Laut unseren Heatmaps wird der Inhalt auf allen Endgeräten sauber angezeigt. Auch Eigentests zeigen den Inhalt sauber an. Kann es sein, dass du in deinem Browser die Vergrößerung des Webseiteninhalts aktiviert hast?

  5. ähm, kan es sein, daß hier 2 Begriffe vertauscht/verwechselt werden? So wie ich das verstehe,
    hast Du die Bildschirmauflösung ausgelesen (screen.width, screen.height), aber nicht
    die Breite einer Website in px.
    Auf einem 1920×1080-Bildschirm kann eine Website 960px, 100px, 860 px, xxx px usw. breit sein.
    Oder habe ich einen Denkfehler?

  6. Ich beschäftige nich gerade selber mit dem Thema Mobile Seiten.
    Und ich muss sagen ich vestehe es nicht.
    Ein Telefon mit 1080px und ein Monitor mit 1080 px ist doch nicht gleich.Wenn ich doch eine Seitenbreite zb fix auf 900 px setze, wird die am Desktop wunderbar aussehen. Auf dem tablet (>15″) vielleicht auch noch. Auf dem smartphone bestimmt nicht mehr. Weil ich da 900px zb auf 8cm bzw. 15 cm habe, die Pixeldichte ist also viel höher. Die Idee ist nun sowas wie eine Weiche zu setzen. Aber was weiß ich > 12 “ desktop.css und <12" mobil.css
    Aber dann habe ich uu user mit ner bescheidenen Auflösung…

  7. Hallo Ollie,
    vielleicht hilft dir der folgende Ansatz weiter, denn ich in den letzten Tagen erst gehört habe. Für die Ausgabe der jeweiligen Auflösung, nutzt man den Browser. Dieser weiß, in welcher Auflösung man gerade im Netz unterwegs ist und würde dann die entsprechenden Daten ziehen. Besonders interessant ist dies bei Bildern, welche in verschiedenen Auflösungen vorhanden sein sollten, um das Datenvolumen je nach Verbindung zu minimieren.

    Es wurde zudem empfohlen eine Maximalauflösung zu definieren, wobei ich eher empfehle alle drei derzeit verschiedenen Ausgabegeräte zu unterscheiden.
    Desktop = Große Auflösung, quer und Navigation mit Maus
    Tablet = Große Auflösung, hoch und quer und Navigation mit Touch
    Smartphone = Kleine Auflösung, hoch und quer und Navigation mit Touch

    Hilft dir das erstmal weiter?

  8. Danke für die schnelle Antwort.
    Ich versuche es mal anders.
    Große Auflösung hat ein Handy heute doch auch. Aber die Bildschrimgrößen sind unterschiedlich.
    Wenn ich anhad von Auflösung das entsprechende css wähle, woher soll der Browser dann wissen, welches er nehmen soll? 1080x irgendwas auf em Handy, 1080 x irgendwas auf dem tablet und 1080 x irgendwas auf dem desktop. Dann die 4″ Handys und die 5″ Handys, 10″ tablets und 20″ tablets. Alle beherschen uu full hd.
    Es gibt screen-with als media-type.. Max-width: 1200 px.
    Das passt doch nicht. Oder? Da müsste sowas wie 5cm stehen oder von mir aus 5″…
    1200px auf 5″ sind doch anders wie 1200px auf 21″

  9. Ich habe noch mal ein bisschen zu deiner Frage recherchiert und folgenden Lösungsansatz gefunden.

    Die Lösung könnte der Meta-Eintrag: „viewport“ sein. Mit diesem gibst du an, welche Auflösung gewählt werden soll. Und soweit ich dies sehe, wird dieser Eintrag von allen gängigen Browsern unterstützt.

    Eine schöne Anleitung dazu habe ich auf dieser Seite gefunden: http://www.html-seminar.de/viewport-richtig-setzen.htm

    Hilft dir das weiter?

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


Newsletter abonnieren (Jederzeit wieder abbestellbar)

Durch das Fortsetzen der Benutzung dieser Seite, stimmst du der Benutzung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen", um Ihnen das beste Surferlebnis möglich zu geben. Wenn Sie diese Website ohne Änderung Ihrer Cookie-Einstellungen zu verwenden fortzufahren, oder klicken Sie auf "Akzeptieren" unten, dann erklären Sie sich mit diesen.

Schließen