Autor: Sachße, Wolfgang.

Titel: Aller Anfang ist leicht: Web-Design für Einsteiger.

Quelle: Günther Anfang/Kathrin Demmler/Klaus Lutz (Hrsg.): Erlebniswelt Multimedia. Computerprojekte mit Kindern und Jugendlichen. Materialien zur Medienpädagogik Band 2. München 2001. S. 50-54.

Verlag: kopaed verlagsgmbh.

Die Veröffentlichung erfolgt mit freundlicher Genehmigung des Verlags.

Wolfgang Sachße

Aller Anfang ist leicht: Web-Design für Einsteiger

Um im Internet selbst aktiv zu werden, braucht man die gleichen Geräte wie zum Surfen: einen Rechner, der mit Modem oder ISDN-Karte an das Telefonnetz angeschlossen ist und einen aktuellen Browser. Damit man sich mit dieser Ausstattung im Internet bewegen kann, ist noch eine Zugangsberechtigung oder ein Account von einem Internet-Provider notwendig. Zum Surfen kann man den Provider unter Umständen call-by-call wählen, also von Fall zu Fall je nach Tageszeit den Anbieter mit dem günstigsten Minutenpreis aussuchen. Für den Web-Auftritt ist jedoch ein eigener Platz mit fester Adresse (z.B. www.unserprojekt.de) im Internet erforderlich, den man bei einem Provider anmietet. Dort speichert man seine Seiten ab und macht sie der Internetgemeinde zugänglich. Um zu einem eigenen Platz zu kommen, schließt man einen Vertrag mit einem Anbieter ab. Die meisten Internetprovider bieten neben dem Zugang ins Internet und weiteren Diensten auch kostenlosen Webspace an. In vielen Städten gibt es für Initiativen aus dem Jugend- und Kulturbereich zusätzliche kostenlose Möglichkeiten, um z.B. von der Kommune gratis Webspace zu erhalten.

Software zum Erstellen der eigenen WWW-Seiten

Ist die Adresse besorgt und der Webspace vertraglich gesichert, benötigt man eine Software, mit der man das gestalten kann, was später im WWW zu sehen sein soll. Was machen diese Programme? Sie erzeugen eine Steuerdatei in HTML (HyperTextMarkupLanguage), „der Sprache des Web“, die von den Browsern verstanden wird und die Inhalte auf den Bildschirmen der Nutzer darstellt.

Der harte Weg

Wer wissen möchte, was hinter HTML steckt oder wie man direkt mit HTML Seiten erstellt, findet bei Stefan Münz im Internet unter http://www.teamone.de/selfhtml den perfekten Zugang. Doch es gibt auch andere Möglichkeiten.

Shareware und Freeware

Auf den Heft-CDs von Internet-Zeitschriften und im Internet befinden sich Programme (HTML-Editoren), mit denen man Web-Seiten erstellen kann, als Shareware oder Freeware. Im Dezember 2000 standen z.B. unter http://www.freeware.de mehr als 20 dieser Programme zum kostenlosen Download bereit.

Officepakete

Die Textverarbeitungen fast aller Officeprogramme (z.B. WordPerfect, StarOffice, WinWord) bieten die Möglichkeit der Umwandlung von Dokumenten in HTML-Code. Man schreibt den Inhalt der zukünftigen Webseite in der Textverarbeitung und „exportiert“ den Inhalt als eine HTML-Datei. Leider ist das Ergebnis bei komplizierteren Seiten mehr als dürftig und bläht die Datenmenge einer Datei unnötig auf. Zur Entschlackung so entstandener HTML-Dateien gibt es vom WWW-Konsortium unter der Adresse http://www.w3.org/People/Raggett/tidy/ das Programm TIDY (heißt wie eine berühmte US-Waschmittelmarke) zum Download. Das speckt den aufgeblähten Office-Code ab und macht die Dateien um bis zu 80% kleiner. (Allerdings: Englischkenntnisse und Computererfahrung sind Bedingung)

Benutzung von Vorlagen

Wenig kreativ, aber für den Anfang eine gute Möglichkeit, um Erfahrung zu sammeln, ist die Benutzung von HTML-Vorlagen. „Zur eigenen Website in fünf Minuten – mehr als 500 Vorlagen“ oder ähnlich heißen die Produkte für 20 bis 50 Mark, die verschiedene Verlage anbieten. Man muss nur noch per mitgeliefertem Editor die entsprechenden Inhalte einsetzen und hat dann eine „eigene“ Seite.

„Bundles“ vom Provider

Kommerzielle Provider wie z.B. strato oder 1&1 bieten ihren Kunden bei Abschluss eines Vertrags über Webspace die passende HTML-Gestaltungssoftware mit an (Bundle). Sie ist abgestimmt auf die Möglichkeiten des jeweiligen Providers und meist gut zu gebrauchen. Trotzdem sollte man abwägen, ob die „kostenlose“ Paket-Software die Bindung an den Provider wert ist.

Software um die Seiten vom heimischen Rechner zum Provider zu senden

Wenn die Seiten gestaltet sind, müssen sie noch beim Provider abgespeichert werden. Dies geschieht über die Telefonleitung mit Hilfe einer geeigneten Software. Diese Software wird meist vom Provider zur Verfügung gestellt oder steht als Freeware (z.B. „ws_ftp“) im Netz.

Hilfestellung bei Problemen

Die beste Hotline in allen Fragen rund um die Computerwelt ist immer noch der Draht zu gleichgesinnten Menschen am selben Ort. Man muss nicht immer das Rad neu erfinden und nach Aktenlage recherchieren. Ein Gespräch unter Leuten mit ähnlichen Interessen, die schon etwas Erfahrung haben, gibt oft gute Orientierung und praxisnahe Tipps. Gute Programme sind wichtig, aber noch wichtiger ist, dass man jemanden schnell anrufen und um einen Tipp bitten kann. Wenn ich für meine Arbeit Software anschaffe, frage ich erst im Bekanntenkreis, mit welchen Programmen sie arbeiten und wie sie damit zurechtkommen. Dann entscheide ich mich meist für die Software mit dem größten Zuspruch. So ist eine persönliche Hotline möglich, von der ich profitieren und in die ich auch meine Erfahrungen einbringen kann. Denn: Programme sind nur so gut wie die Erfahrungen und Kenntnisse der Leute, die damit arbeiten. Andere Initiativen haben vielleicht schon konkrete Erfahrungen gemacht und sie kennen sich mit den Gegebenheiten vor Ort aus. Wo gibt es gute lokale Anbieter, welche kommunale Unterstützung gibt es für Netz-Projekte (Webspace, Support etc.).

Im Kopf geht es weiter: WWW-Gestaltung

„Aber WWW, wenn ich auf das Ende seh“‘, so ähnlich hat schon Wilhelm Busch in seinem berühmten Comic-Vorläufer „Max und Moritz“ getextet. Damit es uns mit WWW-Projekten nicht ähnlich ergeht, habe ich ein paar Orientierungspunkte zusammengetragen.

Wer Webseiten gestalten möchte, wird technisch nicht alleine gelassen. Die besten Tools gibt es mittlerweile zum Schleuderpreis und der „Homepage-Baukasten“¹ des „Mega-Software Bundle“ ist manchmal im Preis für den Webspace gleich inbegriffen. Alles kein Problem: „Dieses Werkzeug bietet präzise Kontrolle über das Layout sowie eine unglaubliche Entwurffreiheit!“², kann man lesen. Aber wohin mit soviel Freiheit und welche Kontrolle über welches Layout? „Per Knopfdruck zur perfekten Website in zehn Minuten“, das wird ein Traum bleiben. Eigene Gedanken und Überlegungen sind weiterhin der erste Schritt zur gelungenen Website im Netz.

Hier helfen die berühmten „W-Fragen“ bei der Konzeption von Websites weiter. Wen wollen wir ansprechen? Was ist unser Anliegen? Wie stellen wir uns vor? Welchen Stil wählen wir? usw. usw. Kurz, es lohnt sich, vorher (schriftlich und in der Gruppe) zusammenzutragen, welche Ziele wir mit unserem Auftritt im Netz erreichen wollen, um uns dann über die Umsetzung Gedanken zu machen. Doch, wie auch immer das Ergebnis dieser Überlegungen aussieht, einige Grundregeln solltet ihr dabei auf jeden Fall beachten.

Die eigene Site mit verschiedenen Browsern ansehen

Ihr gestaltet die absolute Spitzenseite, tolle Effekte, on-mouse-over, Java Scripts, alles vom Feinsten, aber als ihr die Seiten auf einem anderen Rechner anschaut: Sendepause, Script-Error, Sorry No Java, Tabellen mit anderen Farben, nix schaut aus wie gerade noch daheim, etc. Was ist passiert? Vielleicht ist auf dem neuen Rechner ein anderer Browser, vielleicht nur eine andere Browserversion oder ein anderes Betriebssystem installiert. Man muss beachten: Wenn Ihr Seiten ins Netz stellt, dann ist das in etwa so, wie wenn ein Komponist Noten auf ein Blatt Papier schreibt und jemand anderes diese Noten auf seinem Instrument spielt, um anderen die Komposition vorzustellen.³

Wenn die Komposition einfach ist, kann jeder die gespielte Melodie erkennen, ganz gleich ob sie auf einer Blockflöte oder einem Klavier gespielt wird. Ist die Komposition aber technisch anspruchsvoller und ausgefeilt, zum Beispiel mehrstimmig mit Schlagzeug und Chor, dann tut sich eine Einzelperson mit Mundharmonika schwer, anderen diese Komposition vorzuspielen und dabei einen befriedigenden Eindruck von dem zu vermitteln, was der Komponist ursprünglich gemeint hat. So ähnlich geht es den Browsern auf den verschiedenen Rechnern eurer Besucher. Auch sie können nicht immer alles, und haben unter Umständen nur eingeschränkte Fähigkeiten im Vergleich zu dem von euch derzeit benutzten Superbrowser.

Abhilfe:

HTML-Tags benutzen, die von möglichst vielen Browsern aller Systemwelten verstanden werden, HTML-Generatoren auf möglichst hohe Kompatibilität einstellen, Hardcore: unterschiedliche, browserspezifische Versionen parallel ins Netz stellen.

Ladezeiten beachten

Beim Programmieren und Ausprobieren von Websites bewegt man sich überwiegend auf dem eigenen Rechner. Das hat zur Folge, dass alles angenehm schnell geht: Bilder laden wie nix, das animierte GIF startet sofort, und sogar Sounddateien sind sofort zu hören. Dadurch tappt man leicht in die „Ladezeit-Falle“. Wenn man die Webseite dann im „wirklichen Leben“ über einen Rechner im WWW betrachtet, macht sich Frustration breit: Es lädt und lädt ... noch 15 Objekte zu laden ... und die schönen Abläufe ruckeln und stolpern, dass es keine Freude mehr macht. Es ist derselbe Effekt, als wenn jemand ungeschickt, stockend und langatmig einen Witz erzählt und einfach nicht zur Pointe kommt: Langeweile und Frust machen sich breit und bei der nächsten Begegnung wechselt man auf die andere Straßenseite: Nicht der schon wieder!

Abhilfe:

Ladezeiten optimieren: z.B. Grafiken durch Komprimierung optimieren, große Javascripte sparsam einsetzen, Bilder mit kleineren Vorschaubildern ansteuern und Dateigröße der aufgerufenen Datei bekannt geben, Inhalte auf mehrere Seiten verteilen, HTML-Code abspecken durch Tools (z.B. Tidy)

Orientierung geben

Eine Website ist dann am besten, wenn der User sich keine Gedanken machen muss, wie er sie benutzen soll. Er ruft sie auf, klickt an den richtigen Stellen, bewegt sich zu den gewünschten Inhalten und weiß immer, wie er wohin kommt und wo er gerade ist.

Um diesem hochgesteckten Ziel näher zu kommen lohnt es sich, einige – zwar ungeschriebene, aber von den meisten Menschen unbewusst befolgte – Regeln zu berücksichtigen.

Weniger ist (meistens) mehr ...

Auffallend ist alles, was anders als das Umfeld aussieht, was also neu ist, sich abhebt und unterscheidet. Jeder weiß das eigentlich. So ist sofort klar, dass ein einzelner funkelnder Diamant auf einer einfarbigen Unterlage mehr auffällt, als in einem Haufen anderer Diamanten, und seien alle auch noch so kostbar und einzigartig. Denn, wenn alles besonders ist, ist nichts mehr besonders auffällig. Übertragen auf die Web-Gestaltung heißt das: Ein einziger als „Ani-Gif“ blinkender Pfeil auf einer Web-Seite steigert die Aufmerksamkeit. Zwanzig blinkende Pfeile haben aber nicht die 20fache Wirkung, sondern neutralisieren sich.⁴

Deswegen gilt: Hervorhebungen durch grafische Effekte überlegt und sparsam einsetzen, damit nicht ein Effekt den anderen überdeckt und damit die Klarheit der Aussage schwächt.

Eindeutigkeit: ein Link ist ein Link und nicht ein unterstrichener Text

Im Web besteht die Möglichkeit, durch Anklicken von Texten oder Objekten weitere Aktionen auszulösen. Bei Texten ist dies oft durch eine Unterstreichung und eine andere Farbgebung angezeigt. Deswegen: Unterstreichen und Textfärbungen nur für Links verwenden, sonst geht die Eindeutigkeit verloren, und der User hat das irritierende (und falsche) Gefühl: Mal funktionieren die Links und dann wieder nicht! Dies passiert, wenn er unterstrichene Textstellen anklickt, die gar nicht als Link gemeint sind. Ähnliches gilt für Grafikelemente: Buttons mit Links sollen sich im Aussehen klar von illustrierenden Hinweisen und anderen Grafikelementen unterscheiden. Die Klarheit des Stils für die einzelnen Funktionen ist hier besonders wichtig.

Die Rot-Grün-Falle

Bei der Orientierung auf Webseiten spielen Farben eine große Rolle. Oft werden dabei rot und grün als gegensätzliche Hinweisfarben verwendet. Schlecht für 4% der männlichen Nutzer, also jedem 25ten, denn sie sind rot-grün-blind. Das heißt, beide Farben werden von ihnen als grau empfunden und verwechselt.

Olee, Olee, Olee ... OLE

OLE steht in diesem Fall für „obere linke Ecke“. Das ist der Ort, an den sich Betrachter einer Seite stets zuerst orientieren. Deswegen spricht viel dafür, dass an dieser Stelle ein stets auf jeder Seite wiederkehrendes Logo oder ein sonstiger Hinweis auf euern Namen steht. Und wenn es schon nicht die „obere Linke Ecke“ ist, so hilft es schon, wenn zum Beispiel am Ende jeder Seite euer Name und eine kleine Wiederholung der Navigation in Textform steht. Immer wiederkehrende Elemente erhöhen die Orientierung eurer Nutzer und erleichtern die Bedienung der Site.

Heute hier, morgen dort: User fort

Wenn ihr euer Webangebot plant, so ist es sinnvoll, euere Unterverzeichnisstruktur so anzulegen, dass, auch bei einer Umstrukturierung der Web-Seite, einzelne Bereiche in den jeweiligen Unterverzeichnissen bleiben können. Der Grund: Suchmaschinen durchstöbern eure Web-Seiten und registrieren, wo welcher Inhalt steht. Diese Verzeichnisse werden nicht sehr häufig aktualisiert. Das hat zur Folge, dass eure Inhalte evtl. nicht mehr gefunden werden, wenn ihr sie in andere Unterverzeichnisse verschiebt, weil die Suchmaschine noch die alte Position gespeichert hat. Ähnliches gilt natürlich für einen Wechsel eurer Adresse im Web, ohne entsprechende Umleitung an der alten Adresse.

Zusätzlich lohnt es sich, die obersten Seiten einer Untergruppe immer gleich, z.B. „index.htm“ zu nennen. Denn, wenn sich Nutzer von unteren Ebenen durch Löschen der letzten Substruktur in der URL nach oben hangeln, landen sie immer auf einer sinnvollen Seite.

Von anderen lernen

Auch im Web kann man das meiste von Vorbildern lernen. Surft, so viel ihr könnt und immer, wenn Euch eine Website gut gefällt, setzt ein „Bookmark“ darauf und zeigt sie anderen. Besprecht mit ihnen, was euch daran gefällt und welche Elemente ihr für Eure Site übernehmen wollt. Im Quellcode könnt ihr viel über die Programmiertricks der anderen (oder über die Generatoren, die sie verwenden) lernen. Lasst euch anregen und übertragt die Beispiele auf eure Bedürfnisse. Bookmarkt auch die hässlichen Seiten und versucht herauszufinden, was euch daran so missfällt.

Das wichtigste am Schluss:

Wendet alle Regeln an und werft alle Regeln über den Haufen. Probiert aus, was ihr selber auf die Beine stellen könnt.

INTERNETADRESSEN

http://www.teamone.de/selfhtml

http://www.freeware.de

http://www.w3.org/People/Raggett/tidy/

Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Jede Verwertung außerhalb der engen Grenzen des Urheberrechtsgesetzes ist ohne Zustimmung des Rechteinhabers unzulässig und strafbar. Das gilt insbesondere für Vervielfältigungen, Übersetzungen, Mikroverfilmungen und die Speicherung und Verarbeitung in elektronischen Systemen.