Gutes und schlechtes Webdesign - Schulstiftung der Erzdiözese

Wie stelle ich mein Projekt ins Internet?
Fortbildungsseminar für Lehrerinnen und Lehrer, Erzieherinnen und Erzieher an den Katholischen Freien Schulen
im Bereich der Erzdiözese Freiburg, Geistliches Zentrum Sasbach am Dienstag, 22. und Mittwoch, 23. Mai 2001
Gutes und schlechtes Webdesign
Als Reisender im World Wide Web werden Sie beim Surfen im Netz auf Internetpräsenzen von Organisationen oder
Einzelpersonen stoßen, die Sie auf Anhieb ansprechen und dazu animieren, auf den Webseiten zu verweilen und sich
umzusehen. Sie werden aber auch so manche Homepage finden, über die Sie sich ärgern und die Sie rasch wieder verlassen.
Was aber macht gutes Webdesign aus? Was sind typische Fehler, die bei der Gestaltung von Webseiten gemacht werden?
Bevor wir über diese Fragen nachdenken, wollen wir einen kurzen Blick auf wesentliche Elemente einer Webseite
werfen, auch um einige wichtige Fachbegriffe zu klären.
Eine Homepage besteht i.d.R. aus mehreren Webseiten.
Eine Webseite ist ein Dokument, welches an der Endung .htm (Microsoft) beziehungsweise der Endung .html (Unix)
hinter dem Dateinamen zu erkennen ist. Webseiten können unter anderem folgende Elemente enthalten.
1. Text
Der Text ist das erste Element, das beim Laden einer Webseite erscheint. Webseiten, die nur Text enthalten ermüden,
schrecken ab und laden wenig zum Verweilen aus. Webseiten werden erst durch Bilder lebendig.
2. Grafiken
Oft geschieht beim Laden vieler Webseiten zunächst gar nichts, weil erst ein Hintergrundbild oder das Logo geladen werden
müssen. Mancher potentielle Homepagebesucher verlässt bereits an dieser Stelle die Web-Site; er drücken auf das
Abbrechen- Symbol, denn der Besuch kostet ihn Telefon- und Onlinegebühren – und Zeit.
Es ist daher darauf zu achten, dass die Webgrafiken so klein wie möglich (in Bytes) gehalten werden. Um Bilddateien zu
minimieren kann man spezielle Komprimierungsprogramme nutzen. Als Webmaster müssen Sie immer einen Kompromiss
zwischen akzeptabler Ladezeit und Bildqualität eingehen.
Es gibt derzeit vor allem zwei Grafikformate, die im Internet verbreitet sind. Dateien mit der Endung .gif sind für Clipart
geeignet, Dateien mit der Endung .jpg für Fotos. An der Stelle, an der eine Grafik geladen wird, erscheint im Browser
zunächst ein Platzhalter; dort kann auch ein Alternativtext eingeblendet werden. Oft werden auch kleine Vorschaubilder
(Thumbnails) eingesetzt. Auf diese Miniaturbilder ist dann ein Link zur Originalgrafik gesetzt. Wenn Sie dem Besucher also
eine größere Grafik bieten möchten, dann bereiten Sie ihn darauf vor, indem Sie ihm mitteilen (mit Vorschaubild oder
Ersatztext), was er zu sehen bekommt, wenn er wartet. Es empfiehlt sich auch, einer größeren Grafik einen Text voranstellen
und so den Besucher mit dem Lesen von Text zu beschäftigen, während im Hintergrund die Grafik geladen wird.
3. Links („sensible Verknüpfungen“)
Über Links können Sie zu anderen Dokumenten verzweigen (Hypertext), sowohl zu „internen“ Dokumenten Ihrer eigenen
Homepage als auch zu „externen“ irgendwo im World Wide Web (www) . Es gibt Text-Links und grafische Links.
Bei Text-Links muss der unterstrichene Text angeklickt werden, bei grafischen Links die entsprechende Grafik bzw. ein
bestimmter Ausschnitt (Hotspot) einer Grafik (Imagemap).
Da Text-Links automatisch unterstrichen werden, sind weitere Unterstreichungen in Texten auf Webseiten nach Möglichkeit
zu unterlassen.
4. Tabellen
Tabellen sind für Webseiten sehr wichtig, auch wenn Sie diese auf einer Webseite oft nicht erkennen können.
Tabellen bestehen aus Zeilen und Spalten. Die einzelne Zellen können aber mit den Nachbarzellen verbunden werden, oder
eine Zelle kann geteilt werden.
Da in der HTML-Sprache absolute Positionsangaben z.B. für Grafiken oft nicht sinnvoll sind und die Texte nur links, rechts
oder zentriert ausgerichtet werden können, werden „blinde Tabellen“ (Tabellen, deren Zellengrenzen nicht dargestellt
werden) in Webseiten schwerpunktmäßig für Formatierungen verwendet.
In HTML wird eine neue Zeile nur begonnen, wenn Sie diese explizit festlegen. Ansonsten werden Ihre Texte mit den
Grafiken usw. einfach im Fließtext dargestellt. Je nach Bildschirmauflösung wird dieser Fliesstext dann unterschiedlich
„proportioniert“. Benutzer an Monitoren mit unterschiedlicher Auflösung (Anzeigeformaten z.B. 640 *480 Pixel, 800*600
Pixel oder 1024*768 Pixel) sehen also etwas Unterschiedliches.
5. Frames (Rahmen)
Sie bieten die Möglichkeit auf der Homepage gleichzeitig mehrere Webseiten nebeneinander anzuzeigen und diese
unabhängig voneinander zu steuern. In jedem Frame kann dabei eine beliebige Webseite, auch von fremden Anbietern,
angezeigt werden. Allerdings ist die Nutzung der Frame- Technik problematisch, wenn nicht eindeutig erkennbar ist, dass es
sich um die Seite eines anderen Anbieters handelt. Frames haben zwei bedeutende Nachteile: Erstens wird die Webseite
langsamer geladen. Verwenden Sie z.B. vier Frames, dann müssen fünf Webseiten geladen werden: eine, in der die Größe,
Art und Adresse der einzelnen Frames definiert wird und die vier Webseiten mit den entsprechenden Inhalten. So kann es
einige Zeit dauern, bis der Benutzer die Startseite Ihrer Homepage sieht. Zweitens können Suchmaschinen die Mega-Tags im
HTML-Code der einzelnen Frames nicht auswerten. Ausgewertet wird nur die Information der Seite, welche die einzelnen
Frames definiert (diese wird zumeist index.htm genannt).
6. Meta-Tags
Meta-Tags sind Informationen, die in den Quellcode der Webseite eingetragen werden, für den Leser (mit Ausnahme
des Seitentitels in der obersten Zeile des Browsers) aber nicht erkennbar sind. Diese Informationen sind jedoch für
Suchmaschinen von größtem Interesse. Über sie kann eine Beschreibung des Inhaltes vorgenommen werden. Sehr wichtig ist
der Eintrag von Stichworten, unter denen das Dokument gefunden werden soll. Daneben können Erstellungsdatum und z.B.
der Name des Autors eingetragen werden.
1
Welcher Voraussetzungen bedarf es, um gelungenen, attraktive Webseiten zu entwerfen?
Software
Neben einem multimediafähigem PC und einem Internetzugang benötigt ein „Webmaster“ diverse Software:
zumindest einen Browser (Internet Explorer, Netscape Navigator, Opera,...) und einen HTML-Editor (z.B.
Dreamweaver, Fusion, Home Site, NetJet, FrontPage...). Von Nutzen ist mit Sicherheit ein leistungsfähiges
Grafikprogramm (z.B. Paint Shop Pro, Picture Publisher...), eventuell Animationssoftware (z.B. Macromedia
Flash, Live Motion...) , Pack-Programme (z.B. WinZip oder WinRAR, um Dateien für den Download in ihrer
Größe zu komprimieren), eine OCR-Software (z.B. Fine Reader, Textbridge,...um Texte zu digitalisieren), ein
FTP-Programm (z.B. WS_FTP Pro, für den Upload, um die fertigen Webseiten ins Netz zu stellen) ,
Promotion-Tools (Hello Engines, Promoware, SubmitWolf...um die Homepage bei den diversen
Suchmaschinen anzumelden), usw. Die Liste ließe sich um viele kleine Programme bereichern, welche die
Arbeit erleichtern oder optimieren können. (Wichtige Tools für Webmaster bei www.webmasterplan.de , s.u.)
Webdesigner
Viel wichtiger als Hardware und Software sind aber die Fähigkeiten, die der Webdesigner selbst mitbringt.
Zitat aus einer Internetquelle, leicht verändert (www.ideenreich.com/webdesign/index.shtml, 14.05.2001)
Was braucht man zum Webdesigner?
Im Web zu publizieren ist so einfach, dass es eigentlich jeder tun kann. Das Problem ist, dass es auch jeder macht.
Unzählige missratene Seiten bevölkern das Netz-Universum, denn vom Homepagebastler zum Web-Designer ist der
Weg weit.
Abgesehen davon, dass man hier wie anderswo Stil, Geschmack, Ausdauer und Biss mitbringen muss, fehlt oft
sogar das nötige Handwerkszeug. Software kann man, so es der Geldbeutel erlaubt, überall kaufen. Das nötige
Know-how jedoch muss erworben und trainiert werden.
Manchem gelingt mit simplen Programmen der große Wurf, den Mitbewerber trotz luxuriösen Equipments nie
erreichen. Die Sache ist vielschichtig, Kreativität ist hilfreich, aber nicht zwingend notwendig. Der Rest ist pures
Handwerk. Web-Design ist Aufbreitung von Information und Kommunikation, die Präsentation muss sich ihm
unterordnen.
Wer sich als Macher im Web bewegen will, sollte das Web kennen. Dazu ist es nicht notwendig von Anfang an
dabei gewesen zu sein, zu jenen alten Hasen zu zählen, die schon alles gesehen und alles mitgemacht haben. Über
wache Sinne sollten Sie jedoch verfügen. Versuchen Sie offen gegenüber Ihren Kollegen und den Arbeiten anderer
zu sein. Lernen Sie das Web kennen. Durchstöbern Sie es und bleiben Sie nicht an der Oberfläche kleben. Bevor Sie
mit irgendetwas loslegen, surfen Sie sich die Finger wund.
Und seien Sie konsequent. Folgen Sie jedem Link, auch und gerade wenn er nichts verheißt. Verbringen Sie Ihre
Tage im Internet und nicht wo anders; dazu ist später noch Zeit. Ein guter Web-Designer ist besessen von seinem
Tun, gleich ob er es für sich selbst unternimmt oder für einen Auftraggeber. Vielleicht gelingt es Ihnen ein Gespür
für die Ideen der Design zu entwickeln. Eine Methode ist es, zu auf die Fehler und Vergehen zu achten. Die nämlich
fallen schnell ins Auge und werden häufig gemacht.
Eine andere Methode besteht daran, den Besten nachzueifern. Unglücklicherweise sind die Besten nicht auf den
ersten Blick zu erkennen, denn es gibt kaum Regeln nach denen sich die Sache fassen ließe. Die besten Chancen
hat, wer über Stil und Geschmack verfügt, womit wir wieder am Anfang wären. Man kann das - Neugier
vorausgesetzt - trainieren, durch beständiges Surfen. Das nötige Handwerkszeug eignet man im Laufe der Zeit fast
von selbst an. Und wenn Sie eines Tages von Quellcodes träumen, dann haben Sie wohl alles richtig gemacht.
Auch, wenn man nicht allen Ausführungen zustimmen mag, so scheinen Kreativität, Geschmack und Stil,
Neugier und Lernfähigkeit, Ausdauer und Geduld wesentliche positive Charakter- und
Temperamentsmerkmale zu sein. Handwerkszeug und Know-how lassen sich erarbeiten;
Frustrationstoleranz und Kreativität sind schwerer zu erlernen als das Optimieren einer Webgrafik oder
das Erstellen von Metatags und Imagemaps.
2
Die perfekte Webseite: Inhalt und Form
Wichtig sind m.E. vor allem auch, dass der Webmaster die Inhalte seines Webauftritts redaktionell gewissenhaft
bearbeitet und dass die perfekte äußere Form (das Layout und Design) nicht über den „Gehalt“ der Seiten
gestellt wird.
Untersuchungen von Professor Gerhard Schub von Bossiazky an der Fachhochschule Düsseldorf belegen, dass der Surfer
wirklich nach Inhalten, Kompetenz, Nutzwert und Informationen sucht.
Was Surfer von einer Seite erwarten lässt sich in acht Punkten zusammenfassen:

Aktuelle Informationen

Verständliche Informationen

Kompetente Suchfunktion

Informationsgehalt

Nutzen

Kompetenz

Attraktive Gestaltung

Schnelle Dialogmöglichkeit
Auch die Flops wurden ermittelt: Sechs Punkte, die Surfer am meisten nerven:

Unübersichtlichkeit

Keine Reaktion auf Anfragen

Unverständliches, Unklares

Geringer Informationsgehalt

Falsche Versprechungen

Unzureichende Beantwortung von Emails
Quelle: http://www.ideenreich.com/webdesign/perfekte_seiten.shtml
Anmerkung: Meines Erachtens fehlen unter den „Flops“ die langen Ladezeiten überfrachteter Startseiten!
Vorgefertigte Designs
Mit eigenem Entwurf und originellen Ideen liebevoll gestaltetet Webseiten wirken authentischer und
ansprechender als perfekte „windschnittige“ Webseiten „von der Stange“.
Deshalb möchte ich nicht näher auf die Design-Vorlagen eingehen, die FrontPage bei der Erstellung eines neuen
Webs anbietet. Sie sind in Ihrem Formatierungen, in der farblichen Gestaltung und der angelegten
Navigationsstruktur vollkommen – aber man sieht sich sehr schnell satt an ihnen.
Nur mit Kreativität und Mut lässt sich der zunehmenden Uniformität begegnen, die durch Designvorlagen in
Web-Editoren wie FrontPage oder Präsentationsprogrammen wie PowerPoint gefördert wird.
3
Webseiten aus dem Internet kopieren
Das Kopieren und Überarbeiten von Webseiten aus dem Netz ist kinderleicht und geht beim Internet Explorer
mit einem Mausklick auf die Schaltfläche „Bearbeiten“ in der Menüleiste.
Die gerade geöffnete Webseite wird in FrontPage geladen und kann
dort den eigenen Bedürfnissen angepasst werden. Achtung! Nicht nur
die Seite bearbeiten, sondern auch die Metatags im Quellcode (z.B.
Autor, Seitentitel, Schlüsselbegriffe, Kurzbeschreibung – sonst fällt
der Schwindel auf!
Rechtliche Aspekte beim „Seitenklau“ (Urheberrechte)
Die oft geäußerte Meinung, Internetinhalte seien ohne Copyright-Verletzung nutzbar, ist falsch. Im
Internet veröffentlichte HTML-Dokumente, Grafiken, Texte oder Musikstücke sind grundsätzlich nach
dem Urheberrechtsgesetz geschützt, sofern es sich um Werke handelt, die eine „persönliche geistige
Schöpfung“ darstellen. Davon ist bei selbstgestalteten Webseiten auszugehen. Der Urheber hat das
ausschließliche Recht, sein Werk zu verwerten, insbesondere hat er das Vervielfältigungs- und das
Verbreitungsrecht. Nicht nur das Design einer Webseite (der HTML-Code), sondern auch ihre Inhalte
genießen denselben urheberrechtlichen Schutz, als wenn sie in Printmedien erscheinen, sofern sie eine
„bestimmte schöpferische Gestaltungshöhe“ erreichen (das ist z.B. bereits bei Linksammlungen der Fall).
Auch die weit verbreitete Meinung, nur mit einen Copyright-Vermerk des Autors versehene Werke seien
geschützt ist irrig. Kurzgesagt: Design und Inhalte fremder Webseiten sind nicht frei verwertbar!
GOLDHTML von Stefan Karzauninkat
oder „Was ist gutes, was ist schlechtes Webdesign?“
Es lässt sich bekanntlich aus guten und aus schlechten Beispielen lernen.
70 Empfehlungen für schlechtes Design hat Stefan Karzauninkat im Internet veröffentlicht.
Sein GOLDHTML lässt sich unter der Adresse http://www.karzauninkat.com/Goldhtml bewundern und als
gezippte Datei mit nur 71 KB Dateigröße herunterladen.
Download
möglich!
Hier zwei von siebzig Fingerzeigen, wie man es nicht machen sollte:
1. Tipp (zur Gestaltung der Texte)
G e en
große
Verwenden Sie bei jeder
el g
heit viele unterschiedlich
und farbige Fonts. Die
Lesbarkeit wird enorm verbessert, Sie erreichen eine gesteigerte Aufmerksamkeit, mehr Lesefreude und
der Betrachter freut sich zu sehen, wie viele
inken
noch bl
Farben es doch gibt. Wenn Sie die Schrift dann auch
lassen, wird die Begeisterung keine Grenzen kennen.
2. Tipp (zur Dateigröße der eingebundenen Grafiken)
Benutzen Sie viele und große Grafiken. So muss sich kein Brillenträger mit briefmarkengroßen
Abbildungen die Augen belasten und Sie können Ihr grafisches Talent voll präsentieren. Nebenbei wird so
der Druck auf alle Beteiligten erhöht, endlich für mehr Bandbreite im Netz und damit
Übertragungskapazität zu sorgen.
Speichern Sie Ihre Grafiken grundsätzlich mit voller Farbtiefe und möglichst geringer Kompression.
Schließlich soll ja die volle Qualität beim Betrachter ankommen. Jeder ist selbstverständlich bereit, dafür
lange Ladezeiten in Kauf zu nehmen. Bestimmt!
4
Zum Abschluss noch drei weitere Internet-Tipps für Webmaster:
SELFHTML von Stefan Münz
Das beste und vollständigste Lehrbuch (1000 Seiten) zum Erstellen
von Webseiten / HTML-Dokumenten gibt es kostenfrei im Internet
unter der Adresse: http://www.teamone.de/selfhtml
Hier finden Sie Antworten auf alle Fragen. Sie können sich SELFHTML in der Version 7.0 auch kostenlos als
Zip-Datei (2,42 MB Dateigröße) auf Ihren Rechner laden und besitzen dann (nach ca. 10 Minuten DownloadZeit) ein tolles Kompendium zum Webseitenerstellung und Grafikbearbeitung und...
Download
möglich!
Die Suchfibel von Stefan Karzauninkat
Als „Webmaster“ sollten Sie über die Funktion von Suchmaschinen und Webkatalogen Bescheid wissen, denn
nur wenn Ihre Seiten dort indexiert bzw. eingetragen sind, werden Sie im World Wide Web auch gefunden.
Die besten Informationen zu Suchdiensten im Internet gibt es wiederum online und kostenlos unter der
Adresse: http://www.suchfibel.de
Autor ist wiederum Stefan Karzauninkat, der seine tolle Suchfibel auch als Buch mit CD-ROM zum Preis von
39,80 DM anbietet.
Webmasterplan: Tools zum Optimieren von Websites und zur Promotion
Ist Ihre Website im Design gelungen, lohnt es sich
überprüfen zu lassen, ob Sie hinsichtlich
 der Ladezeit
 des HTML-Codes
 der Metatags
noch zu optimieren ist.
Das und vieles mehr – z.B. den Eintrag in
Suchmaschinen – leisten die kostenlosen Tools von
Webmasterplan.
Sie erreichen diesen Webmaster-Service auch unter
www.webmasterplan.de
Gerald Kiefer, Mai 2001
5