Tipps zur Erstellung von Webseiten

Icon Webseitenerstellung Dieser Artikel richtet sich vor allem an jene, die mit der Thematik Webseitenerstellung begonnen haben. Einige Punkte sollten im Vorfeld gut bedacht werden, um ein solches Projekt möglichst effektiv anzugehen.
Sicherlich werden nur einige der wichtigsten Punkte genannt, schließlich möchte ich kein Buch schreiben. Mir geht es mehr darum gerade jenen, die beginnen sich mit dem Thema Webseitenerstellung respektive Webdesign zu beschäftigen, einige Umwege zu ersparen. Mit der entsprechenden Vorbereitung kommt man einfacher und schneller zum Erfolg.

Im Zentrum steht der Inhalt

Als wichtigster Punkt sollte immer der Inhalt gelten. Eine Website als Selbstzweck zu publizieren, nur weil die Fähigkeit dazu besteht, ist eigentlich nutzlos. Vielmehr sollte die Frage lauten, ob für die Inhalte eine Leserschaft zu erwarten ist. Nur wenn diese Frage positiv beantwortet werden kann, sollte ein entsprechendes Projekt auch wirklich umgesetzt werden.
Ob man sein Hobby mit anderen teilen möchte und dazu hilfreiche Tipps bereitstellt, oder etwas verkaufen oder anbieten möchte, wie Waren oder Dienstleistungen, ist von Bedeutung.
Besonders am Inhalt und der zu erwartenden Zielgruppe sollte man sich in Bezug auf die Darstellung der Webseite orientieren. Ein Photograph oder Maler liegt sicherlich die Schwerpunkte eher auf die optische Darstellung und das Design und weniger auf geschriebene Texte. Bei einem Fachartikel zu einem technischen Thema würde das gleiche Design dagegen schnell überzogen wirken und eher von den eigentlichen Inhalten ablenken.
Sofern man das Design daher nicht begründet als bestimmendes Merkmal definieren will, sollte zuerst der Inhalt die Form bestimmen.

Unabdingbar ist am Beginn vor allem eine klare Strukturierung. Wenn Sie ein Buch lesen, schätzen Sie sicher einen guten Index und ein strukturiertes Inhaltsverzeichnis, das Sie schnell zu den gewünschten Inhalten führt. Noch viel wichtiger ist dieser Punkt bei einer Webseite.
Wenige Menschen sind ungeduldiger als Internetnutzer. Die nächste Webseite ist nur ein, zwei Klicks entfernt. Daher erscheint es gerade bei dem Medium Internet besonders wichtig, eine klare Struktur der Seite zu schaffen und dem Besucher die Möglichkeit zu geben, schnell das Gesuchte zu finden. Sinnvoll sind daher erklärende Inhalte im title-Attribut von Verweisen (Links), um schon vor dem Anklicken einen Hinweis zu geben, wohin der Link führen wird.

Ein wirkungsvolles Mittel, die Struktur zu planen, ist eine Art Hirachiediagramm. In diesem werden die Inhalte zusammengestellt und ein Zusammenhang entwickelt, der dann während der Webseitenerstellung umgesetzt wird. Diese Orientierungshilfe wird beonders mit wachsendem Umfang des Projektes an Bedeutung gewinnen. Dabei ist es sinnvoll, vorrausschauend zu planen:

  • Wo werden in der Zukunft noch Inhalte hinzukommen oder sich verändern?
  • Wie kann die Webseitenstruktur dem am Besten Rechnung tragen?
  • Welche Bereiche sollen angelegt werden, wie sollen die Seiten untereinander in Beziehung gesetzt und verlinkt werden?
  • Ergibt sich eine thematische Hierarchie oder stehen die Seiten eher gleichberechtigt nebeneinander?

Aus diesen Punkten ergibt sich eine entsprechende Struktur praktisch von alleine als logische Konsequenz.
Ein Beispiel für ein solches Diagramm kann (m)eine Sitemap sein, in der die gesamte Struktur aller Webeiten der Projekts zueinander dargestellt ist.

Diese Überlegungen sollten auf jeden Fall abgeschlossen sein, noch bevor die ersten Zeilen Code geschrieben werden. Eventuell lassen sich später noch Änderungen einflechten, aber der grundsätzliche Aufbau sollte soweit überdacht worden sein. Nur so kann zuverlässig vermieden werden, dass man sich während des Erstellungsprozesses verzettelt. TOP

Barrierefreie Webseitenerstellung

Was heißt barrierefrei? Man könnte auch formulieren: zugängliches Webdesign. Grob gesagt bedeutet das, die Inhalte der Webseite sollen für möglichst jeden Besucher zugänglich sein.
Das beinhaltet Menschen mit Sehschwächen genauso wie Menschen mit motorischen oder anderen Einschränkungen. Zudem Besucher mit einem reinen Textbrowser oder via Mobiltelefon oder PDA.
Daraus ergeben sich entsprechende Punkte auf die besonders Wert gelegt werden sollte. Einige der Wichtigsten möchte ich nachfolgend kurz ansprechen:

Sehbehinderte Besucher

Nicht jedem ist die Existenz von Screenreadern bekannt. Diese Programme sind in der Lage die Inhalte von Webseiten vorzulesen. Ebenso gibt es Maschinen, die Webseiten in Blindenschrift übertragen. Damit diese Programme möglichst reibungslos funktionieren, ist es wichtig bei der Webseitenerstellung die Standards zu beachten, wie sie vom W3C (extern) formuliert werden.
Besonders ungeeignet für Screenreader sind so genannte Tabellenlayouts. Können Sie sich vorstellen was herauskommt, wenn ihnen ein Tabellenlayout vorgelesen wird? Benutzen Sie bitte Tabellen nur für tabellarische Daten, nicht um ein Layout zu fixieren. Das lässt sich zumeist mit CSS eleganter und vor allem zugänglicher realisieren. Zudem bleibt der HTML-Quellcode schlanker und einfacher zu warten.
Weiter gehört dazu auch, das alt-Attribut im img-Tag von Bildern mit einem beschreibenden Text zu füllen. „Bild 1” ist an dieser Stelle völlig sinnlos.
Besser wäre beispielsweise: „Ein Sonnenuntergang über dem Meer”.
Damit können sich auch Menschen etwas vorstellen, die nicht in der Lage sind das Bild zu sehen.

Ebenso wichtig ist eine leichte Steuerbarkeit des Menüs, optimaler Weise auch ohne Maus, nur mittels Tastaturengaben.
Ferner die sollte die Möglichkeit, die Schriftgröße der Website an die Bedürfnisse des Besuchers anzupassen, nicht verhindert werden, indem man Schriftgrößen in Pixel definiert. Einheiten wie Prozent oder em sind dem vorzuziehen.

Graustufendarstellungzum Vergrößern anklicken Eine kontrastreiche Darstellung ist notwendig, um Personen mit Schwierigkeiten im Farbensehen nicht auszuschließen. Wäre Ihre Webseite in Graustufendarstellung immer noch gut lesbar? Nur dann wäre sie auch für Farbenblinde gut zugänglich.

Das ist bei Weitem erst der Anfang. Daher ist es notwendig, eingangs den eigenen Anspruch zu formulieren und seine Zielgruppe festzulegen. Da es sehr schwer ist, es wirklich jedem gerecht zu werden, muss man fairer Weise anstatt von barrierefreier Webseitenerstellung eher von barrierearmer Webseitenerstellung sprechen. Aber man sollte schon versuchen diese Punkte zu beachten und sich dem Ideal so weit wie möglich anzunähern. Man wird immer wieder an Punkte kommen, wo man einen Kompromiss eingehen wird. Aber es wäre wünschenwert, dass sich mehr Webseiten an diesen Vorgaben orientierten.

Unter den Stichworten „barrierefrei, Webseitenerstellung, Webdesign” lassen sich leicht weiterführende Informationen recherchieren. Mir geht es hier darum, diese Aspekte ins Bewusstsein zu bringen. TOP

Menschen mit motorischen Störungen

Besonders für diese Gruppe ist eine Bedienbarkeit mittels Tastatur unter Umständen sehr wichtig. Dazu gehört auch, die Bedienflächen groß genug zu gestalten, damit sie auch für diese Gruppe möglichst einfach bedienbar werden.
Versuchen sie doch mal das rote, 10 mal 10 Pixel große Quadrat oben rechts anzuklicken und dann stellen Sie sich vor, Sie hätten Ihre Hand eingegipst. Oder bedienen Sie Ihre Maus doch einfach einmal mit Ihrer anderen Hand.
Gestalten Sie Ihre relevanten Linkflächen bitte groß genug.

Technische Einschränkungen

Hier wären Barrieren zu nennen, die sich aus der Art des Internetzugangs des Besuchers ergeben. Da spielen der verwendete Browser genauso hinein, wie das Gerät, das den Zugang herstellt, etwa PC, PDA oder Mobiltelefon. Monitorgröße, Bildschirmauflösung und ähnliche Punkte wären am Rande hier auch noch zu erwähnen. Was es damit auf sich hat, können Sie unter „liquid design” noch ein wenig genauer nachlesen.

Grob gesagt: bei der Webseitenerstellung schreiben sie Ihre Inhalte nicht auf ein starres Blatt Papier mit definierten Ausmaßen, sondern eher auf einen „Luftballon”. Und nur Ihr Besucher bestimmt, wie groß er diesen „Ballon” aufbläst.

In diesem Zusammenhang seien noch die Webcrawler erwähnt. Diese Programme indizieren Webseiten und sind somit wichtig dafür, dass Websites bei Suchmaschinen gefunden werden. Sind Ihre Seiten für diese Webcrawler unzugänglich, werden sie nicht im Index auftauchen und somit nicht besucht werden.
Dieser Punkt kann gar nicht genug betont werden. Was nützt Ihnen die ausgefeilteste Flashseite, wenn die Inhalte nicht indiziert werden? Was nützt Ihnen die effektvollste Navigation wenn die Webcrawler den Links nicht folgen können, weil sie ohne JavaScript nicht funktionieren?
Richtig: Gar nichts! Niemand wird sie finden. TOP

Framesets: Vor- und Nachteile

Die Webseitenerstellung auf Basis eines Framesets wird häufig gewählt, um eine scheinbar vereinfachte Pflege und bestimmte Effekte einer Website zu erreichen. Tatsächlich ist der schwerwiegendste Vorteil eines Framesets die Möglichkeit, verschiedenen Dokumente in einem Browserfenster nebeneinander darzustellen.
Daraus ergibt sich auch eine recht einfache Möglichkeit, Bereiche der Seite im Browserfenser zu fixieren, das heißt sie nicht mitscrollen zu lassen. Besonders für Banner und Navigationsbereiche eine oft nachgefragte Eigenschaft. Zudem entfällt die Notwendigkeit den Code für diese Bereiche in jedem Dokument zu wiederholen.
So wäre es ausreichend, den Code für die Navigation einmal für das Frameset zu definieren und von dort die inhalttragenden Seiten in untergeordnete Frames zu laden. Diese Technik wird auch häufig so verwendet.
Dem sei entgegengesetzt, dass sich diese Ansprüche auch durch andere Techniken erreichen lassen.
Heutzutage ist es schon fast schwierig Webspace zu finden, der keine serverseitigen Skriptsprachen zulässt, so dass es möglich ist, mittels z.B. SSI oder PHP immer wiederkehrende Codeblöcke wie die Navigation oder das Banner entsprechend dynamisch einbinden zu lassen. Somit wäre auch in diesem Fall nur eine zentrale Datei zu pflegen.
Fixierte Bereiche, die sich nicht mit dem Rest des Dokumentes mitbewegen, lassen sich mit reinem CSS realisieren, so dass dieser Gestaltungswunsch kein Frameset erzwingt.

Dagegen hat ein Frameset aber gravierende Nachteile:
Möchte jemand auf die Seiten eines Framesets verweisen, steht er vor dem Problem, entweder auf das Frameset zu verlinken, womit es aber nicht möglich ist eine bestimmte Unterseite aufzurufen. Oder aber die Unterseite wird direkt verlinkt, wobei aber dann der die Navigation tragende Frame verloren geht und eine weiterführende Navigationsmöglichkeit auf der Unterseite meist nicht exsistiert.
Problematisch ist ein Frameset auch für die bereits erwähnten Webcrawler der Suchmaschinen. Zwar sind sie in der Lage die Unterseiten zu indizieren, die Startseite meist aber nicht. Den Framsets mangelt es meist an sinnvollem Inhalt im <noframes></noframes> Bereich. Geben Sie mal „Ihr Browser unterstützt keine Frames” in eine Suchmaschine ein.
All diese Webseiten haben keinen sinnvollen Inhalt an dieser Stelle.

Wird nun im <noframes></noframes> Bereich wirklich sinnvoller Inhalt angeboten, ergibt sich ein zusätzlicher Aufwand, der die Vorteile des Framesets in Bezug auf einfach zu wartenden Code stark schmälert.
Daher würde ich persönlich von der Verwendung eines Framesets abraten. Wenn Sie sich für ein Frameset entscheiden, ist das sicher legitim. Nur sollte es dann unter Abwägen der Vor- und Nachteile bewusst geschehen. Aber nicht aus Unkenntnis der ebenso komfortablen Alternativen. TOP

Design oder nicht sein?

Design muss und soll sein. Aber als Selbstzweck? Ich denke eher nein. Die folgenden Darstellungen lassen sich sicherlich nicht als allgemeingültig ansehen, aber meine Meinung ist, dass Design nicht als Selbstzweck dienen sollte, sondern lediglich als Unterstützung zum Vermitteln der Inhalte und um ein einheitliches Layout der Seite hervorzuheben. Natürlich auch um ein „Corporate Design” darzustellen, welche den Wiedererkennungswert der Webseite, also des Produktes unterstützt und wenn man so will, die Marke transportiert.

Benötigt man dazu ein aufwendiges Flash Intro? Ich meine nicht unbedingt, eigentlich eher nein. Wie oft habe ich mich dabei ertappt, verzweifelt nach dem „Skip Intro” Link zu suchen. Sie nicht auch?

Was ist mit sogenannten Tickern, also Laufschrift auf der Seite? Ich finde sie sind ein gruseliges Übel. Zumeist stehen dort irgendwelche Neuigkeiten, die keineswegs so wichtig sind, als dass sie nicht auch ruhig in der Seite stehen könnten.
Daneben ziehen Bewegungen die Aufmerksamkeit extrem auf sich, lenken also von allem anderen ab.
Denken sie wirklich der Besucher einer Seite über Modeleisenbahnen interessiert sich für früher sehr in Mode gewesenen, vorbeitickernden Börsenkurse? Nein, wohl kaum. Wer die Börsenkurse verfolgen will, macht das anderswo, aber wer etwas über Modeleisenbahnen lesen will, möchte vielleicht gar nicht durch Börsenkurse abgelenkt werden. Damit ist kein echter Zusatznutzen verbunden, also weg damit. Glücklicherweise sterben diese Ticker langsam aber sicher aus.
Wohl vor allem, weil andere Inhalte dagegen völlig verblassen.

Ähnliches gilt für Animationen. Ein Link zur E-Mail, wo eine animierte Grafik fortwährend einen Brief verschickt. Und noch mal und noch mal von vorne.
Globus rotierendes @ animierte E-Mail Grafik Rotierende @ Zeichen.
Oder sich drehende Weltkugeln.
Sehen Sie wie stark diese Animationen Ihre Aufmerksamkeit anziehen?
Ist das so wichtig, als dass man es zulässt, die Aufmerksamkeit des Besuchers von dem eigentlich Wesentlichen abzulenken? Ich denke nein.

ein 'Ladebalken'
ein Ladebalken Eine Animation wäre dagegen durchaus sinnvoll, wenn große Datenmengen wie hochauflösende Bilder geladen werden und Sie dem Besucher signalisieren möchten, dass seine Anforderung aktuell noch aktiv bearbeitet wird. Der berühmte „animierte Ladebalken”.
Auch vorstellbar wäre die Visualisierung eines Vorgangs in wenigen bewegten Bildern, anstatt in einer ganzen Seite Text.
Ansonsten schaden Animationen eher, als dass sie nutzen. Weniger ist mehr, besonders in diesem Fall.

Ähnliches gilt auch für JavaScript-Spielereien. Mögen Sie es, wenn ein grafisches Gebilde auf Schritt und Tritt Ihrem Mauszeiger hinterher zappelt?
Oder wenn Ihnen dauernd neue Browserfenster entgegen poppen? Grauenvoll?
Das finde ich auch!
Effekthascherei wird Besucher mehr vergraulen als beeindrucken. Besonders bedenklich, da immer mehr Besucher deswegen JavaScript deaktivieren. Damit wird der Nutzen, den JavaScript zweifelsohne hat, deutlich verringert. Und das ist eigentlich bedauerlich.

Betrachten Sie Ihre Seiten weniger aus der Perspektive, was Sie darstellen möchten, sondern versuchen Sie Ihre Webseite vor allem aus dem Blickwinkel Ihres Besuchers zu sehen. Fragen Sie sich während der Webseitenerstellung immer wieder objektiv:
Was würden Sie sich wünschen, wenn Sie als Benutzer Ihre Webseite besuchen? Noch wichtiger: Was würde Sie ablenken oder stören? TOP

Technische Aspekte

Sofern die Inhalte gesammelt und geordnet sind, das Design erdacht und die Zielgruppe ausgemacht, kann daran gegangen werden, diese Vorgaben in die Praxis umzusetzen.

Dabei treten zwei „Dogmen” gegeneinander an. Die Fraktion der Quelltext Editoren und die Fraktion der WYSIWYG-Editoren.
Die ersteren schreiben den Quellcode direkt in einem einfachen Texteditor, was ich auch bevorzuge. Optimaler Weise ermöglicht dieser Editor das Hervorheben von bestimmten Elementen, so dass die Struktur der jeweiligen Sprache erfasst wird und das gesamte Dokument gut überschaubar bleibt.
Handarbeit von Puristen könnte man auch formulieren. Aber im Gegensatz zu Manufakturen trotzdem nicht „altmodisch”, sondern sehr effektiv.

Die WYSIWYG-Bearbeitung erscheint zuerst einfacher. Hier werden die Elemente grafisch zusammengefügt, während der eigentliche Quellcode automatisch erstellt wird. Viel mehr kann ich dazu nicht sagen; ich benutze sie nicht.
WYSIWYG: Ein Problem besteht darin, dass es nicht notwendigerweise auch heißt, dass der Besucher das Dokument genauso sieht. Üblicherweise wird der Quellcode unnötig aufgebläht, eine Trennung zwischen Inhalt/Struktur und Gestaltung/Formatierung wird nicht konsequent genug verfolgt. Eine weitere Betreuung der Seiten wird dadurch unnötig erschwert.
Der Code ist selten valide und konform zu den aktuellen Webstandards. Oft wird ein extremes Tabellenlayout produziert.

Sofern Sie sich bereits in ein solches Programm eingearbeitet haben, will ich Sie nicht davon abbringen es zu nutzen. Nur empfinde ich es für mich selbst einfacher valide und zugängliche Webseiten zu erstellen, wenn ich die direkte Kontrolle über den Quellcode habe.
Sollten Sie also ganz am Anfang stehen und sich überlegen, welchen Weg Sie einschlagen wollen, dann würde ich immer zum Quelltext-Editor raten. Warum?
Nun, in der Zeit in der Sie sich in einen WYSIWYG-Editor einarbeiten, können Sie auch schon HTML lernen. Das ist gar nicht so schwer. Es ist ja auch keine Programmiersprache, sondern lediglich eine Auszeichnungssprache. Das ist wirklich schnell zu erlernen.
Sie behalten die totale Kontrolle über den Quellcode. Das gibt natürlich viel direkteren Eingriff auf die Feinabstimmung der Seite. Vor allem wenn Sie Wert darauf legen, die Webseite in verschiedenen Browsern vergleichbar darzustellen, ist das ein großer Vorteil.
Das ist aber letztlich vor allem eine Frage des eigenen Anspruches. Je höher dieser ist, umso dringlicher würde ich zu einer direkten Quellcode Bearbeitung raten.
Aber diese Einstellung ist parteiisch und diskussionswürdig. Entscheiden Sie danach, womit Sie selbst am besten zurecht kommen.

Nach wie vor relevant sind auch die Geschwindigkeiten der Internetverbindung. Trotz der zunehmenden Verbreitung von DSL gibt es eine großer Anzahl Benutzer mit langsameren Verbindungen. Daher sollten Bilder oder Grafiken in einem geeigneten Format gespeichert werden, um die Dateigrößen gering zu halten. Geeignete Grafikformate wären zum Beispiel JPG, GIF oder PNG. TOP

Standardkonformes CSS und Browser

Obwohl mit der neuen Version des Internet Explorers (IE) ein wichtiger Schritt in die richtige Richtung gemacht wurde, ist die Standardkonformität des IE 7 nach wie vor verbesserungswürdig. Daher ist es ratsam, zur Webseitenerstellung auf einen Browser zurückzugreifen, der sich enger an den Webstandards orientiert, wie das zum Beispiel bei Opera oder Firefox der Fall ist. Es ist einfacher, Webseiten für diese Browser zu erstellen und anschließend für den IE anzupassen als andersherum. Oft wird es notwendig, besonders für ältere IE, eigene CSS Anweisungen anzugeben.
Dazu kann man diese CSS Anweisungen mittels „CSS Browser Hacks” oder „Conditional Comments” vor anderen Browsern verbergen. Diese Webseite benutzt Conditional Comments, um dem IE kleiner Version 7 ein eigenes Stylesheet anzubieten, wie in diesem Beispiel:

  • <!--[if lt IE 7]>
  •   <link rel="stylesheet" media="screen" type="text/css" href="/um_IElt7.css" />
  • <![endif]-->

Die Anweisungen in diesem Stylesheet werden von anderen Browsern nicht ausgeführt, weil sie den Code als Kommentar interpetieren. Nur IE Browser kleiner Version 7 führen die Anweisung in Zeile 2 aus und laden das entsprechende Stylesheet.
Diese speziellen Unterscheidungen fallen umso geringer aus, je konsequenter eine Trennung von Struktur/Inhalt auf der einen und Formatierung/Gestaltung auf der anderen Seite eingehalten wurde. Insbesondere an dieser Stelle wird es vorteilhaft sein, den Quellcode selbst in einem Texteditor geschrieben zu haben.

Grundsätzlich gilt: Je schlichter das Design ist, umso weniger wird es notwendig entstandene Darstellungunterschiede korrigieren zu müssen. Besonders zu Beginn sollte man sich etwas zügeln und sich nach und nach schwierigeren Aufgaben stellen. Besonders bei dem Versuch, ein komplexes Layout in den gängigen Browsern darzustellen, werden sich interessante Herausforderungen ergeben.

TOP