Galileo Computing < openbook >
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.


Kompendium der Informationstechnik
 von Sascha Kersken
EDV-Grundlagen, Programmierung, Mediengestaltung
Buch: Kompendium der Informationstechnik
gp Kapitel 17 Webdesign
  gp 17.1 Grundgedanken zum Webdesign
    gp 17.1.1 Bildschirmauflösung und Farbtiefe
    gp 17.1.2 Die technischen Fähigkeiten der Browser
  gp 17.2 Web-Bildbearbeitung mit Fireworks MX
    gp 17.2.1 Bilder optimiert für das Web speichern
    gp 17.2.2 Das passende Dateiformat wählen
    gp 17.2.3 Den Export des Bildes vorbereiten und durchführen
    gp 17.2.4 Animierte GIFs erstellen
    gp 17.2.5 Segmente und Verhalten
  gp 17.3 Webdesign mit Macromedia Dreamweaver MX
    gp 17.3.1 Bearbeiten von HTML-Dokumenten
    gp 17.3.2 Hinzufügen verschiedener Elemente
    gp 17.3.3 Website-Funktionen
    gp 17.3.4 Layers und Verhalten
  gp 17.4 Zusammenfassung

gp

Prüfungsfragen zu diesem Kapitel (extern)

Kapitel 17 Webdesign

Wenn Design nicht wirklich etwas zu sagen hat, darf es gar nicht existieren.
– Philippe Starck

Es gibt ein grundlegendes Problem, das den wichtigsten Unterschied zwischen Web- und Printdesign ausmacht: Beim Printdesign wird ein Layout für ein Ausgabemedium einer festgelegten Größe erstellt, sodass die Platzierung von Inhalten und Elementen von vornherein millimetergenau erfolgen kann. Beim Webdesign dagegen ist das Ausgabemedium der Browser des einzelnen Betrachters; Größe, Auflösung und Farbtiefe sowie die unterstützten technischen Fähigkeiten eines solchen Programms können vollkommen verschieden sein.

Webdesign bedeutet daher, einen sinnvollen Mittelweg zwischen erzwungenem Purismus und Aktualität um jeden Preis zu finden. Es kann also weder die Lösung sein, gar keine neueren Entwicklungen zu benutzen, weil vereinzelte Browser sie nicht anzeigen können, noch dürfen Sie sich ohne Alternative auf die neuesten Features verlassen, sobald die Betaversion eines neuen Browsers am Horizont erscheint.

Webdesign-Richtlinien

Websites sollten so erstellt werden, dass sie bei den meisten Besuchern so angezeigt werden wie ursprünglich geplant, und alle Benutzer zumindest Zugriff auf den eigentlichen Inhalt erhalten – dazu gehört inzwischen auch ausdrücklich die Rücksicht auf behinderte Benutzer; besonders Blinde und Sehbehinderte haben nichts davon, wenn Ihre Site nur aus Bildern besteht! In den USA besteht für Sites des öffentlichen Dienstes inzwischen die gesetzliche Vorschrift, Sehbehinderten Zugang zu verschaffen, in Europa sind entsprechende Gesetze in Vorbereitung.

Sie benötigen ein umfangreiches Wissen darüber, wie Sie Inhalte sinnvoll auf einer Seite platzieren können, ohne absolute Größen und Positionen anzugeben. Einen Teil dieses Wissens haben Sie bereits im vorigen Kapitel erworben. Auch in diesem Kapitel über WYSIWYG-Webdesign finden Sie immer wieder Hinweise für die Praxis.


Galileo Computing

17.1 Grundgedanken zum Webdesign  downtop

Nachdem Sie im vorigen Kapitel mit HTML und CSS das Handwerkszeug für das Erstellen von Webseiten kennen gelernt haben, behandelt dieser kurze Abschnitt einige theoretische Grundlagen des Webdesigns.

Natürlich müssen Sie auch beim Webdesign die Grundsätze der Gestaltung beherzigen, die in Kapitel 9 für den DTP-Bereich erläutert wurden. Andererseits gelten für das Medium World Wide Web auch einige spezielle Regeln, ähnlich wie für das Design von Offline-Multimedia-Anwendungen.

Wie bereits angedeutet, besteht die größte Herausforderung beim Webdesign darin, der sehr unterschiedlichen technischen Ausstattung vieler User gerecht zu werden. Der wichtigste Punkt sind die unterschiedlichen Hardwarevoraussetzungen wie Bildschirmauflösung und Farbtiefe.

Andere Aspekte des Webdesigns, beispielsweise die Auswahl geeigneter Schriften sowie die Erstellung tabellenbasierter Layouts, wurden bereits im HTML-Teil beschrieben.


Galileo Computing

17.1.1 Bildschirmauflösung und Farbtiefe  downtop

Die Mehrheit der Benutzer verwendet heute eine Bildschirmauflösung von 1.024 x 768 Pixeln. Dies ist die Standardauflösung für einen 17-Zoll-Röhrenmonitor. Inzwischen ist auch die noch höhere Auflösung von 1.280 x 1.024 Pixeln verbreitet, die häufig für 17-Zoll-LCD- und 19-Zoll-Röhrenmonitore eingesetzt wird. Diese sind in letzter Zeit sehr günstig geworden und daher die am häufigsten verkauften Neugeräte.

800 x 600 berücksichtigen

Das Problem ist allerdings, dass auch heute noch eine bedeutende Minderheit eine Auflösung von 800 x 600 Pixeln verwendet. Sie müssen also auch diese Benutzer berücksichtigen.

Eine Website sollte so aufgebaut werden, dass sie unter der Auflösung 800 x 600 Pixeln vollständig sichtbar ist, in der Regel also ohne horizontalen Rollbalken. Andererseits sollten die Dokumente aber auch auf Bildschirmen mit einer Auflösung von 1.024 x 768 oder sogar 1.280 x 1.024 Pixeln nicht zu »leer« wirken.

Um Ihre Webseiten auf einem 800 x 600 Pixel großen Bildschirm vollständig darstellen zu können, müssen Sie daran denken, dass auch das Browserfenster selbst einen gewissen Platz einnimmt: Horizontal müssen Sie die Fensterränder und eventuell den Platz für einen Rollbalken abziehen. Vertikal wird noch erheblich mehr Platz für Browserelemente verwendet: Die Titelleiste, die verschiedenen Bedienelemente und die Statusleiste des Browserfensters können 100 Pixel und mehr benötigen.

Die effektiv nutzbare Fläche beträgt daher vorsichtig geschätzt etwa 750 x 450 Pixel. Dies bedeutet wenig Platz und außerdem ein recht ungünstiges Format – die Fläche ist sehr breit und relativ niedrig.

Neben den genannten üblichen Werten verwenden einige wenige Benutzer sogar eine noch geringere Auflösung wie etwa 640 x 480. Es ist nicht nötig, ein Design an diese Werte anzupassen: Es schadet nichts, wenn eine Webseite nicht auf einen solchen Bildschirm passt und deshalb mit Rollbalken in beiden Richtungen angezeigt wird. Allerdings sollten sogar diese Anwender die Seite benutzen können. Das bedeutet zum Beispiel, dass wichtige Inhalte nicht in ein Frame gehören, dessen Rollbalken ausgeschaltet sind. Bei einer zu geringen Auflösung sind diese Inhalte ansonsten schlicht nicht erreichbar.

Praktikable Vorschläge, wie Sie Layouts für Webseiten erstellen können, die unter verschiedenen Auflösungen funktionieren, finden Sie zum Teil bereits im vorigen Kapitel 16, HTML und XHTML, in dem unter anderem ein tabellenbasierter Seitenaufbau mit variabler Breite vorgestellt wird.

Grundlegende Layout-Regeln

Die beiden wichtigsten Punkte, die Sie beim Erstellen solcher Layouts beachten sollten, sind im Übrigen folgende:

gp  Verwenden Sie in Ihren Dokumenten Bereiche mit fester und andere mit variabler Breite. In der Regel sollten Navigationsleisten und andere gleich bleibende Elemente eine feste Breite besitzen, während der Bereich mit den eigentlichen Inhalten sich variabel an die Größe des Browserfensters anpassen kann.
gp  Fließtext sollte niemals über die gesamte Breite des Browserfensters laufen, seine Lesbarkeit wird dadurch zu sehr beeinträchtigt: Es ist bei zu breiten Zeilen sehr schwer, die korrekte nächste Zeile zu finden, zumal es auf dem Bildschirm nicht praktikabel ist, mit dem Finger mitzulesen. Verwenden Sie beispielsweise Tabellenzellen mit fester Breite, um den Anzeigebereich für Fließtext zu begrenzen.

Farbtiefe und Farbpaletten

So gut wie alle Rechner sind heute in der Lage, mindestens 16 Bit Farbe (65.536 Farben), eher sogar 24 Bit True Color (16,7 Millionen Farben) anzuzeigen. Auf die wenigen, die insgesamt nur 256 Farben darstellen können, muss nicht mehr allzu viel Rücksicht genommen werden. Allerdings ist es wichtig, zwischen den Farben in Bilddateien und den unmittelbar im HTML-Dokument angegebenen Text- und Hintergrundfarben zu differenzieren.

Die Web-Palette

Für die Farben, die Sie im Dokument selbst verwenden, ist es trotz der verbreiteten Unterstützung höherer Farbtiefen empfehlenswert, nur Farben aus der Web-Palette zu verwenden. Bei dieser Farbpalette, die bereits weiter oben im Zusammenhang mit HTML-Farbangaben besprochen wurde, handelt es sich um eine spezielle Farbpalette, die lediglich aus 216 Farben besteht: alle Kombinationen derjenigen Rot-, Grün- und Blautöne, die durch 51 teilbar sind – 0, 51, 102, 153, 204 und 255. Die Palette wurde zu einem Zeitpunkt von Netscape definiert, als die meisten Computer lediglich 256 Farben darstellen konnten. Die Farben der Web-Palette haben den Vorteil, dass sie in den Systempaletten von Windows, Mac  OS und den meisten UNIX-Varianten vorkommen.

Auch heute noch kommt es bei Farben, die nicht in der Web-Palette definiert sind, aufgrund von Farbprofilen und systemspezifischen Einstellungen zu Abweichungen zwischen den verschiedenen Systemen, aber auch zwischen einer Browser-Farbangabe und derselben Farbe, die in einem Bild verwendet wird. Demzufolge ist es empfehlenswert, schon bei der Entwicklung von Farbschemata für Websites oder sogar für die Neuentwicklung des Corporate Designs eines Unternehmens auf die websicheren Farben zurückzugreifen. Dies ist zugegebenermaßen recht schwierig, weil von den wenigen Farben der Web-Palette auch noch viele ungeeignet für den Druck sind.

Bestehendes CD berücksichtigen

Wenn ein Corporate Design (CD) bereits besteht, müssen Sie sich natürlich auch beim Erstellen einer Website daran halten. Wenn die Farben des bestehenden CD nicht in der Web-Palette vorkommen, können Sie für Hintergrundfarbe, Schrift oder Rahmen und Linien durchaus die nächstgelegenen Webfarben verwenden. Allerdings könnte es sein, dass diese Farben sich nicht mit den Originalfarben des Firmenlogos oder –schriftzugs vertragen, die Sie natürlich nicht einfach ändern dürfen. Im letzteren Fall bietet es sich nur noch an, entweder die Original-Firmenfarben zu verwenden oder aber das CD vollständig neu zu entwickeln.

Das größte Problem bei der Farbgebung ist allerdings, dass für eine Website mindestens fünf verschiedene Farben benötigt werden: zunächst einmal die Hintergrundfarbe der Seite, dann die allgemeine Textfarbe, die Linkfarbe, die Farbe besuchter Hyperlinks sowie die Farbe aktiver Hyperlinks. Darüber hinaus könnten auch noch Farben für abzusetzende Bereiche hinzukommen, also etwa Tabellenzellhintergründe.

Farbkontraste

Die allgemeine Textfarbe und die Linkfarben müssen so beschaffen sein, dass sie auf allen verwendeten Hintergrundfarben genügend Kontrast erzeugen, um lesbar zu bleiben. Andererseits benötigen die beiden Hintergrundfarben wiederum genügend Kontrast zueinander.

Im Allgemeinen gilt auf dem Bildschirm, dass helle Schrift auf dunklem Grund angenehmer wirkt als umgekehrt; sie wird als ruhiger und weniger blendend empfunden.

Bei Bildern ist es dagegen nicht immer empfehlenswert, sie auf die Farben der Web-Palette umzurechnen beziehungsweise zu reduzieren. In der Regel führt dieser Versuch zu recht unansehnlichen Ergebnissen.

Bei Fotos und anderen Halbtonbildern, die im JPEG-Format abgespeichert werden, müssen Sie sich keine Gedanken über Farbpaletten machen: Da sie eine beliebige Farbtiefe unterstützen, muss sich der Browser beziehungsweise das Betriebssystem um eine Reduktion kümmern, falls die volle Anzahl der Farben des Bildes nicht angezeigt werden kann. Dasselbe gilt für die aufgrund ihres hohen Speicherbedarfs eher selten verwendeten 32-Bit-PNGs.

Bei den palettenbasierten Formaten GIF und 8-Bit-PNG müssen Sie dagegen zwei verschiedene Fälle unterscheiden:

gp  Soll ein vorhandenes Bild, auf dessen Farbgebung Sie keinen Einfluss haben, in einem dieser Formate gespeichert werden, dann sollten Sie sich zunächst eine flexible Farbpalette für das Bild berechnen lassen. Anschließend können Sie versuchen, diese angepasste Palette auf möglichst wenige Farben zu reduzieren, um die Dateigröße des Bildes zu verkleinern. Das genaue Verfahren wird weiter unten im Abschnitt 20.5 über Fireworks erläutert.
gp  Wenn Sie eine flächige Grafik mit wenigen Farben neu erstellen, die als GIF oder PNG-8 gespeichert werden soll, dann sollten Sie von vornherein Farben aus der Web-Palette einsetzen. Inzwischen bieten alle Bildbearbeitungsprogramme spezielle Verfahren zum Auswählen dieser Farben an.

Galileo Computing

17.1.2 Die technischen Fähigkeiten der Browser  toptop

Die zweite wichtige Herausforderung beim Webdesign besteht darin, den vielen verschiedenen Browsern gerecht zu werden, die heutzutage auf dem Markt sind. Zwar ist es im Grunde kein Problem für Benutzer, jeweils die neueste Version ihres Browsers zu installieren, weil die meisten Browser kostenlos zum Download angeboten werden – aber zwingen können Sie nun einmal niemanden dazu. Schließlich gibt es noch immer eine Menge Anwender mit langsamen Internetzugängen über Modem, für die der Download eines 30 MByte großen Browsers nicht zumutbar ist, zumal, wenn sie keinen Sinn darin sehen.

Neben den vier oder fünf Browsern, die allgemein bekannt und verbreitet sind, gibt es noch einige Dutzend, die für seltener verwendete Plattformen entworfen wurden oder mit speziellen Fähigkeiten ausgestattet sind. Es ist vollkommen illusorisch, auch nur einem Bruchteil dieser Browser gerecht werden zu wollen. Letzten Endes haben solche Nischenprodukte aber ohnehin nur eine Chance, wenn sie sich weitgehend an die Darstellungsstandards der wichtigeren Varianten halten, weil die meisten Webdesigner ihre Dokumente für diese optimieren.

Die absolute Mehrheit der User setzt heutzutage den Microsoft Internet Explorer in den Versionen 5.x und 6.x ein. Auch wenn sich das sehr konsistent anhört, bestehen zum Teil erhebliche Unterschiede zwischen den Windows- und den Mac-Versionen dieses Browsers. Da gerade viele Designer Macintosh-Rechner verwenden, ist es besonders wichtig, die erstellten Dokumente auf der insgesamt häufiger eingesetzten Windows-Plattform zu testen. Letzten Endes gehört es ohnehin zur Sorgfaltspflicht jedes Webmasters, die Website gründlich auf verschiedenen Browsern unter diversen Betriebssystemen zu testen.

Ein ähnlich großer Unterschied besteht zwischen den Netscape-Versionen der 4.x-Generation auf der einen Seite und den neuen Versionen ab 6.0 sowie der Open-Source-Variante Mozilla auf der anderen: Bei der Entwicklung der neuen Netscape-Generation wurde gewissermaßen »kein Stein auf dem anderen« gelassen. Zwar besitzt Netscape längst nicht mehr seine einstige Verbreitung, er wurde 1998 endgültig vom Internet Explorer überholt (wenn man die 4er-Versionen dieser Browser vergleicht, sogar zurecht). Bedenken Sie aber andererseits, dass es neben Mac  OS und Windows noch andere Betriebssysteme wie Linux und weitere UNIX-Varianten gibt, unter denen der Internet Explorer nicht zur Verfügung steht.

In welchen Browsern testen?

Im Idealfall sollten Sites für den Internet Explorer ab 4.0, Netscape 4.x und Netscape ab 6.x beziehungsweise Mozilla eingerichtet und getestet werden. Wenn die Seiten unter Opera, dem KDE Konqueror und Apples Safari auch problemlos laufen, ist das umso erfreulicher. Letztlich fördern Sie die Verbreitung freier Browser von unabhängigen Entwicklern, wenn Sie Ihre Seiten auch für diese selteneren Versionen anpassen.

Alle diese Browser verfügen über sehr unterschiedliche Fähigkeiten. Bezüglich normalem HTML fallen diese Unterschiede nicht weiter ins Gewicht. Beispielsweise gibt es leichte Unterschiede bei der Tabellenformatierung – da hilft nur Ausprobieren. Größere Unterschiede gibt es dagegen etwa bei der CSS-Unterstützung. Wenn Sie sich auf die grundlegenden CSS1-Formatierungen beschränken, die im vorigen Kapitel vorgestellt wurden, kann allerdings nicht viel passieren.

Darüber hinaus sind die JavaScript-Fähigkeiten und insbesondere die DHTML-Objektmodelle der Browser völlig unterschiedlich. Näheres zu diesem Thema und den Umgang damit finden Sie in Kapitel 19, Java Script.






  

Einstieg in PHP 5

Einstieg in Java

C von A bis Z

Einstieg in C++

Einstieg in Linux

Einstieg in XML

Apache 2




Copyright © Galileo Press GmbH 2004
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press GmbH, Gartenstraße 24, 53229 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de