Webdesign ist kein Printdesign
Viele Menschen, besonders jene, die noch wenig mit dem Medium Internet Kontakt hatten, dafür aber lange im Print-Bereich tätig wären, unterliegen manchem Irrtum über das Wesen des Webdesigns.
Im Druckwesen geht es um die Gestaltung statischer Medien.
Beim Webdesign aber geht es um Dynamik, Interaktivität
und das Anzeigen auf unterschiedlichsten Ausgabemedien.
Jedes Anzeige-Gerät hat seine Eigenheiten, und auf ein- und demselben
Bildschirm, ja sogar auf demselben Computer, hat jeder unterschiedliche Browser nochmals seine Eigenheiten
bei der Darstellung der Inhalte.
Einige der Unterschiede werden nachfolgend kurz beleuchtet:
Auflösungsunabhängigkeit
In den neueren Betriebssystemversionen wie Vista oder OS X Leopard spielt das Thema Auflösungsunabhängigkeit eine immer wichtigere Rolle. Warum ist das so? Hintergrund sind die immer unterschiedlicheren Display-Größen und deren teils drastisch unterschiedliche Pixeldichte.
Ein Maß für die Dichte der Pixel ist die Einheit dpi oder ppi, was für dots per inch oder pixel per inch steht. Die Auflösung, Pixelanzahl und Größe der verschiedenen Bildschirme variiert stark, und diese Varianz nimmt mit der Zeit immer weiter zu.
Als Beispiel seien verschiedene Auflösungen bei Bildschirmen aufgelistet, die typischerweise auftreten:
Anzeigegerät | Breite × Höhe Pixel |
Farbe Bits |
Diagonale |
Aufl. dpi |
|
---|---|---|---|---|---|
cm | Zoll | ||||
Ihr PC: | (JavaScript inaktiv) | ? | ? | ||
UHD Screen | 3840 × 2400 | 32 | 56 cm | 22.0″ | 206 |
30″-Display | 2560 × 1600 | 32 | 76 cm | 30.0″ | 101 |
Full HD TV | 1920 × 1080 | 32 | 102 cm | 40.0″ | 55 |
24″-Monitor | 1920 × 1200 | 32 | 61 cm | 24.0″ | 94 |
High-End-Notebook | 1920 × 1200 | 32 | 39 cm | 15.4″ | 147 |
HD ready TV | 1366 × 768 | 32 | 102 cm | 40.0″ | 39 |
einfaches Notebook | 1280 × 800 | 32 | 39 cm | 15.4″ | 98 |
normaler PC | 1024 × 768 | 32 | 38 cm | 15.0″ | 85 |
uralter PC | 640 × 480 | 32 | 36 cm | 14.0″ | 57 |
Sony Vaio UX1 | 1024 × 600 | 32 | 11 cm | 4.5″ | 264 |
UMPC Asus R2H, EeePC | 800 × 480 | 32 | 18 cm | 7.0″ | 133 |
Nokia Internet Tablet | 800 × 480 | 16 | 10 cm | 4.1″ | 226 |
Fernseher Röhre | 768 × 576 | 32 | 55 cm | 21.7″ | 44 |
iPhone / iTouch | 480 × 320 | 16 | 10 cm | 4.0″ | 144 |
Pocket PC / PDA | 320 × 240 | 8 | 9 cm | 3.5″ | 114 |
Handy-Browser | 128 × 160 | 12 | 5 cm | 2.0″ | 102 |
dpi-Rechner / Auflösungs-Rechner
In der ersten Zeile der Tabelle wird automatisch die von Ihnen verwendete Pixelzahl eingetragen. Die Auflösung oder Bildschirm-Diagonale lässt sich leider nicht per JavaScript ermitteln. Um die korrekte dpi-Zahl zu berechnen, müssen Sie daher Ihre Bildschirm-Diagonale in der Maßeinheit Zoll oder cm per Hand eintragen.
Pivot- oder Tilt-Funktion
Außerdem lässt sich die Ansicht bei vielen Geräten um 90° drehen (Pivot- oder Tilt-Funktion genannt).
Die Liste an Anzeigemedien ließe sich nahezu endlos fortsetzen, und sie zeigt vor allem Eines:
Man muss sich vom gewohnten
WYSIWYG
-Schema lösen.
Es geht nicht mehr länger darum, bei allen Betrachtern exakt zu 100% die genau gleichen Pixelfolgen abzuliefern.
Damit würde man die zunehmende Zahl von Eignern verschiedenster Ausgabemedien ausschließen
oder zumindest stark behindern.
Es geht vielmehr darum, jedem Betrachter Webseiten auszuliefern,
die er gut benutzen kann.
Eine auf statisch 1024 × 768 „optimierte“ Webseite
wirkt auf einem 24″-Monitor recht verloren und armselig,
während sie auf einem mobilen Anzeigegerät zur Scroll-Orgie verkommt.
Farben
Ein anderer Punkt ist, dass die Farben auf jedem Monitor anders aussehen. Sogar auf ein und demselben Monitor ergeben sich, je nach eingestelltem Kontrast und Helligkeit und Tageslicht, sehr unterschiedliche Farbeindrücke. Ganz zu schweigen von den unterschiedlichen Gerätetypen wie Röhre, TFT oder die deftigen Unterschiede innerhalb dieser Typreihen. Auf vielen Monitoren kann man die Farbtemperatur einstellen – und schon wird aus einem leichten zartgelb ein gräuliches blaßrosa.
Jeder Browser hat seine Eigenheiten
Zu beachten ist auch, dass jeder Browser seine Eigenheiten hat, und den identischen Quelltext teils drastisch anders darstellen kann. In unseren Logfiles zeigt sich die Vielfalt, es sind einige tausende verschiedene Browser-Typen unterwegs. Und die Vielfalt nimmt nicht ab, sondern steigt ständig. Zum einen kommen ja immer neue Varianten derselben Baureihe hinzu, während sich die veralteten Versionen davon oft - und leider - noch lange halten. Zum anderen gibt es immer mehr Geräte-Typen, die mit einem Browser versorgt werden, der zumindest leichte Variationen aufweist. Vor kurzem ist z.B. Apples Safari-Browser neu auf Windows portiert worden – und zeigt manche Unterschiede zu seinem Zwillingsbruder auf Macintosh-Rechnern, obwohl er ja eigentlich eineiiger Natur ist.
Grenzenlosigkeit
Ein weiterer Unterschied ist, das es kein festes vorgegebenes Seitenende gibt – gottseidank. Oftmals noch orientieren sich Seiten an der A4-Seitenlänge – schade. Es ist für den Benutzer wesentlich einfacher, das Scrollrad an der Maus zu drehen, als auf einen Link zu klicken und eine neue Seite abzuwarten. Vertikales Scrollen dagegen ist um jeden Preis zu vermeiden, da es den Lesefluss komplett zerstört.
Wer hier auf ein fixes Tabellenlayout setzt, anstatt auf dynamisch sich anpassende div-Tags mit float-Angaben, mutet der ständig steigenden Zahl der Besitzer kleiner elektronischer Helferlein einiges zu – wahrscheinlicher ist aber, dass diese einfach zu lesefreundlicheren Angeboten weiterwandern.
Silbentrennung
Zeilenumbrüche sind nicht vorauszuberechen, sie hängen zu sehr von den
Eigenheiten des vom konkreten Browser verwendeten Zeichensatzes (Font) ab.
Selbst exakte Vorgaben der Schriftgröße in Pixeln und des Fonts
helfen hier nicht, da das Kerning und das Rendering großen Unterschieden unterworfen sind.
Damit wäre eine Silbentrennung für das Vermeiden von groben Flatterrändern
eigentlich ein Muss, aber diese existiert bisher nicht.
Weder macht ein Browser die Silbentrennung automatisch, noch kann man Silbentrennungs-Vorgaben
an den Browser geben, die auch beachtet werden würden.
Es existiert zwar ein unsichtbares
weiches Silbentrennzeichen
namens ­
,
dieses findet bisher aber in kaum einem Browser Beachtung;
Merke: Silbentrennung existiert bisher nicht.
Falls ein Satz mal eine Zeile länger als erwartet wird, kann sich das bei druckähnlichen Designs mit pixelgenauen Positionierungen fatal auswirken, und das gesamte Layout zerstören.
Schriftarten
Bei den verwendeten Schriftarten kann man dem Browser letztendlich nur Empfehlungen geben, mehr nicht.
Weder ist gesichert, das der Browser überhaupt die gewünschte Schrift zur Auswahl hat,
noch das der Benutzer nicht diesen Vorschlag durch eigene Styles überstimmt.
Eine Schrift, die beim eigenen Browser gut aussieht, kann auf einem anderen Browser
auf sogar ein- und demselben System vollkommen anders wirken.
Zu nennen wäre hier z.B. das unterschiedliche Font-Rendering mit Windows-ClearType oder
dem Safari unter Windows.
Sogar ein- und derselbe Browser unter ein und demselben System kann Fonts anders darstellen,
abhängig vom verwendeten Anzeige-Gerät:
ClearType
unter Windows z.B. ist nur für TFT-Monitore geeignet,
zudem kann der Benutzer es trotzdem an- oder abschalten, ganz nach eigenem Gusto.
Im Internet Explorer 6 ist ClearType ohne aktives Zutun inaktiv,
im Internet Explorer 7 dagegen aktiv - und schon sieht eine Seite unmerklich anders aus.
Beispiel: Font-Rendering im Browser von Apple (Safari)
Am folgenden Screenshot aus dem Safari-Browser zeigt sich, wie unterschiedlich ein Font angezeigt werden kann. Diese Seite wurde mit demselben Font angezeigt, der aber trotzdem anders dargestellt wird – zumindest in anderen Browsern.
Bei einer dpi-Zahl unter 120 ist eine Schriftart mit Serifen, wie z.B. Times, in einer Größe kleiner als 12 Punkte (pt) auf einem Monitor nur schlecht darstellbar. Serifenlose Schriften sind hier zu bevorzugen, während im Printbereich Schriften mit Serifen mehr Spielraum erlauben.
Unterschiedliche Vergrößerungen
Jeder Benutzer kann zudem die Basis-Schriftgröße frei einstellen.
Im Firefox oder IE7 kann man per Strg+
und Strg-
die Schriftgröße frei vergrößern oder verkleinern.
Ich nutze dieses Feature ständig, allein um je nach dpi-Zahl des Displays
und aktueller Entfernung vom Display eine gut lesbare Schriftgröße hinzubekommen.
Besonders von Apple-Macintosh-Besitzern entworfene Webseiten
sind für mich ohne Vergrößerung oftmals nicht lesbar.
Grund sind die benutzten Mini-Schriftgrößen, die wohl vom
72dpi-Mythos
herrühren.
Wenn jemand auf ein fixes, pixelgenaues Layout gesetzt hat,
zerstört diese Schriftgrößen-Änderung das gesamte Design,
es mutiert zum Chaos-Brei.
Die Schriftgrößen als absoluten Wert vorgeben, ist also schlechter Stil,
wie mindestens ein weiterer Kollege auch meint:
Web Browser Default Text Size
Barrierefreiheit
Wenn man seine Webseiten barrierefrei (Neudeutsch für Behindertenfreundlich) gestalten will, kommt man nicht umhin, dem Nutzer eine beliebige Vergrößerung der Schriften zu erlauben. Für Behörden ist das schon länger Pflicht, dank BITV. Ein Einhalten der von der Verordnung vorgegebenen Regeln kommt aber eigentlich allen Nutzern zugute, vor allem solchen Geräte-Nomaden wie mir.
Adobe Flash
Besonders beliebt bei Homepage-Angeboten sind auch Flash-Animationen. Diese wirken erstmal besonders beeindruckend, werden aber von Suchmaschinen in aller Regel ignoriert. Solange es sich um reine Grafiken handelt, schließt man damit nur die Nutzer, die das Plugin nicht installiert haben, aus. Dazu gehören viele Nutzer von Unix-Systemen, sowie viele mobile Browser, wie auch das iPhone von Apple.
Wenn aber wichtige Inhalte ausschließlich über Flash transportiert werden sollen, so schließt man willentlich 10 bis 15% seiner Nutzer aus. Ein guter Händler würde sicher nicht ohne sehr guten Grund auf diese potentiellen Kunden verzichten wollen. Man sollte also nur bei wirklich triftigen Gründen allein auf Flash setzen – und es ansonsten als rein schmückendes Beiwerk betrachten.
Wenn man unbedingt die volle Kontrolle über das Aussehen haben möchte, kann man diese Inhalte zusätzlich als Adobe Acrobat PDF-Dokument anbieten.
Fazit
Statisches Printdesign für Webseiten ist mega-out. Ein solides Design, das sich möglichst variabel an das aktuelle Anzeige-Geräte anpasst, dagegen mega-in. Die Varianz der Anzeige-Geräte wird weiter stark zunehmen, das Überall-Web wird langsam Realität.
Ich selbst nutze das Internet auf:
- einem 24″-Monitor
- einem Notebook mit 15,4″-Widescreen
- einem 7″-UMPC
- einem Nokia Internet Tablet mit 4″-Bildschirm
Das sind allesamt höchst unterschiedliche Displays. Nach und nach wird Internet auf einem HDTV-Fernseher Standard sein, und ebenso in allen Handys die Regel werden, auch wenn es in Deutschland dank ultrateurer UMTS-Versteigerung mit der Durchsetzung länger dauern wird.
Ich kann nur raten, schon jetzt Abstand von dem Glauben zu nehmen, dass eine Webseite wie ein Druckerzeugnis anzusehen ist und mit denselben Maßstäben zu betrachten ist.