Musterwebsite

Der Rahmen, in denen sich Ihre Website bewegt, das Layout, das Webdesign wird mitunter auch als Theme bezeichnet.

Anmerkungen zu den einzelnen Mustern:

1. muster 01
   Ausgangslayout dieser Musterwebsite
2. muster 02
   Layout: flexible Breite (bis min ca. 800 px)
   Menüs: links, rechts oder beides (zum Test: nur Startseite verwendet zwei Menüs);
   Variante: Suchfeld unter Logo;
   Varianten: obere Menüleiste im Kopf ganz oben und Pfadanzeige im eig. Bereich im Kopf
3. muster 03
   Layout: flexibel, für 17 Zoll Bildschirme geeignet, dreispaltig
4. muster 04
   Beschreibung wie vor
5. muster 05
   Beschreibung wie vor
6. muster 06
   Layoutbreite: fix, 972 px;
   Variante: Bild im Kopfbereich
7. muster 07
   Layoutbreite: fix, sehr schmal (750 px); Menüleiste rechts
8. muster 08
   Layoutbreite: fix, schmal (800 px / 17-Zoll.Monitor); Menüleiste rechts, links möglich
9. muster 09
   zwei Menüs rechts; interessante Variationsmöglichkeit: eines der beiden Menüs schaltet sich flexibel in entsprechenden Untermenüs zu; Layout sehr browserkompatibel; flexibel bis Mindestbreite 740 px (17-Zoll-Monitor)

Zu diesem und den vorgestellten Mustern ist grundsätzlich anzumerken:

Sie werden feststellen, dass allen Musterlayouts die kompletten Inhalte dieser Musterwebsite zeigen.
Es wird Ihnen aber auch auffallen, dass manche Muster der Anpassung bedürfen. Im Muster01 sind Inhalt und Layout am weitestgehenden aufeinander abgestimmt; auch das Muster 09 ist optimiert.
Achten Sie beim Studium der Musterlayouts nicht nur auf Farben und Schrifttypen (diese sind schnell änderbar); schauen Sie sich vor allem deren unterschiedliche Funktionalitäten an (bevor die Farbe festgelegt wird, mit einm Haus angestrichen wird, sollte klar sein, wer darin wohnen wird).
Soll unabhängig von den vorgestellten Mustern ein individuelles Layout entstehen, ist es von Vorteil, Webdesigner und Auftraggeber beginnen frühzeitig mit der Abstimmung der Wünsche und Eckpunkte.

Weiterhin gilt es zu bedenken:

• Sie finden flexible und fixe Themes.
  Die Entscheidung für die eine oder andere Variante ist immer eine Abwägungsfrage, da User Bildschirme in unterschiedlicher Größe und mit unterschiedlichen Bildauflösungen benutzen.
  • Fixe Layouts, also solche mit einer festen Seitenbreite haben den Vorteil, dass Blöcke, Spalten, Menüs, Texte und Bilder sich in der Regel nicht verrutschen und Gestaltungsform sehen, die beabsichtigt ist.
    Die hat jedoch den Nachteil, dass Nutzer die vertikale Scrollfunktion bemühen müssen, wenn das Layout breiter ist, als ihr Bildschirm es hergibt. Deshalb werden vielfach in der Breite schmale, mittig gestellte Layouts verwendet, deren flexible Außenränder sich der Bildschirmgröße anpassen.
    Allerdings fassen solche Themes relativ wenig Inhalt, das Hauptfenster ggf. nochmals in Spalten zu unterteilen (wie im Muster01) , macht wenig Sinn. Ausführliche Menüs bekommen somit ein größere Bedeutung; sie fördern allerdings die Übersichtlichkeit eines Portals wenig.
  • Flexible Layouts sind so eingerichtet, dass sich nicht nur die Ränder eines fixen Layouts verschieben, sondern auch die gesamten Inhalte. Dieses Vorgehen begrenzt allerdings den Einsatz gerade von Bildern, da sich diese verzerren würden.
    Die Option fexibler Seiten hat den Vorteil, dass sie automatisch die maximal zur Verfügung stehende Bildschirmgröße des Users ausnutzt. Angesichts den allgemeinen Trends zu immer größeren Bildschirmen und höheren Auflösungen ist es fatal, wenn ein Webangebot plötzlich nur noch die Hälfte oder ein Drittel eines Bildschirms ausfüllt.
  • Schauen Sie sich die Beispiele an, verkleinern oder vergrößern Sie einfach mal die Größe Ihres Browserfensters und schauen Sie, was passiert.
  • Letztendlich wird eine Entscheidung für die eine oder andere Lösung von der Planung Ihres Webangebotes abhängen.
• Sie werden in den Mustern verschiedene Formen der Anordnung der Navigationsleisten vorfinden.
  • Vielfach sind sie links zu finden; wir stellen Ihnen aber auch Lösungen vor, in denen diese rechts zu finden sind. Es ist auch möglich, beide Seitenleisten zu nutzen, wie auf dieser Musterwebseite mit Submenüs (Muster01 oder Muster09), sie blenden ein zweites Menü optional ein, z.B. unter den Stichworten >Umfragen< und >Kalender<. Menüs können auch in der Kopf- und/oder Fußzeile installiert sein, bzw. erst auf einzelnen Seiten im Hauptfenster auftauchen.
  • Navigationspunkte können zu einzelnen Seiten führen, oder wiederum zu Übersichten. Dieses Musterwebportal zeigt Vorschauen oder Untermenüs nach dem Klick auf einen Menüpunkt in unterschiedlicher Form: als eine tabellarische Liste der Einzelseiten, als Liste dieser, indem jeweils die Anrisstexte zu sehen sind. Der Button >weiterlesen< öffnet dann die jeweilige Gesamtansicht. Es wurden zu Demonstrationszwecken bewusst unterschiedliche Darstellungsformen gewählt.
• Ein wichtiges Kapitel ist das der Browser-Kompatibilität.
  • Die Internet-Anzeigeprogramme werden ständig verbessert; entsprechend werden Websits auf dem Hintergrund der neusten Standards entwickelt.
  • Dies kann jedoch bedeuten, dass Besucher, die noch veraltete Browser nutzen, die Website anders zu sehen bekommen, nicht selten mit Fehlern.
  • Soll Ihr Webauftritt auch alte Browserdarstellungen berücksichtigen, sind entweder zusätzliche Anpassungen notwendig, oder es muss auf manche Features verzichtet werden.
  • Eine alternative Möglichkeit wäre, Besucher auf die aktuellen Browser hinzuweisen, bzw. ihnen eine Linksammlung zu ggf. erforderlichen Aktualisierung dieser zur Verfügung zu stellen. Diese Musterwebsite bietet eine solche an:

weiterführende Links:
- downloads