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
• Pivot- oder Tilt-Funktion
• Farben
• Browser-Eigenheiten
• Grenzenlosigkeit

• Silbentrennung
• Schriftarten
• Vergrößerung
• Adobe Flash
• Fazit

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.