Überlegungen zur optimalen Webseitengestaltung:

Also Webdesigner gibt es ja wie Sand am Meer - zumal - diese Bezeichnung nicht geschützt ist und sich somit jedermann / jedefrau so nennen darf. Darum geht es im nachfolgenden Artikel allerdings auch nicht. Ich würde mich niemals Webdesigner nennen, da ich noch nicht einmal Photoshop auf meiner Maschine habe - geschweige denn: bedienen kann. Einen WYSIWYG-Editor ("what you see is what you get") habe ich auch nicht und somit bin ich bei weitem nicht mit dem ausgestattet, was einen "gestandenen Webdesigner" ausmacht. Also, wer sich jetzt von diesem Artikel Informationen zur optischen Gestaltung einer Webseite versprochen hat, der ist hier - bedauerlicherweise - total "fehl am Platz".

Zur eigentlichen Thematik:

Hier soll über grundsätzliche Anforderungen einer Webseite nachgedacht werden und vielleicht der eine oder andere nützliche Tipp für die eigene Seitengestaltung vermittelt werden. Die Webseite - gleich welchen Inhalts - sollte einigen Anforderungen gerecht werden.

  • 1. Sie sollte dem Besucher / der Besucherin interessante Informationen bieten.

  • 2. Sie sollte die Besucher elegant und flüssig durch die Seite "surfen" lassen und "surfen" hat ja etwas mit "gleiten" und so gut, wie gar nichts mit "stolpern" zu tun.

  • 3. Sie sollte den Besuchern die Möglichkeit zu Interaktion anbieten, denn oft sehen Anwender ohne den berühmten "Tunnelblick" Fehler, die dem Entwickler schon gar nicht mehr auffallen, weil er dies ja schon lange in Ordnung bringen wollte (aber leider noch nicht dazu kam). Diese Informationen tragen zur konstruktiven Weiterentwicklung der Seite bei - wenn - ja, wenn die Anwender überhaupt eine Möglichkeit zur Kritik haben.


  • 4. Sie sollte die Anwender auch dann komfortabel bedienen, wenn sie nicht über einen 21-Zoll-Flatscreen mit einer Auflösung von 1680 x 1050 Pixeln verfügen.

  • 5. Sie sollte aber - und das ist gar nicht so unwesentlich - sie sollte auch gefunden werden.

  • 6. Sie sollte für den / die verantwortlichen Gestalter / Gestalterin(nen) auch noch zu verwalten sein - neudeutsch zu handeln sein.


  • Zäunen wir das Pferd einmal von hinten auf und starten unsere Überlegungen mit Punkt 6.:

    Auf dieser Seite finden Sie auch ein Tutorial über frames und was man Tolles damit machen kann. Frames sind allerdings für genau die aufgezeigten Sonderfälle gut und sonst ein absolutes "no go" - einfach: Hände weg.

    "Aber ich bin doch gewohnt mit einer Menü- oder Navigationsleiste zu arbeiten?..." Ja, ich auch - aber dazu brauche ich keine Frames. Nein, nicht dass Sie meinen, ich kopiere meine Menüs streng in alle 417 Seiten und wenn es eine Änderung gibt, dann wird eben 417 mal kopiert. Das ist überhaupt nicht erforderlich. Dazu haben wir ja Javascript und den Befehl: "document.write()" (übrigens wird im Web nicht selten die Frage gestellt: kann man eine HTML-Seite inkludieren? Ja, man kann, man lässt dies einfach von Javascript erledigen).

    Stellen wir uns doch einmal folgende Situation vor: Wir haben eine Seite für ein Hotel zu gestalten und dabei soll das Besuchermenü (die Navigation) immer an der gleichen Stelle stehen und in etwa so aussehen:

  • UNSER HOTEL
  • UNSER RESTAURANT
  • DIE SPEISEKARTE
  • DIE GETRÄNKEKARTE
  • RESERVIERUNGEN
  • ANFAHRT
  • IMPRESSUM
  • DISCLAIMER


  • GUSTAV-AUERBACHWEG 6
    989877 MUSTERHAUSEN
    FON: (0 47 11) 2 40 80
    FAX: (0 47 11) 2 40 66
    E-MAIL: INFO@ZUM BÄREN
    WWW.ZUM-BÄREN.DE

    Vorbereitung der Lösung:

    Kopieren Sie nachfolgenden Text doch bitte einmal in das Eingabefeld (textarea) unten und versenden Sie diesen. Sie können gerne auch Änderungen vornehmen, kein Propblem - ihr - Text wird im Beispiel gesendet und kein anderer.
    
    UNSER HOTEL<br>
    UNSER RESTAURANT<br>
    DIE SPEISEKARTE<br>
    DIE GETRÄNKEKARTE<br>
    RESERVIERUNGEN<br>
    ANFAHRT<br>
    IMPRESSUM<br>
    DISCLAIMER
    <br><br><br><br>
    GUSTAV-AUERBACHWEG 6<br>
    989877 MUSTERHAUSEN<br>
    FON: (0 47 11) 2 40 80<br>
    FAX: (0 47 11) 2 40 66<br>
    E-MAIL: INFO@ZUM BÄREN<br>
    WWW.ZUM-BÄREN.DE<br>
    
    


    Wir halten fest:

    Wir können formatierten Text an ein fremdes Fenster schicken und das im Prinzip so oft wir wollen. Dann müsste es allerdings auch ein leichtes sein, formatierten Text in einem Fenster zu empfangen und an dieser Stelle sollten Sie sich vielleicht einmal den Quelltext dieser Datei "zu Gemüte führen" (rechte Maustaste) und Sie werden erkennen, dass das angezeigte Menü gar nicht im Quelltext steht.

    Dem aufmerksamen Beobachter wird an dieser Stelle vielleicht die Frage einkommen: rechts ist ein Scrollbalken und demnach ein "<div>" aber Sie finden gar keinen "<div>" im Quelltext - zumindest keinen öffnenden Tag. Richtig - aber dazu ein wenig später. Zunächst lassen Sie uns noch die Menüfrage vollständig klären.

    Wie findet nun to ein Menü immer seinen richtigen Platz?

    Kein Spider, Robot oder sonstwer hat irgendwelche Einwände gegen Tabellen. Dies ist nun der erste Ansatz und klärt ab, warum wir unsere Navigation auf jeder Seite immer an der gleichen Stelle haben können:

  • UNSER HOTEL
  • UNSER RESTAURANT
  • DIE SPEISEKARTE
  • DIE GETRÄNKEKARTE
  • RESERVIERUNGEN
  • ANFAHRT
  • IMPRESSUM
  • DISCLAIMER


  • GUSTAV-AUERBACHWEG 6
    989877 MUSTERHAUSEN
    FON: (0 47 11) 2 40 80
    FAX: (0 47 11) 2 40 66
    E-MAIL: INFO@ZUM BÄREN
    WWW.ZUM-BÄREN.DE
     


    Aber was ist mit dem Rest unseres Schirms (englisch: "screen")?

    Sehen wir weiter:

    Herzlich willkommen auf der Webseite des Hotel Bären
  • UNSER HOTEL
  • UNSER RESTAURANT
  • DIE SPEISEKARTE
  • DIE GETRÄNKEKARTE
  • RESERVIERUNGEN
  • ANFAHRT
  • IMPRESSUM
  • DISCLAIMER
  • GUSTAV-AUERBACHWEG 6
    989877 MUSTERHAUSEN
    FON: (0 47 11) 2 40 80
    FAX: (0 47 11) 2 40 66
    E-MAIL: INFO@ZUM BÄREN
    WWW.ZUM-BÄREN.DE
    Wir wünschen Ihnen einen angenehmen Aufenthalt
    unser Service steht Ihnen jederzeit gerne zur Verfügung


    Jetzt haben wir ja bereits ein richtig "kleines Browsermodell" (die Links sind auch schon aktiv - einfach einmal mit der Maus darüber fahren), wir können die Größen nach Belieben - also auch abhängig von den Auslösungen der Anwender abstimmen und jeden Bereich extern (mit einem Javascript) beschriften. Die Stellen, die immer (oder sehr oft) gleiche Inhalte haben, müssen dabei genau einmal erstellt (gescriptet) werden und Änderungen sind auch bei Hunderten von Seiten rasch vollzogen.

    Also - wir können:

  • Bereichsinhalte von Aussen und bei identischen Inhalten mit nur einem Script steuern
  • Die Größen für unser Browserfenster ebenfalls den Auflösungen der Anwender entsprechend festlegen


  • Und damit haben wir zu Punkt 6. schon einiges für unsere künfige Arbeit vorbereitet. Selbstverständlich ist niemand an das obige Layout gebunden. Tabellen in HTML sind flexibler, wie Eisenbahnschienen und insofern gibt es der Gestaltungsmöglichkeiten unendlich viele. Auf der nächsten Seite überlegen wir, wie das bislang Angedachte umgesetzt werden kann und in praktische Arbeit umzuwandeln ist (und dann gibt es ja auch noch die Punkte 5.,4.,3.,2. und 1.)

    Zu Seite 2 des Tutorials "Seitengestaltung" >>>