Display-Auflösungen


1. Was ist eine Auflösung?
Auflösung nennt man die Angabe der
  • Anzahl der Bildpunkte in der Breite und der
  • Anzahl der Bildpunkte in der Höhe.
Die Anzahl der Bildpunkte in Höhe und Breite ist unterschiedlich von Display zu Display (z.B. FullHD, UHD).

2. Was bedeutet ppi?
ppi steht für pixel per inch, d.h. Bildpunkte pro Zoll (2,54cm). Die Angabe der ppi ist also die Aussage, wie viele Bildpunkte sich auf einem Display auf der Breite von 2,54 befinden. Je mehr, desto genauer kann man dort etwas darstellen. Möglicherweise werden aber auch Schriftarten, Fotos, Icons des Betriebssystems oder andere Objekte kleiner als üblich angezeigt.

3. Welche Zusammenhänge gibt es zwischen ppi, Auflösung, Größe des Displays und der Pixeligkeit der Anzeige?
  • Je größer das Display bei gleicher Auflösung, desto eher sieht man die "Treppenstufen".
  • Je größer der Wert für ppi, desto weniger pixelig sollte das Bild sein und Treppenstufen nicht mehr erkennbar.

4. Warum ist es interessant, sich vor der Erstellung von HTML-Seiten zu überlegen, auf welchen Displays die Seiten überhaupt angezeigt werden sollen?
Es gibt verschiedene Auflösungen! Einige Seiten sind so groß, dass diese bei geringer Auflösung eines Displays gar nicht komplett angezeigt werden können - und das ist nicht gut.

Abgeleitete Design-Richtlinien

Webseiten werben heutzutage damit, dass sie auf allen Displays in gleicher Weise funktionieren.
Damit Webseiten auch auf mobilen Geräten wie Smartphones und Tablets angezeigt werden können, muss man sich bereits beim Entwurf der Seiten ein möglichst reduziertes Design einfallen lassen.
  • Seiten möglichst nicht scrollen,
  • Inhalte für eine reduzierte Auflösung (z.B. für 800x600 Punkte) bereitstellen,
  • wenige übersichtliche Elemente,
  • logisch angeordnet,
  • gut lesbar, keine Serifenschriften verwenden, sondern Sans-Serif, z.B. Verdana, Helvetica, Arial.
  • die wichtigsten Angaben bereits links oben mit deutlichem Kontrast (lesbar auch bei Sonneneinstrahlung).

Interessante Links





Weiteres

Monitor, Handy, ... (Hardware)

to do

Desktop (Grafik-Einstellungen)

to do

Browserfenster (sichtbarer Bereich)

to do