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

In den letzten 6 Monaten hat sich nicht viel verändert, zu mindestens wenn man sich die ersten 5 Plätze ansieht. Zwar haben sich die prozentualen Werte mal etwas nach oben oder unten, aber ansonsten ist alles beim Alten geblieben.

Welche Auflösungen werden derzeit am meisten genutzt?

Interessant ist dagegen sich einmal die Reihenfolge der verschiedenen Auflösungen in Verbindung mit den Endgeräten anzusehen. Diese würde dann für die ersten 10 Plätze wie folgt lauten: Mobil, Desktop, Desktop, Tablet, Desktop, Mobil, Mobil , Desktop, Desktop, Desktop.

Dies zeigen auch die Zahlen, wenn man sich einmal den Vergleich ansieht, mit welchen Endgeräten die Nutzer die Webseiten aufrufen.

Platz Seitenauflösung Prozent Platz Seitenauflösung Prozent
1. 360×640 16,76% 9. 1600×900 5,20%
2. 1920×1080 13,80% 10. 1280×1024 4,93%
3. 1366×768 10,34% 11. 1440×900 3,61%
4. 768×1024 9,60% 12. 1920×1200 2,93%
5. 1280×800 7,29% 13. 1024×768 2,14%
6. 375×667 6,32% 14. 1536×864 1,94%
7. 320×568 5,26% 15. 1280×720 1,04%
8. 1680×1050 5,24% 16. Rest 3,59%
Mit diesen Auflösungen haben die Besucher die Webseiten im 2. Halbjahr 2015 besucht.
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 15 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 finden Sie Ihre 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 – 2.Halbjahr

Im letzten halben Jahr gab es erstmals bei meinen Auswertungen eine dominierte Mobilauflösung. Google hatte dies bereits 2 Jahre zuvor vorausgesagt. In dieser Zeit nahm

die Mobilauflösung 360×640 ordentlich an Fahrt auf und schob sich an den Spitzenplatz. 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.

Platz Seitenauflösung Prozent Platz Seitenauflösung Prozent
1. 360×640 14,84% 9. 1600×900 5,02%
2. 1920×1080 12,72% 10. 375×667 4,79%
3. 1366×768 11,20% 11. 1440×900 3,75%
4. 768×1024 9,78% 12. 1920×1200 3,02%
5. 1280×800 7,63% 13. 1536×864 1,74%
6. 320×568 6,33% 14. 1024×768 1,59%
7. 1280×1024 5,70% 15. 320×480 1,55%
8. 1680×1050 5,59% 16. Rest 4,75%
Webseiteauflösung 2. Halbjahr 2015
Mit diesen Auflösungen haben die Besucher die Webseiten im 2. Halbjahr 2015 besucht.

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üßt. 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.

Platz Seitenauflösung Prozent Platz Seitenauflösung Prozent
1. 1920×1080 12,87% 10. 1440×900 4,00%
2. 1366×768 12,57% 11. 1024×768 3,32%
3. 360×640 8,71% 12. 1920×1200 2,55%
4. 1280×1024 8,37% 13. 1536×864 2,19%
5. 1280×800 8,01% 14. 375×667 1,73%
6. 768×1024 7,46% 15. 320×480 1,64%
7. 1600×900 6,76% 16. 1280×720 1,54%
8. 1680×1050 6,36% 17. 720×1280 1,34%
9. 320×568 4,04% 18. 480×800 1,25%
19. Rest 5,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.

Platz Seitenauflösung Prozent Platz Seitenauflösung Prozent
1. 1366×768 13,14% 10. 1440×900 4,31%
2. 1920×1080 12,34% 11. 320×568 3,78%
3. 1280×1024 9,81% 12. 1920×1200 2,28%
4. 1280×960 8,49% 13. 320×480 2,27%
5. 768×1024 7,47% 14. 1536×864 1,95%
6. 1600×900 7,18% 15. 720×1280 1,69%
7. 1680×1050 6,88% 16. 1280×720 1,53%
8. 1024×819 5,51% 17. 480×800 1,48%
9. 360×640 4,87% 18. Rest 5,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.

Platz Seitenauflösung Prozent Platz Seitenauflösung Prozent
1. 1366×768 15,24% 10. 1024×768 3,76%
2. 1920×1080 12,41% 11. 320×480 3,71%
3. 768×1024 9,83% 12. 360×640 3,44%
4. 1280×800 9,14% 13. 720×1280 3,06%
5. 1280×1024 8,51% 14. 1920×1200 2,88%
6. 1680×1050 6,83% 15. 480×800 2,59%
7. 1600×900 6,53% 16. 1536×864 1,55%
8. 320×568 4,96% 17. 1280×720 1,08%
9. 1440×900 4,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.

Platz Seitenauflösung Prozent Platz Seitenauflösung Prozent
1. 1366×768 14,56% 10. 1440×900 5,24%
2. 1920×1080 11,44% 11. 1920×1200 2,81%
3. 1280×800 10,18% 12. 720×1280 2,10%
4. 1280×1024 9,89% 13. 320×568 1,80%
5. 1680×1050 7,41% 14. 480×800 1,68%
6. 768×1024 6,99% 15. 1024×600 1,60%
7. 1600×900 6,81% 16. 1280×720 1,19%
8. 1024×768 6,64% 17. Rest 4,01%
9. 320×480 5,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.

Platz Seitenauflösung Prozent Platz Seitenauflösung Prozent
1. 1280×1024 15,96% 7. 1440×900 7,32%
2. 1366×768 15,43% 8. 1600×900 5,70%
3. 1920×1080 14,45% 9. 320×480 4,39%
4. 1680×1050 11,35% 10. 768×1024 3,86%
5. 1280×800 9,92% 11. 1920×1200 2,75%
6. 1024×768 8,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.

Platz Seitenauflösung Prozent Platz Seitenauflösung Prozent
1. 1280×1024 20% 6. 1366×768 10%
2. 1680×1050 14% 7. 1440×900 8%
3. 1024×768 13% 8. 1600×900 5%
4. 1280×800 13% 9. 1920×1200 4%
5. 1920×1080 11% 10. 1024×600 2%
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

Haben Sie Fragen?

Vielen Dank für das Lesen des Beitrages. Ich hoffe, er konnte Ihnen weiterhelfen.

Wenn Sie Fragen zu diesem Beitrag haben, dann schreiben Sie diese bitte in die Kommentare. Ich werde sie gerne beantworten.

Autor: Ronny Siegel

Hi, ich bin Ronny, einer von den beiden Geschäftsführern und Inhabern der Conversion Junkies. Ich beschäftige mich vor allem mit Inhalten (Content) und wie man diese verbessern kann. Zudem kenne ich mich sehr gut mit AdWords aus und finde dort immer neue Infos, die mir auch bei den Inhalten helfen. Und ich bin der Meinung, nichts ist besser als zu testen, weswegen ich mir bei den Inhalten und den AdWords Anzeigen auch das Nutzerverhalten gerne ansehe und auswerte. Wenn Sie Fragen zu diesem Beitrag haben, posten Sie die Frage bitte in die Kommentare. Ich beantworte diese sehr gerne.

14 Gedanken zu „Seitenbreite von Webseiten – Welche Größe und Breite für eine Website?“

    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.

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

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

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

  3. ä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?

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

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

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

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

  6. @Ollie
    Die großen Auflösungen von Handys sind im Prinzip irrelvant. Wie Ronny schon schrieb, muss man für mobile Seiten immer den (von Apple eingeführten und eigentlich inoffiziellen) Viewport-Metatag mitgeben, den (trotzdem) nahezu alle Smartphones unterstützen – wahlweise auch die zukünftig offizielle @viewport-Rule via CSS – derzeit nur für IE Mobile.

    Modernere Smartphones haben eine relativ hohe Pixeldichte (PPI=Pixel per Inch) und eine hohe Auflösung (Physical Resolution). Die real zur Verfügung stehende Pixelanzahl (Logical Resolution) fürs Webdesign ist aber viel kleiner. Berechnet wird sie, indem man die Hardware-Pixel (Physical Resolution) durch die Pixel-Density des jeweiligen Gerätes teilt. Dann kommen im Portrait-Mode (Hochformat), meist Werte zwischen 320-480px raus. Das sind die gängigen Smartphone-Dimensionen.

    Bestes Beispiel ist das Ipad. Das erste hatte im Landscape-Modus (Querformat) eine Auflösung von 1024×768 und eine Pixel-Density von 1. Das später veröffentlichte Ipad Retina hat eine Auflösung von 2048×1536 und eine Pixel-Density von 2. Beide haben aber die gleiche virtuelle Auflösung von 1024×678 (Logical Resolution) und waren 9.7″ groß. Die Retina-Version hat also einfach nur doppelt so viele Hardware-Pixel pro virtuellem Pixel in die gleichen Dimensionen gequetscht. Die hohe Auflösung spielt für die Webdesign-Abmessungen jedoch keine Rolle – die finden im Hintergrund aber Anwendung bei Schriftkantenglättung und der Pixeldichte bei Bildern und Videos. Die hohe Auflösung sorgt sozusagen nur dafür, das alles superscharf ist, da mehr Hardwarepixel pro virtuellem Pixel zur Verfügung stehen.

    Die folgende Tabelle von Google hat diese Werte auch für alle gängigen Geräte aufgelistet:
    https://design.google.com/devices/

    Warum ist das so? Hat schlicht was mit der Lesbarkeit zu tun. Kein Mensch könnte die Schrift auf einem IPhone 6+ (1080×1920) noch entziffern. Deshalb werden praktisch alle mobilen Geräte im Verhältnis zu ihrer Zollgröße und Auflösung so gestaltet, dass die Schriftgrößen im Verhältnis zu Entfernung des Betrachters immer relativ identisch zu aktuellen Desktop-Größen sind. Klingt komplizierter als es ist. Muss man auch nicht wirklich verstehen – wollt nur damit ausdrücken, dass alles seinen Sinn hat. ^^

    Da sich Smartphone/Tablet-Größen also immer an der Schriftgröße orientieren, hier noch ein kleines Rechenbeispiel:
    Auf Desktop-Rechnern war lange Zeit 12px der Standard für Schriften – bei durchschnittlich 1024×768 auf 19″. Inzwischen wuchsen die Auflösungen auf 1920×1080 und die durchschnittlichen Zollgrößen liegen bei 27″ – aber auch die Schriftgrößen wuchsen inzwischen auf 14-16px im Schnitt. Die alten 12px kommen so manchem Leser heutzutage einfach zu klein vor. Auch auf Smartphones sind 14-16px die gängige Schriftgröße für Fließtexte, was auch von Apple und Google so empfohlen wird.

    Rechnen wir mal spaßeshalb nach via http://pixeldensitycalculator.com/

    800×600 auf 17″ ergibt 58.82ppi (Desktop ~2005)
    1024×768 auf 19″ ergibt 67.37ppi (Desktop ~2009)
    1920×1080 auf 27″ ergibt 81.59ppi (Desktop ~2015)
    375×667 auf 4.7″ ergibt 162.81ppi (IPhone 6)
    1024×768 auf 9.7″ ergibt 131.96ppi (Ipad)
    1366×1024 auf 12.9 ergibt 132.34ppi (IPad Pro)

    Da der mobile Nutzer sein Gerät aber deutlich näher vor der Nase hat (Smartphone ~33cm; Tablet ~40cm), als der durchschnittliche Desktop-User (~65cm), kann man von den mobilen Geräten durchschnittlich nur 51% nehmen (100/65*33) – bei Tablets sinds 61% (100/65*40), um das Abstandsverhältnis wieder auszugleichen. Muss man sich vorstellen wie bei Büchern und Zeitschriften. Da gibt es ja auch gängige Schriftgrößen, weil man weiß, wie weit das Auge des Leser im Schnitt von den Seiten entfernt ist. Bei mobilen Geräten ist es nicht anders. Deshalb ergeben diese Prozentwerte dann beim Iphone eine optische PPI von 80.49 (51% von 162.81ppi) und beim Ipad 80.72 (61% von 132.34ppi) und nähern sich damit gängigen Desktopgrößen an.

    Wer jetzt die „optimale“ Schriftgröße für das jeweilige Endgerät herausfinden will, teilt die Werte einfach nochmal durch 5.5.

    800×600 auf 17″ ergibt 10.69px (Desktop ~2005)
    1024×768 auf 19″ ergibt 12.24px (Desktop ~2009)
    1920×1080 auf 27″ ergibt 14.83px (Desktop ~2015)
    375×667 auf 4.7″ ergibt 15.02px (IPhone 6)
    1024×768 auf 9.7″ ergibt 14.63px (Ipad)
    1366×1024 auf 12.9 ergibt 14.67 (IPad Pro)

    Und obwohl die berechneten Schriftgrößen hier total unterschiedlich sind (10.69px bis 15.02px), wirken sie im Verhältnis zur Bildschirmgröße und der Entfernung des Betrachters zum Gerät eigentlich immer gleich groß. Deshalb ist es auch so knifflig im Webdesign die passenden und gut lesbaren Schriftgrößen für die jeweiligen Endgeräte zu finden – es gibt eben nicht DIE ideale Schriftgröße, die alle Geräte abdeckt. Bei mobilen Geräten lässt sich das über die @Media-Queries aber relativ gut lösen, da man über min/max-resolution (IE/Chrome/Firefox/Opera) bzw min/max-device-pixel-ratio (Safari/Blackberry) die PPI eingrenzen und so passende Schriftgrößen ausgeben kann.

    Kniffliger ist es bei Desktopgrößen, da man im Gegensatz zu den mobilen Geräten nicht weiß, ob der Nutzer trotz identischer Auflösung einen 19″ oder 30″ Monitor vor der Nase hat. Je kleiner der Monitor, desto größer wirkt die Schrift – folglich, je größer der Monitor, desto kleiner wirkt die Schrift. Da muss man einfach Kompromisse suchen und die goldene Mitte wählen. Man sieht aber gut, dass moderne Desktop-Formate und moderne Smartphones praktisch fast gleiche Schriftgrößen haben, was allein durch die Screengröße und den Abstand des Gerätes erreicht wird. Maße und Auflösungen von mobilen Geräten sind also kein Zufall, sondern schlicht reine Mathematik.

    Da das praktisch ein mathematisches Idealmaß ist, wird sich an den Smartphone-Dimensionen auch nicht mehr viel ändern (können) – man kann eben nur noch mehr physische Pixel reinquetschen – was aber selbst aus heutiger Sicht keinen Sinn mehr macht. Die oben genannten Werte für die Apple-Geräte sind ja bereits durch ihre Pixel-Density geteilt. IPhone 6 und Ipad Pro haben real also bereits über 300ppi. Für das menschliche Auge ist ab 300ppi praktisch Schluss. Ob das Gerät also 300ppi, 600ppi oder 1200ppi hat – auf 33cm Entfernung wird keiner mehr einen optischen Unterschied wahrnehmen können.

    Am einfachsten ist es also mindestens 14px+ (besser 0.92em) für Schriften zu verwenden um primär mobile Geräte und aktuelle Desktopgrößen zu bedienen. Und optional auf 12px zu schalten, wenn das Gerät zwischen 500 und 1024px Device-Width und unter 130ppi hat, was dann im Grunde nur ältere Desktop-Monitore sein können. Ansonsten gilt immer die Regel: lieber etwas zu groß, als generell zu klein. 😉

  7. Also… danke Euch für die Kommentare.
    SammyFox,,, Du hast Dich echt ins Zeug gelegt.
    Ronny… nach ja…

    Mich würde es einfach nur wundern, wenn man sich für eine Grösse an PX für eine HP entscheiden muss.
    Was für Wunschgrössen am Desktop würdet Ihr mir vorschlagen.

    1. Hallo Marcel,

      ich würde dir in der Zwischenzeit empfehlen, deine Webseite in erster Linie an Mobilgeräte anzupassen (Mobil first). Anschließend kannst du im Desktopbereich der Seite links und rechts weitere Elemente hinzufügen. Aber dies empfehle ich nur minimal.

      Unsere Auswertungen zeigen nämlich immer wieder, der Nutzer fokussiert sich auf den Content und lässt alles was links und rechts ist außer acht.

      Hier noch ein paar Breitenempfehlungen:

      Mobil: Volle Breite auch wenn man das Gerät dreht
      Tablet: Volle Breite im Hochkantmodus. Eingeschränkte Breite im Quermodus
      Desktop: Eingeschränkte Breite mit Rand (maximal 800 Pixel für Contentbereich)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *