Die Natur von Websites

von Michael Schumacher

Die Natur von Websites

Es kommt leider sehr häufig vor, dass Kunden auf einen zukommen und schon viele Ideen für die Umsetzung ihrer Internetseiten mitbringen. Sie schwärmen von tollen Hintergrundbildern, Animationen oder gut gestalteten Menüs.

Seltsam finde ich immer wieder, dass Kunden sich auch auf viele Funktionalitäten (z.B. Forum, News oder Onlineshop) einschießen, ohne sich zuvor Gedanken gemacht zu haben, welche Aufgaben und Anforderungen damit verbunden sind. Die erste Euphorie schwindet schnell, wenn man die Frage stellt: „Und was möchten Sie Ihren Besuchern an Inhalt bieten? Wer wird die Inhalte pflegen und ggf. mit dem Kunden in Kontakt treten?“Es gibt also einige grundsätzliche Probleme, auf die man immer wieder trifft.

  • Unterschätzen der Wichtigkeit von (guten) Inhalten
  • Unterschätzen des Aufwandes der bei Pflege von z.B. Newsrubriken oder Onlineshops anfällt
  • Die Fixierung auf ein cooles Layout, welches immer gleich aussieht

1. Und es kommt doch auf die inneren Werte an

Eine Internetseite, so meine eigene Definition, ist erstmal nichts anderes, als ein Dokument in digitaler Form, welches dem Betrachter einen Inhalt (gleich ob Text, tabellarische Zahlen oder Grafiken) präsentieren soll. Das Präsentieren dieser Inhalte (ob Öffnungszeiten oder ganze Shops), ist dabei die eigentliche Kernfunktionalität einer Website und die eigentliche Motivation des Inhabers, diesen für so viele Menschen wie möglich zugänglich zu machen.

Aha! So ist das also. Und worauf möchte ich hinaus? Was damit gemeint ist, ist, dass jeder, der eine Website erstellen oder erstellen lassen möchte, doch immer die Motivation hat, dass das, was er zu sagen hat, von so vielen Menschen wie möglich gelesen wird. Es gibt also zunächst eine Information oder einen Service, den man im Web anbieten möchte und nicht etwa ein tolles Layout, welches man irgendwie mit Inhalt füllen muss.

Niemand wird Ihre Seite ein zweites Mal besuchen, wenn sie zwar ein gelungenes Design hat, jedoch keinen Inhalt bietet. — Das Auge isst bekanntlich mit, dennoch wird ein Besucher trotz eines unspektakulären Designs stets wiederkommen, wenn er für sich einen persönlichen Wert entdeckt.

 

„Machen Sie sich Gedanken darüber, welcher Zielgruppe Sie WAS mitteilen möchten und strukturieren Sie Ihre Inhalte so, dass der rote Faden erkennbar bleibt! “

2. Schlecht gepflegte Angebote sind raus geworfenes Geld

Bevor Sie der Konkurrenz nacheifern und z.B. einen eigenen Onlineshop ins Leben rufen wollen, sollten Sie sich gut überlegen, mit wie viel Aufwand solche Zusatzangebote verbunden sind. Die Mehrkosten, die bei der Entwicklung anfallen sind nur der Anfang eines nicht enden wollenden Rattenschwanzes. Um bei dem Beispiel des Onlineshops zu bleiben, kommen folgende regelmäßige Aufgaben auf Sie zu, die evtl. einen zusätzlichen Mitarbeiter erfordern:

  • Aktualisieren der Produkte (mit Beschreibung und Bilder)
  • Überprüfung der Zahlungseingänge nach einem Kauf
  • Nachfragen von Kunden bez. Produkte und Vorgehensweise
  • Der Versand der Ware

Wie wirkt wohl ein Onlineshop, der nur zwei oder drei veraltete Produkte enthält? Meiner Meinung nach eher destruktiv, und somit sollten Sie sich ganz sicher sein, ob Sie diesen Aufwand in Kauf nehmen möchten, bevor Sie Ihr hart verdientes Geld in ein solches Angebot stecken wollen.

Und wenn Sie sich noch ein Hintertürchen offen halten wollen, vereinbaren Sie mit Ihrem Entwickler, dass die Erweiterung Ihrer Homepage um einen Shop in Zukunft gewährleistet sein muss.

3. Ihre Internetseite sieht für (fast) jeden Besucher anders aus

Technisch gesehen ist eine Internetseite lediglich eine Textdatei, die neben dem eigentlichen Inhalt Anweisungen enthält (meist in XHTML für die Struktur des Dokumentes und in CSS für das Layout/Design formuliert), wie das Dokument strukturiert ist und vom Endgerät darzustellen ist. Diese Textdatei/Seite kann dann von Endgeräten wie einem Browser (unabhängig von der Monitorgröße), Mobiltelefon, Screenreader oder gar Drucker gelesen werden.

Es sollte allen bewusst sein, dass die geschaffene Internetseite auf jedem Gerät anders dargestellt wird. Das Handy ist ja etwas kleiner als der eigene Monitor und beim Drucken einer Seite möchte man auf die bunten Navigationselemente verzichten. Und der Sehbehinderte kann auf Typografie und Grafiken eh ganz gut verzichten. Er legt nur Wert auf semantisch korrekten Inhalt, da er sich die Seite vom Computer vorlesen lässt.

Und genau da liegt der Hase im Pfeffer. Viele Kunden jammern förmlich, wenn sie die Erkenntnis gewinnen, dass ihre Seite nicht überall gleich aussieht. Aber es handelt sich weder um einen Bug (Fehlfunktion), noch wurde das Web dafür entwickelt. Es ist gerade der entscheidende Vorteil des Webs gegenüber einem Buch, dass es Inhalt und Darstellung voneinander trennt und somit Ihren Inhalt, den Sie ins Web stellen auch für Handybenutzer oder Sehbehinderte zugänglich macht.

Schauen wir uns mal eine Internetseite von der technischen Seite an. Bei jeder Seite, die auf Ihrem Browser angezeigt wird, handelt es sich um mehr, als nur die einzelnen Buchstaben, die Sie sehen. Damit Sie eine Überschrift von einem normalen Text unterscheiden können, muss jemand zuvor den einzelnen inhaltlichen Elementen Eigenschaften zugewiesen haben. Dies geschieht bei Internetseiten meist mit (X)HTML-Tags ( [tæg] engl. für Etikett,Kennzeichnung). Im folgenden ein ganz kleines Beispiel, in dem eine Überschrift der ersten Ordnung von einem Absatz gefolgt wird und dann das Ganze wiederholt wird mit einer Überschrift der zweiten Ordnung:

Diese (X)HTML-Tags bekommt nun Ihr Browser vom Server geliefert, den er dann interpretiert. Er sieht, dass es sich z.B. um eine 1.Überschrift handelt und weiß auch, dass diese in der Regel größer dargestellt werden sollte, als eine 2. Überschrift oder ein normaler Absatz. Wie er diese jedoch darstellt (Schriftgröße 14 oder 16), ist erstmal ihm überlassen. Jeder Browser hat dazu eine eigene Formatvorlage, in der beschrieben ist, wie was dargestellt wird.

Die meisten Formatvorlagen lassen sich zwar überschreiben, jedoch bleibt immer ein kleines Restrisiko. Hinzu kommt, dass einige Browser die Webstandards immer noch falsch interpretieren und es somit auch mal zu Darstellungsfehlern kommen kann. Es gibt in solchen Fällen einige Kniffe (Workarounds oder Hacks). Jedoch ist die beste Variante, auf solch kritische Elemente/Eigenschaften (z.B. transparente PNG-Bilder)einfach zu verzichten. Meist kann man auch mit einer Alternative die Designvorstellung umsetzen.

Ein kleine Anmerkung zum Schluss: Sollten Sie eine hauseigene Schriftart haben, kann der Text nur dann in dieser Schriftart angezeigt werden, wenn diese auf dem Rechner des Besuchers installiert ist, was außer bei Ihnen im Haus, wohl eher selten der Fall sein wird. Von der Möglichkeit, einen Text als Grafik einzubinden, kann ich nur abraten, da es die Zugänglichkeit (siehe Webstandards ) Ihrer Internetseite stark reduziert (weniger Besucher und schlechtere Suchmaschinenergebnisse) und den Aufwand bei Änderungen enorm steigert (finanziell kostspielig).

Beispiel — Für die hart gesottenen Leser

Eine Internetseite besteht grob unterteilt aus zwei Teilen:

  • (X)HTML: Strukturiert den Inhalt
  • CSS: Beschreibt das Design der (X)HTML-Elemente

Um dieses Zusammenspiel einmal zu demonstrieren, lassen wir Bauern Atesch im folgenden Beispiel eine Internetseite bauen:

Bauer Atesch will jetzt auch endlich eine Internetseite. Zu diesem Schluss ist er gekommen, da immer mehr Besucher, die eigentlich nur ein paar Eier kaufen wollten, mittwochs vor verschlossener Türe standen. Klar - ist mittwochs doch seit Jahren schon das große Briefmarkensammlertreffen im Vereinshaus gleich unten im Dorf. Bauer Atesch möchte also, dass jeder die Öffnungszeiten seines Hofes sowie Informationen zu seinen tollen Produkten einsehen kann. Ein Medium ist das Internet und somit veröffentlicht er genau diese Information auf seiner neu entstandenen Website.

XHTML-Code seiner Seite:



Seine Seite im Browser:

Bauer Atesch hat es genau richtig gemacht. Die Information hat er mittels HTML in einem elektronischem Dokument gespeichert und hat dabei einige wichtige Sachen berücksichtigt, die es sogar dem blinden Hans aus dem Nachbardorf ermöglichen, mit einem speziellen Programm (Screenreader genannt) sich den Inhalt vom Computer vorlesen zu lassen.

Schön kann man dies zwar noch nicht nennen und dem ein oder anderen schmerzen bereits die Augen, aber das wird noch. Er legt neben seiner XHTML-Datei noch eine s.g. CSS-Datei an. Mittels CSS kann man die XHTML-Elemente wie die Überschriften (<h1> >Bauer Ateschs Hof.de</h1>) gezielt verändern.

CSS-Code seiner Seite:



Seine Seite im Browser:

Zurück