Gutes Webdesign - Webseiten unabhängig machen von Bildschirm-Auflösung, Hardware & Software sowie Zeichensätzen:

Allgemeines:

Auch hier gelten im Großen und Ganzen die Aussagen, die über die Unabhängigkeit von Browsern gemacht wurden.

Die Beschreibungssprachen html und css sowie auch das Flash-Plugin sind von vorne herein darauf ausgelegt, unabhängig nicht nur von Browsern, sondern auch vom Rest der nicht vorhersagbaren EDV-Ausstattung möglicher Webseiten-Besucher zu sein.

nach oben

Bildschirm-Auflösung:

Das Thema der Bildschirm-Auflösung (screen-resolution) führt zum wahrscheinlich verbreitetsten Mißverständnis im Bereich Webdesign überhaupt.

Der Author von selfhtml, Stefan Münz beantwortet die Frage "Für welche Bildschirmauflösung sollte ich meine Web-Seiten schreiben?" mit deutlichen Worten: "Die Antwort sollte sich von selbst verstehen: für jede Bildschirmauflösung!" und "So gesehen hat es also überhaupt keinen Sinn, das Seitenlayout von einer bestimmten Bildschirmauflösung abhängig zu machen. Die ganze Frage ist falsch gestellt. Bemühen Sie sich einfach um ein Layout, das sich besonders in der der Breite den Gegebenheiten anpasst." (Link zum Artikel).

Die Bildschirm-Auflösung hängt ab von der verwendeten Hardware (Grafikkarte, Monitor) sowie den Einstellungen des Benutzers. Zudem kommt noch, daß in verschiedenen Rechnerwelten wie z.B. PC und Mac verschiedene Auflösungs-Stufen benutzt werden. Eine im PC-Bereich verbreitete Auflösung von 1024*768 wird auf einem Mac- bzw. Apple-Computer in ein anderes Bild-Raster gepreßt, weswegen es zu teilweise asymmetrischen Verzerrungen kommt.

Seit Beginn der Popularisierung des Internet um die Mitte der 90er-Jahre ist die Unsitte verbreitet, Webseiten mit so Sachen wie "optimized for 800*600" oder "best viewed with 1152*864" zu verunzieren, am besten noch gepaart mit dem Logo eines Browser-Herstellers. Der Grund für diese Unsitte liegt in der Benutzung grafischer Web-Editoren, die es erlauben, html-Elemente wie z.B. Tabellen mit der Maus zu platzieren. Diese Programme versuchen dann, die Tabelle sowie die darin enthaltenen Elemente mit Hilfe abenteuerlichster html-Anweisungen und transparenten Grafiken pixelgenau zu definieren. Der so entstehende html-Quelltext enthält nach mehrfachem Editieren und Speichern einer Seite teilweise bis zu 200% zusätzlichen unnötigen Ballast, der nur die Ladezeit vergrößert.

Ganz abgesehen davon, daß die Technologien, die zum Erstellen von Webseiten wirklich benötigt werden (html und css), von vorne herein dafür ausgelegt wurden, von den oben beschriebenen Faktoren unabhängig zu sein, ist es bei den grafischen Betriebssystemen, die Browser als sog. Fenster öffnen, in der Regel so, daß die Programmfenster der Browser keineswegs im Vollbild, sondern in einer Teil-Größe aufgehen. Größe sowie Position werden vom Betriebssystem bestimmt und sind selbst für den Anwender nicht vorhersagbar.

Das bedeutet, daß wahrscheinlich alle Webseiten nie in der Größe erscheinen, die der Entwickler der Webseite vorgesehen hatte, sondern eben nur in einem verkleinertem Fenster.

Es ist immer der Benutzer, der innerhalb weniger Sekunden entscheidet, ob eine aufgerufene Webseite Informationen enthält, die für ihn von Interesse sind. Beeinflußt wird dieser Prozess durch die Faktoren Ladezeit und Übersichtlichkeit und seltenst durch das grafische Design einer Webseite. Erst danach vergrößert er vielleicht das Fenster zum Vollbild, um sich einen besseren Überblick zu verschaffen.

Webseiten mit umfangreicher Navigation, die das Browserfenster in mehrere Bereiche unterteilen, können meist nur dann vernünftig betrachtet werden, wenn die Seite in einem großen Browserfenster bei höherer Auflösung dargestellt wird. Wenn z.B. diese Art der Unterteilung durch Frames nötig ist, macht es durchaus Sinn, eine solche Webseite für eine hohe Bildschirm-Auflösung zu entwickeln. Richtig rund kann so was werden, wenn einem solchen Webangebot z.B. eine einfache Startseite vorgeschaltet wird, die sowohl für das menschliche Auge, wie auch für die Robots der Suchmaschinen optimiert wurde. Eine solche Startseite darf dann auch etwas über technische Voraussetzungen sagen (Auflösung, plug-ins etc.), die beim Betrachten des Webangebotes gegeben sein sollten.

Selbst wenn der interessierte Besucher der Webseite nicht über die technischen Voraussetzungen zum Betrachten der technischen Features verfügt, sollte er einer solchen einfacheren Startseite wenigstens Anschrift und Telefonnummer des Betreibers entnehmen und diesem eine eMail schicken können.

Die folgenden Beispiele für Webseiten können durch Anklicken der Grafiken geöffnet werden.

Beispiele für Webseiten, die aus Gründen der Gestaltung oder der Menge der enthaltenen Informationen im Vollbild-Modus bei höherer Auflösung (z.B. 1024*768) betrachtet werden sollten:

Webseite: MediaDruck Wiesinger (Broschürendruck, Schülerzeitungen, Vereinszeitungen), entworfen von Wolfgang Hart
Art: Webseite mit 3 Frames (Haupt- und Unter-Navigation sowie Inhalt)
Kunde: MediaDruck Wiesinger (Broschürendruck, Schülerzeitungen, Vereinszeitungen)
Webdesign: Wolfgang Hart
Webseite: bibi-online (Portalseite für lokale Ereignisse und Informationen für Bietigheim-Bissingen und Umgebung), verantwortlich: Oliver Breder
Art: php-Portal, umfangreiche Tabellen in einem dynamisch erzeugtem html-Dokument
Kunde: www.bibi-online.de (Neuigkeiten und Veranstaltungen aus Bietigheim-Bissingen und Umgebung)
Webdesign: Oliver Breder (www.pos-promotion.de)

Beispiele für Webseiten, die sich dynamisch an Auflösung und Bildschirm-Größe anpassen.

Webseite: Beispiel einer dynamischen Seiten-Aufteilung mittels html und css.
Art: Beispiel einer dynamischen Seiten-Aufteilung mittels html und css.
Beispiel eines Framesets mit dynamischer Seiten-Aufteilung mittels html und css.
Art: Beispiel eines Framesets mit dynamischer Seiten-Aufteilung mittels html und css.

nach oben

Hardware & Software:

Hier wird es leider ziemlich unübersichtlich.
Vereinfacht gesagt, ist das www als einer moderneren Bereiche des Internets deswegen so beliebt, weil darin das Erstellen und Anzeigen grafisch aufbereiteter Seiten ermöglicht wird. Ein Hauch von Multimedia kommt auf, das Einbinden von Bild und Ton scheint zur Normalität zu gehören ... und wenn ich mehr Zeit habe, dann wird auch hier ein bißchen mehr stehen ...

nach oben

Zeichensatz:

Webseiten, die regionale Sonderzeichen enthalten, können auch von Browsern richtig angezeigt werden, die in anderen Gegenden "beheimatet" sind.

Die Angabe eines verwendeten Zeichensatzes erfolgt durch ein sog. Meta-Tag, in dem vereinbart wird, auf welcher Zeichensatz-Basis die Texte der Webseite angezeigt werden sollen.

	<html>

	<head>
	    <title>Dieser Text erscheint in der Titelleiste des Webbrowsers</title>
	    <meta  http-equiv="content-type" content="text/html; charset=ISO-8859-1"></meta>
	</head>

	<body>
	    Dieser Text erscheint in der Website selbst ...
	</body>

	</html>

Im Rahmen der Installation der Browser-Software kann ein Browser mit Hilfe der blau gefärbten Zeile Zeichen, die selbst gar nicht zu seinem regionalen Repertoire gehören, durchaus korrekt darstellen.

Weitere Informationen zum Thema Zeichensatz-Angaben in Meta-Tags finden Sie bei selfhtml.

nach oben

Schriftgröße:

Mit steigendem Aufkommen von Flachbildschirmen (auch: TFT-Monitor genannt) müssen viele Webdesigner entsetzt feststellen, daß ihre Webseiten nicht nur fehlerhaft, sondern teilweise grotesk verunstaltet dargestellt werden. Das betrifft vor allem "echte" Webseiten, bei denen Inhalte eben Inhalte, sprich Texte, sind und die nicht nur aus grafischen Elementen bestehen.

Der Grund dafür liegt in dem Umstand, daß TFT-Monitore ihr Bild im Rahmen einer fest verdrahteten Gitternetz-Struktur darstellen, bei denen jeder sog. Pixel ein elektronisches Bauteil ist. Deswegen können solche Monitore nur in einer einzigen Auflösung betrieben werden, nämlich in der, die exakt der Anzahl und Anordnung der Bildpunkt-erzeugenden Bauteile entspricht.

Herkömmliche CRC-Monitore, die wie ein herkömmlicher Fernseher über eine Bildröhre verfügen, sind in der Lage, dynamische Raster darzustellen. Für den Anwender bedeutet das, daß er die Bildschirm-Auflösung eben so einstellt, wie es für ihn am besten ist. Die Qualität des angezeigten Bildes hängt eigentlich nur von der Qualität der verwendeten Geräte und somit auch vom Preis ab. Versuche bei TFT-Bildschirmen andere als die vorgeschriebene Auflösungen einzustellen, führen typischerweise zu fransiger Darstellung von Texten und ähnlichem.

So ist z.B. bei den sehr oft verkauften 15"-TFT-Monitoren eine Auflösung von 1024*768 Pixeln fest verdrahtet und ein solcher Schirm muß auch mit genau dieser Auflösung betrieben werden. Vielen erwachsenen Menschen ist die Darstellungsgröße von z.B. Menütexten dann aber viel zu klein. Wer damit Probleme hat, nimmt entweder eine schlechte Darstellungs-Qualität durch eine gröbere Bildschirmauflösung in Kauf oder nimmt bei den Windows-Bildschirm-Einstellungen eine Änderung vor, die Texte mittels der Option große Schriftarten in einer lesbareren Größe darstellt. Somit kann der Bildschirm an sich mit der vorgeschriebenen Auflösung betrieben werden und trotzdem erscheinen Software-Textelemente nicht mehr so winzig.

Wer auf einem TFT-Monitor mit einer solchen Schriftgrößen-Einstellung dann Webseiten betrachtet, sieht dann auch die Webseiten-Texte in stark vergrößerter Darstellung. Bei der bei vielen Grafikern verbreitete Unsitte, Texte auf Webseiten in geradezu unlesbar kleinen Schriftgrößen darzustellen, werden das vor allem ältere Menschen oft als Erleichterung zur Kenntnis nehmen.

Bitter wird es aber, wenn Menüs oder tabellarische Anordnungen völlig aus den Fugen geraten und die Seite teilweise beinahe unbedienbar wird. Dieser Effekt tritt bei einer immer größer werdenden Anzahl von Computer- und Internet-Benutzern auf.

Soweit ich das überschauen kann, gibt es für Text-enthaltende Webseiten (nur solche können von Suchmaschinen wie google & Co. überhaupt ausgewertet werden) durchaus eine Lösung, die sich mit den Regeln und Vorschriften für gutes Webdesign gut verträgt:

Legen Sie für ihr Webprojekt eine zentrale css-stylesheet-Datei an (Tipps für Anfänger und Fortgeschrittene), in der einzig und alleine Angaben zu verschiedenen Schriftauszeichnungen ihres Webprojektes enthalten sind. Notieren sie für alle Elemente, bei denen sie eine unerwünscht vergrößerte Darstellung unterbinden wollen, Angaben zur Schriftgröße in der Einheit px, z.B:

	.ueberschrift  { font-size:16px; }

Der für die css-getreue Darstellung der gecko-Rendering-Engine bekannte Firefox-Browser beläßt folgende Einheiten für die Größe von Schriftarten unverändert: em, % und px. Vergrößert dargestellt werden hingegen pt, pc, mm und inch.

Der für seine Eigenmächtigkeiten (betreff Virenanfälligkeit und Darstellung) mittlerweile zu Recht berüchtigte Internet Explorer von Microsoft vergreift sich an ALLEN Angaben mit Ausnahme von px.

Somit erscheint die Angabe in px als einzige Möglichkeit, diesem Spuk ein Ende zu bereiten (Beispielseite).

Bei Fragen zu diesem Thema können Sie auch gerne Kontakt zu mir aufnehmen.

nach oben

zur Startseite dieses Webangebotes zur Webdesign-Seite   xhtml1.0