Versehen sie möglichst alle ihre Webseiten mit Texten wie diesem:
Optimiert für Monitor-Größe 4800x3600 ... Ihre BesucherInnen werden in Ehrfurcht vor ihrer tollen Ausrüstung und vor ihrem Budget erstarren ! |
Nicht wenige Webseiten taugen tatsächlich nur für riesige Monitore, oder es
treten Fehler auf, wenn man als Besucher einmal ein kleineres Fenster verwendet. Dazu ein paar Hinweise auf dieser Seite: |
Hardware
|
Alles, was man angreigen kann... |
| Live ! | Die Daten ihres Monitor-Fensters: |
Hardware-Größe |
|
Nutzbare Größe |
- Test durch manuelle Änderung ! |
| WebDesign | Bildschirm-gerechtes Design |
| Auflösung | Standard: 72 dots per inch (dpi) |
| JavaScript | Auslesen der aktuellen Monitor-Daten |
| CSS | Eichung von CSS für PC-Monitore |
WebDesign |
|
| Sauberes Design |
•
Eine hervorragende Eigenschaft von HTML ist die automatische Anpassung an die
Bildschirmgröße. Unterlaufen sie das nicht durch technische Tricks ! • Testen sie, wie ihre Webseiten auf anderen Monitoren aussehen - jeder Monitor lässt sich auf unterschiedliche Auflösung einstellen. • Verzichten sie auf Hinweise, welche Monitore die BesucherInnen nach ihrer Meinung verwenden sollten. Das wird als unnötige Arroganz ausgelegt - mit Auswirkung auf ihre impact-Statistik. ● Design-Tipp: GoldHTML |
| User-Statistik |
•
Es gibt zahlreiche Statistik-Quellen im Internet, aus denen sie die aktuelle technische
Ausrüstung der WebUser entnehmen können.
Hinweis: Die Resourcen unterscheiden sich häufig je nach Thema der untersuchten Webs ! -
Guten Überblick bieten große Publikums-Webs wie z.B. Suchmaschinen, ... • Betreiben sie unbedingt einen Tracker auf ihrem eigenen Web. Viele derartige Produkte sind kostenlos erhältlich ! - So erfahren sie (im Nachhinein) die Resourcen-Statistik ihrer BesucherInnen. • Richtwert: Ihre Web-Lösung sollte keinesfalls mehr als 1% der BesucherInnen verärgern oder ausschließen ! |
| Dynamische Programmierung |
•
Falls sie unbedingt ihr Design an bestimmte Moni-Größen anpassen wollen,
dann können sie z.B. mit den unten angeführten Methoden die Live-Daten analysieren,
und nach Bedarf zu verschiedenen Layouts verzweigen. • Übrigens: Nur wenige WebUser verwenden tatsächlich ein Fenster der vollen Moni-Größe ! In den meisten Fällen steht ihnen eine kleinere Fläche zur Verfügung als sie nach den Hardware-Daten annehmen könnten ! |
Auflösung = Bildpunkte pro Zoll = dots per inch = dpi |
||||||||||||||||||||||||||||||||||
|
Zu diesem Thema gibt es häufige Missverständnisse. ► PC-AnwenderInnen können die Monitor-Auflösung individuell einzustellen ► Programme können die wahre Monitor-Größe (z.B. in cm) normalerweise nicht auslesen. |
►
Daher sind Software-Hersteller dazu gezwungen, Annahmen (!) über die Auflösung
zu treffen ! ► Die Standard-Auflösung beträgt 72 dpi. |
|||||||||||||||||||||||||||||||||
|
Win-Betriebssysteme:
►
Schliessen sie alle Programme und Fenster.► Rechts-Klicken sie auf die (leere9 Fläche am elektronischen Schreibtisch (desktop). ► Wählen sie Eigenschaften | Einstellungen | Bildschirmauflösung. ► Stellen sie die gewünschte Auflösung ein. |
Linux-Betriebssysteme:
Unterschiedlich je nach Distributor.SuSE-Linux: ► Starten sie das YAST-Kontrollzentrum ► Wählen sie Hardware | Monitor ► Stellen sie die gewünschte Auflösung ein. |
|||||||||||||||||||||||||||||||||
Gebräuchliche Einstellungen: Anzahl der Bildpunkte (einstellbar), passende
Monitor-Größe in cm und Diagonale in Zoll (inch):
|
►
Javascript
kann die Monitor-Auflösung (in Bildpunkten, jedoch nicht die reale Größe !)
auslesen: ► Live-Berechnung: Bei Annahme der Standard-Auflösung von 72dpi sollte ihr Monitor daher folgende Abmessungen haben: ► Wenn ihr Monitor die berechnete Größe hat, dann sollten alle angezeigten Elemente (Schrift, Bilder, ...) die "richtige" Größe haben, d.h. in jener Größe erscheinen, die von der/dem ProgrammiererIn vorgesehen wurde. ► Wenn ihr Monitor kleiner ist, dann werden alle Elemente verkleinert. Die Fläche wird zwar scheinbar größer, Bilder und Schriften jedoch kleiner. Bei häufiger Bildschirm-Arbeit sollten sie davon unbedingt absehen, da die Augen davon stark beansprucht werden ! ► Bei der Erstellung von Software sollten sie berücksichtigen, dass es auch kleinere Monitore gibt, und dass die Fenster auf großen Monitoren häufig verkleinert werden ! |
|||||||||||||||||||||||||||||||||
Live-Testbild 20x10 cm:
Das Bild wird in einer Größe von 567 * 283 Pixel angezeigt:
<img style="width:567px; height:283px;">
Bei der Standardauflösung von 72dpi entspricht das ca. 20 * 10cm.Bei richtiger Einstellung des Monitors wird das Testbild in Originalgröße angezeigt. |
||||||||||||||||||||||||||||||||||
Programme:■ Viele Programme (Grafik, Webdesign, ...) erlauben die Festlegung der Größe von Objekten in cm oder mm.■ Die meisten Grafik-Formate bieten jedoch keine Möglichkeit zur Speicherung der gewünschten absoluten Größe. ■ Daher wird meist nur die Größe in Bildpunkten (pixel) gespeichert - unter der Annahme der Standard-Auflösung von 72 dpi ! ■ Bei Verwendung solcher Objekte durch andere Programme wird daher nur selten die gewünschte Größe (in mm) verwendet, sondern die Größe in Pixel unter der Annahme der Standard-Auflösung. |
■ Stellen sie daher ihre Programme (Grafik, Webdesign, ...) auf die Standardauflösung von 72 dpi ein, wenn sie Objekte für die Bildschirm-Anzeige herstellen, bearbeiten oder verwenden. ■ CSS: als allgemeiner Style-Standard verdient ein eigenes Kapitel (s.u.) ■ Drucker bieten meist eine wesentlich höhere Auflösung als Monitore. Zum Glück ist deren Auflösung normalerweise nicht einstellbar, daher hat entsprechende Software eine gute Chance, Objekte in der richtigen Größe und in richtiger Größe auszugeben. |
|||||||||||||||||||||||||||||||||
JavaScript & Monitor |
|
|
Eingestellte Auflösung :
Diese Daten sind unabhängig von Browser & Plattform jederzeit verfügbar.
Angaben in Bildpunkten (Pixel).colorDepth gibt an, wieviele bit für die Anzeige der Farben je Pixel verwendet werden: 8 bit -> 28 = 256 Farben 16 bit -> 216 = ca. 65.000 Farben 24 bit -> 224 = ca. 16.700.000 Farben |
hx=screen.width; hy=screen.height; hz=screen.colorDepth; 
Live-Daten für ihren Monitor:
hx * hy * hz =
|
|
Nutzbare Größe :
Leider habe ich noch keine einheitliche Methode gefunden, diese
Daten live zu bestimmen.Daher zunächst die Analyse des verwendeten Browsers (na), danach je eine Version für M$IE und Mozilla (Navigator) und Opera. Achtung: Für die M$IE-Methode muss das body-tag ein id-Attribut tragen. Diese Methode funktioniert erst nach dem Laden, weil erst dann das body-Element vollständig erstellt ist. Test: Ändern sie die Größe dieses Fensters und sehen sie die Wirkung auf die nutzbare Größe ! |
<body id="bdy">
<!-- nur für M$IE -->
na = navigator.appName.substr(0,1);
var ux=0; var uy=0; if(na=="M") { // erst nach dem Laden !!!
ux=document.all.bdy.offsetWidth-20;
}uy=document.all.bdy.offsetHeight-4; else if(na=="N" || na=="O") {
ux=window.outerWidth-24;
}
uy=window.outerHeight-133; |
|
Eichung:
Die in den Beispielen enthaltenen Korrektur-Faktoren wurden empirisch ermittelt:
Zeigen sie in einem Fenster die mit JavaScript ermittelten Daten so wie hier an,
und analysieren sie einen screenshot davon mit einem Grafik-Programm.Tipp: Falls zusätzliche JavaScript-Funktionen oder neue Browser-Designs zur Verfügung stehen, sollten sie diese neu eichen ! |
Differenz für die horizontale Größe: M$IE zeigt rechts immer einen Rollbalken (scrollbar) dieser Breite (20px). Firefox zeigt diesen bar nur dann, wenn erforderlich (ohne bar beträgt die Korr. 8px statt 24px). Differenz für die vertikale Größe: Firefox rechnet den Menübereich dazu. |
Cascading Style-Sheets CSS |
|
| CSS bietet als allgemeiner Style-Standard eigene Methoden zur getrennten Formatierung von Dokumenten für verschiedene Ausgabe-Geräte (Monitor, Drucker, ...) |
Unabhängig davon bietet CSS
die Möglichkeit, Längen-Angaben in verschiedenen Einheiten anzugeben: Pixel (px), mm (mm), cm (cm), Zoll (in). |
|
■
Die Umsetzung der Längen-Einheiten in Pixel funktioniert jedoch (noch) nicht immer korrekt. ■ Für ProgrammiererInnen besteht die Möglichkeit, einen "Skalierungsfaktor" mit offsetWidth live zu ermitteln. ■ Die Größe einer Grafik wird mit CSS in mm eingestellt, und nach Aufbau der Seite in Pixeln gemessen. Daraus ergibt sich ein Faktor, mit dessen Hilfe alle anderen Längen-Einheiten richtig eingestellt werden können. ■ In der Praxis verwenden sie dazu 2 unsichtbare Bilder möglichst großer Dimension, z.B. 600*1 Pixel und 1*600 Pixel (In diesem Web wird der CSS-Skalierungsfaktor bereits auf der Startseite gemessen und an alle anderen Webseiten weitergegeben). |
Javascript: Eichung
(DOM-Methoden)
calnode = document.getElementById("css_calib");
w_ist = testnode.offsetWidth; w_soll = 150*72/25.4; // 150mm -> px cssfaktor = w_soll/w_ist;
Live-Javascript für diesen Monitor:
HTML:
<img id="css_calib"
src="test.gif"
style="width:150mm; height:5mm;" /> |
|
Testbilder: Beide Balken werden in HTML / CSS
gleich lang angelegt, der untere
nachträglich mit Javascript eingestellt:
<img style="width:150mm;" /> wurde gemessen
<img style="width:150mm;" /> wurde
eingestellt
|
|
|
Das erste Testbild (oberer Balken) wurde mit dem Javascript-Programm "Eichung" (s.o)
vermessen - Achtung, die Messung kann erst nach Aufbau der Grafik,
noch besser nach Aufbau der Webseite erfolgen ! Die Breite des unteren Balkens wurde mit Hilfe des berechneten Faktors cssfaktor und dem Javascript-Programm Einstellung (rechts) angepasst: Es sollte einigermaßen genau die Breite von 150mm haben - richtige Einstellung der Monitor-Auflösung (s.o) vorausgesetzt ! Die Einstellung kann - wie hier gezeigt - nachträglich mit Javascript ausgeführt werden, alternativ auch live mit Javascript (Schreiben des <img> mit document.write ) oder bereits am Webserver mit PHP, Perl, ... |
Javascript: Einstellung
testnode = document.getElementById("css_test");
w_soll=150; // Soll-Breite in mm w_soll*=cssfaktor; msg=w_soll.toString()+"mm"; testnode.style.width=msg; HTML:
<img id="css_test"
src="test.gif"
style="width:150mm; height:5mm;" /> |
|
|
