WWW: World Wide Wissenschaft

Wissenschaftliche Webseiten gestalten

Katharina Hien & Steffen Rümpler

Ohne eigene Webseite wird man heute nicht mehr ernst genommen. Sie sind inzwischen ein Muss, um das eigene Institut, Spin-Off, Forschungsprojekt oder Unternehmen nach außen zu präsentieren.

Die Webseite ist ein wichtiger Teil der Öffentlichkeitsarbeit und dient als Publikationsplattform für die Darstellung von Forschungsergebnissen und –Projekten. Ihre Gestaltung vermittelt viel über die Glaubwürdigkeit und Einstellung einer Forschungsgruppe oder eines Unternehmens.

Obwohl die meisten Universitäten ein Corporate Design zur Verfügung stellen, in das sich die Institute einbetten müssen, bleibt meist viel Spielraum zur eigenen Darstellung. Projekt-, Arbeitsgruppenseiten oder Informationen zu einer Kongressorganisation können Sie durchaus selbst gestalten.


Mit Wissenschaft fings an

Die Grundlage des WorldWideWeb (WWW) ist die Seitenbeschreibungssprache HTML (Hypertext Markup Language), die Texte, Bilder und (Hyper-)Links darstellt. HTML ist eine junge Computersprache: 1990 wollte der britische Informatiker Tim Berner-Lee "nur" den Informationsaustausch zwischen Wissenschaftlern mit Hilfe des Internets optimieren. Unternehmen und Programmierer erkannten das Potential, richteten Server ein und programmierten Browser, die HTML interpretieren konnten: der Boom des WWW begann. Siebzehn Jahre später ist das Internet selbst aus Kinderzimmern kaum noch weg zu denken und die Basis für sekundenschnellen Informationsaustausch und Unterhaltung geworden.

Die Programmierung einer Webseite und die benötigten Daten (Bilder oder Datenbank) sind auf einem Server im Netz abgelegt, der die Webadresse zur Verfügung stellt. Der Internetbrowser auf Ihrem Computer (zum Beispiel Internet Explorer, Mozilla Firefox oder Safari) interpretiert die Programmierung der angewählten Webseite und stellt diese auf dem Bildschirm dar. In manchen Fällen verarbeiten die Browser HTML unterschiedlich – ungewollte Schriftgrößen erscheinen oder Bilder sind nicht zu sehen. Trotz diesen Schwierigkeiten sind Webseiten immer noch vorwiegend in HTML geschrieben, da die meisten Computer und Betriebssysteme diese Sprache verstehen.


"What you see is what you get"
Doch keine Panik. Sie müssen nicht HTML lernen, um eine eigene Webseite zu erstellen. Dazu gibt es grafisch unterstützte HTML-Editoren, mit denen Sie Texte und Bilder recht einfach in einer grafischen Oberfläche anordnen. Ein entsprechendes Open Source-Produkt ist beispielsweise NVU (ausgesprochen "N view") von Mozilla. Falls Sie Geld ausgeben möchten, können Sie zum gleichen Zweck auch die professionellen Werkzeuge FrontPage und den weit verbreiteten Dreamweaver benutzen. Diese haben einen ähnlichen Leistungsumfang wie NVU. Beide können zwischen der grafischen Darstellungsseite und dem entsprechenden HTML-Code hin und her wechseln. Dabei gilt das Prinzip "What you see is what you get", in Fachchinesich "wysiwyg" genannt (ausgesprochen "weisiwig”), mit dem Sie das, was Sie im Editor gestalten, auch auf Ihrer Webseite tatsächlich genau so wieder finden.

Navigieren ohne Hindernisse

Eine gute Website hat eine klare Struktur, auf der sich die Benutzer sofort zurechtfinden können. Sie sollten auf der Website übersichtlich getrennte Bereiche ausweisen, beispielsweise für Logo, Förderer, Links zu Unterseiten und den jeweiligen Textinhalt. Überlegen Sie sich eine geeignete Navigationsstruktur durch Ihre Unterseiten, die auf jeder Seite anzeigt, wo sich der Benutzer gerade befindet. Achten Sie darauf, Ihre Seite "barrierefrei" zu gestalten. Sie ermöglichen dadurch auch Menschen, die wenig oder gar kein Sehvermögen besitzen, den Zugang. Dazu legen Sie Alternativtexte für Ihre Bilder oder Links an, die für Blinde mit Hilfe spezieller Programme vorgelesen werden. Darüber hinaus sollten Sie zur guten Lesbarkeit starke Kontraste und wenige Farben verwenden. Verwenden Sie gut lesbare Schriften mit einer Göße von 10 bis 14 Punkten.

Auf jeder Webseite muss ein Impressum stehen, in dem der Verantwortliche mit Adresse zu finden ist. Bei kommerziellen Seiten müssen je nach Rechtsform Vereinsvorstand oder Gerichtsstand mit Handelsgerichtsnummer eingetragen sein. Dazu sollten Sie im speziellen Fall Ihren Anwalt befragen. Ein fehlerhaftes Impressum und unzureichende AGBs können in Extremfällen sogar zu Klagen durch Mitbewerber führen.

Bisher war es üblich, das Design einer Webseite aus Tabellen aufzubauen. Einerseits kann man die Seite damit übersichtlich strukturieren und mit untergeordneten Tabellen in Tabellenkästchen differenzieren. Andererseits sind Tabellen schnell unübersichtlich und auch ihre Bearbeitung ist kompliziert. Einfacher geht es, wenn Sie die Seiten aus Ebenen aufbauen, deren Aussehen Sie durch Cascading Style Sheet-Angaben (CSS) beschreiben. Die Position der Ebenen verschieben Sie mit der Maus, die Inhalte können Texte, Bilder oder Links sein. Hervorragende Anleitungen mit Beispielen finden Sie unter der Adresse www.selfhtml.org. Dort gibt es auch spezielle Angaben über CSS und den Webseitenaufbau mit diesen Style-Sheets.

Sicher kennen Sie das auch: man wartet und wartet bis sich endlich die Website aufbaut. Um den Nutzern Ihrer Website das zu ersparen, sollten die Bilder nicht mehr als 72 dpi (dots per inch) bei der gewünschten Ausgabegröße aufweisen. Möchten Sie feiner gerasterte Bilder zum Drucken auf Ihre Homepage stellen, so sollten Sie sie als Download zur Verfügung stellen.

Drei Formate zur Auswahl

Grundsätzlich gibt es drei Grafikformate, die Sie nutzen können: JPEG, GIF und PNG. Diese Formate werden mittlerweile von allen Internetbrowsern interpretiert. TIFF-Bilder (Tagged Image File Format) unterstützt HTML meist nicht, dazu sind entsprechende Plug-Ins nötig. Fotos können Sie sehr gut mit JPEG-Bildern (Joint Photographic Experts Group) darstellen. In der Regel kann dieses Format 16 Millionen Farben speichern, produziert kleine Dateien, weist jedoch beim Komprimieren Verluste auf (siehe Laborjournal 11/2006). JPEG kann keine Transparenz darstellen.

GIF-Bilder (Graphics Interchange Format) speichern 256 indizierte Farben. Dadurch produziert GIF recht kleine Datenmengen. GIF ist aber auch nur für Bilder mit geringer Farbtiefe sinnvoll wie Logos oder geometrische Strukturen. Es komprimiert verlustfrei und kann Transparenz darstellen. Wenn Sie jedoch ein Objekt vor einem Hintergrund mit Ihrem Grafikprogramm freistellen, erscheint ein "Kranz" mit der abgesofteten Hintergrundfarbe um das Objekt. Dies liegt daran, dass GIF explizit nur eine Farbe für Hintergrund- bzw. Transparenz zur Verfügung stellt, Farbübergänge kann es dadurch nicht transparent darstellen. Darüber hinaus können Sie mehrere Bilder in einer GIF-Datei speichern und damit eine einfache Animation erstellen (animated gif). Diese Animationen wiederholen sich entweder kontinuierlich oder bleiben beim letzten Bild stehen.
Auch PNG (Portable Network Graphics) ist wie GIF ein Format für Rastergrafiken. Es komprimiert wie GIF verlustfrei, produziert jedoch noch geringere Dateigrößen. Das Format PNG24 hat im Gegensatz zu PNG8 eine echte Transparenz. Ein freigestelltes Objekt verliert dabei jeden Bezug zur vorherigen Hintergrundfarbe. Sogar "durchscheinende" Objekte wie beispielsweise farbige Glaskugeln zeigen keinen durchschimmernden Hintergrund mehr.


Vorsicht Pixelstufe

Alle PCs und MACs können so genannte Systemschriften darstellen: Arial, Courier New, Times New Roman, Trebuchet MS und Verdana. Es macht Sinn, diese für Ihre Webseite zu verwenden. Andere Schriften können unter Umständen nicht von den Benutzern angezeigt werden.



Der Browser wählt sich dann eine andere Schrift für die Darstellung aus (in aller Regel Times New Roman). Das sieht dann meist weniger gut aus. Sie können Schriften jedoch auch als Bilder einsetzen. In diesem Fall wandeln Sie Ihren Text in einem Bildbearbeitungsprogramm in ein Bild um, welches Sie auf Ihrer Webseite platzieren. Dieses Vorgehen bietet sich für Buttons, Links oder Überschriften. Müssen Sie sehr kleine Schriftgrade verwenden (6-8 Punkt), sollten Sie sogenannte Pixelschriften benutzen, die Sie beispielsweise aus dem Internet herunter laden können. Bei diesen Schriften werden die Schriftzeichen nicht geglättet (Antialiasing) und erscheinen daher scharf. Allerdings sollten Sie Pixelschriften nur in dem angegebenen Schriftgrad verwenden, da sonst unerwünschte "Pixeltreppen" und Verzerrungen auftreten.

Anmerkung des Webmasters: Da es momentan keine Pixelschrift gibt, die standardmäßig auf allen großen Betriebssystemen installiert ist, sollte Pixelschrift nur in Grafiken verwendet werden. Das obige Beispiel ist eine GIF-Datei. Die meisten im Netz verfügbaren Pixelschriften haben eine optimale Größe von 10 Punkt. In Programmen wie Photoshop muss das Antialiasing vom Nutzer ausgeschaltet werden.




Letzte Änderungen: 23.10.2007