Wir alle verwenden 72 DPI als De-facto-Standard bei der Erstellung von Webgrafiken (eigentlich ist „PPI“ das passendere Akronym, wird aber selten verwendet). Dies war früher die tatsächliche Auflösung von Monitoren, aber im Laufe der Jahre ist dies nicht mehr der Fall. Nehmen Sie meinen iMac. Der Bildschirm ist horizontal 22,5 Zoll breit und hat 1920 Pixel. Das ergibt tatsächlich etwa 85 Pixel pro Zoll, nicht 72. Wenn wir Websites auf demselben Computer/Monitor entwerfen und testen, sieht alles gut aus, genau wie wir es entworfen haben. Aber wenn wir zu einem anderen Computer mit einer anderen Auflösung wechseln, kann es zu dramatischen Unterschieden kommen!
Beim Betrachten eines Designs auf einem Monitor mit einer höheren Auflösung wird das Design kleiner aussehen.
Beim Betrachten eines Designs auf einem Monitor mit einer niedrigeren Auflösung wird das Design größer aussehen.
Sagen wir, ich gestalte eine schöne Website, die auf meinem 85 PPI Monitor 800 Pixel breit ist. Dann betrachte ich dasselbe Design auf einem Monitor mit 100 PPI. Diese gleichen 800 Pixel nehmen auf dem Monitor mit höherer Auflösung weniger physische Zoll ein, da die Pixel buchstäblich kleiner sind. Es sind mehr davon in denselben Zoll gepackt wie auf meinem ursprünglichen Monitor. Das Gleiche gilt umgekehrt, wenn ich auf einem 72 PPI Monitor nachsehen würde, würde das Design größer erscheinen.
Dies ist keine Fantasie oder Spekulation mehr. Leser Denzil Rowe hat mich auf einen Artikel auf Apple Insider aufmerksam gemacht, in dem Apple darüber spricht, wie dieses Problem in das Betriebssystem selbst Einzug hält. Es sind nicht nur das Web, die diese Probleme haben, sondern buchstäblich alles, was auf Ihrem Monitor erscheint.
Einige neue Macs werden mit Monitoren mit über 100 PPI ausgeliefert. Der Unterschied zwischen 100 PPI und 72 PPI ist ziemlich dramatisch. Alles, was beim Betrachten eines Designs auf einem 72 PPI Monitor gerade noch klein genug ist, wird auf einem 100 PPI Display wahrscheinlich völlig unlesbar klein sein.
Was ist also die Lösung? Kurzfristig sollten Sie sich einfach des Unterschieds bewusst sein und Dinge nicht zu klein gestalten, wenn Sie noch einen älteren 72 PPI Monitor verwenden. Langfristig: Auflösungsunabhängigkeit.
Dave Hyatt schrieb vor ein paar Jahren ausführlich über das Thema.
Der natürliche Weg, dieses „High-DPI“-Problem zu lösen, ist die automatische Vergrößerung von Inhalten, damit sie für den Benutzer lesbar und leicht sichtbar bleiben. Es reicht natürlich nicht aus, einfach einen angenehmen Standard zu wählen, da die Präferenzen einzelner Personen stark variieren können ... Die vollständige Lösung für dieses Problem besteht daher darin, der Benutzeroberfläche die Möglichkeit zu geben, sich zu skalieren, wobei der Skalierungsfaktor vom Benutzer konfigurierbar ist. Das bedeutet, dass Webinhalte zoombar sein müssen, wobei die gesamte Seite entsprechend der vom Benutzer gewählten Vergrößerung korrekt skaliert wird.
Mit anderen Worten, Zoomen ist Teil der Lösung, und wir haben dies als Trend in allen neueren Versionen der wichtigsten Browser gesehen. Das Problem beim Zoomen, wie beim ersten Mal deutlich wird, ist, dass Bilder schlecht aussehen, wenn man sie größer als ihre Erstellung vergrößert.
SVG (Scalable Vector Graphics) ist der wahrscheinliche Anwärter für ein Bildformat, das uns helfen wird, Skalierungsprobleme zu bekämpfen. Aber mit neuen Formaten entstehen auch die üblichen Probleme. Werden alle Browser sie unterstützen und auf die gleiche Weise? Muss sich die CSS-Spezifikation ändern, um sie zu unterstützen? Wie wird sie abwärtskompatibel sein? Und so weiter.
Daves Artikel zeigt Codebeispiele, wie wir eine „hochauflösende“ Version unserer Websites für Browser haben könnten, die dies unterstützen.
div {
background: url(tiger-low.png);
background: url(tiger-high.png) (100px 100px);
}Die Zukunft ist da! Obwohl es sich anfühlt, als ob es noch eine Weile dauern wird, bis das Mainstream-Web bereit ist, damit sich alltägliche Designer um diese Dinge kümmern.
In einem verwandten Hinweis: Wussten Sie, dass Pixel in CSS nicht unbedingt gleich einem Bildschirm-Pixel sind?
Der Apple Insider Artikel ist über 2 Jahre alt.
Dies ist eine großartige Diskussion, denn wie Sie sagen, ist sie *jetzt* relevant.
Es gibt noch ein weiteres „Auflösungsunabhängigkeits“-Schema, das ich angesprochen sehen möchte. Ich wechsle von einem 1024×768 Monitor zu einem neueren, größeren. Derzeit bei dieser niedrigeren Auflösung weiß ich, wie es ist, wenn Seiten nicht passen, schwerer zu lesen sind usw. Es ist ein Bildschirm mit sehr niedriger DPI, was die Sache noch schlimmer macht. Das schlimmste Problem von allen ist jedoch: Er ist nicht Breitbild, und der neue wird es sein.
Wie geht man damit um? Ein Stil für Breitbild, um den horizontalen Bildschirmbereich zu nutzen, und einer für 4:3 Monitore? Das wäre großartig.
Die Bildschirmauflösung scheint bei jedem Kunden ein wiederkehrendes Thema zu sein. Das und der Browser-Cache. Ich hoffe, dass SVGs in Zukunft mehr Unterstützung erhalten.
Eine kleine Sache, die man sich merken sollte: Monitore ändern nicht die Pixelgröße, wenn Sie die Auflösung ändern. Sie interpolieren auf eine von Ihnen gewählte Auflösung, die entweder größer oder kleiner als die native Auflösung des Monitors ist, und lassen es so aussehen, als hätten sie die Auflösung geändert. Die native Auflösung ist die wahre Pixelgröße eines jeden Monitors und liefert typischerweise das schärfste Bild. Daher ist die Berücksichtigung von PPI genauso schwierig, wie die Auflösung zu kennen, die Ihre Besucher typischerweise wählen. Es ist ein Best-Guess-Szenario.
Dies wird ein großes „Dilemma“ für die Zukunft sein, wenn auflösungsunabhängige Displays und Betriebssysteme aufkommen. Lässt mich fragen, ob wir Websites mit Layouts in Em gestalten sollten, die besser skalierbar sind? Die alten Fluid-Designs der letzten Jahre könnten die Zukunft sein. Nun ja, was nicht passt, wird passen. Das Layout einer Website ist immer eine Übung in der Auswahl dessen, was wir für die größte Anzahl von Benutzern am besten halten. Ein interessantes Thema! Danke, dass Sie es angesprochen haben!
Das größte Problem nach der Bildschirmauflösung sind für mich die Farbprofile in Bildern. Es ist für mich schwierig, das richtige Farbprofil zu finden. Denn wenn ich zum Beispiel #34ff23 eingebe, sieht die Farbe auf verschiedenen Displays anders aus, und wenn das Display dasselbe ist, dann unterschiedlich auf XP, Linux, OS X und Vista. Wussten Sie, dass Safari Farben für PNGs anders rendert als andere Browser? Ich behebe das mit einem CSS-Hack zur Farbkorrektur oder versuche, kein PNG zu verwenden.
Diese ganze Problematik wurde mir nicht durch das Betrachten einer meiner Websites auf einem Monitor mit sehr HOHER Auflösung bewusst, sondern durch das Betrachten auf dem Monitor meiner Freunde Eltern. Sie hatten ihre Auflösung so niedrig eingestellt (sie sind in ihren 60ern), dass jeder Buchstabe etwa einen Viertel Zoll groß war. Jede Website erforderte viel horizontales und vertikales Scrollen.
Gibt es eine Möglichkeit, nicht die native Auflösung, sondern die effektive Auflösung des Monitors eines Benutzers zu erkennen?