Direkt-Kontakt in Hamburg:

Telefon: 040 - 40 17 09 09    E-Mail: info@webhonesty.de


  • Titelbild

LAYOUT: tipps

Im Prinzip geht es bei der Entscheidung für ein Layout Ihrer Webseite erst einmal um die Anordnung der Haupt-Bereiche:

Denn alles andere wie Farben, Schriften, Bilderauswahl etc. kann in einem CMS jederzeit sehr schnell angepasst werden.

 

Wenn man sich aber zu Beginn der Webseiten-Erstellung für ein bestimmtes Template oder Designlayout entschieden hat, kann man später eventuell nur mit größerem Anpassungsaufwand zum Beispiel eine horizontale Navigation auf eine vertikale ändern.

Wie Sie in den Beispielen unten sehen, unterscheidet man die folgenden Layout-Bereiche:

  • Header/Kopfbereich
  • Navigation
  • Content-Bereich/Inhaltsbereich:
  • Sidebar
  • Footer

in einem webseiten-template sind bestimmte elemente festgelegt

Diese Bereiche haben je nach CMS und Quelle teilweise etwas abweichende Bezeichnungen, sind aber

immer gut zuzuordnen:

 

Header:

Der obere Teil der einzelnen Webseiten wird Header oder auch Kopfbereich genannt.

Dieser Layout-Teil bleibt häufig auf allen Unterseiten des Webauftritts gleich.

 

Typische verwendete Elemente für den Header sind das Firmenlogo und/oder ein aussagekräftiges Bild. Auch der Titel der Webseite ist häufig im Header zu finden, was auch für die Suchmaschine Sinn macht.


aber auch webseiten-templates können individualisiert werden.

Navigation:

Festlegung der Position der Hauptnavigation sowie der Unternavigation.Bei einer horizontalen Hauptnavigation sind verschiedene Varianten für die Unternavigation denkbar, siehe Beispiele …

 

Content-Bereich:

Damit ist der inhaltliche Bereich gemeint, in dem Texte und Bilder (oder auch Videos, Formulare, etc.) platziert werden. Dieser Inhalt ist pro Unterseite jeweils individuell – die Anordnung der Elemente wie Texte und Bilder etc. kann in Bezug auf die Nutzerfreundlichkeit aber z.B. auf jeder Unterseite gleich oder ähnlich sein.

 

Sidebar:

Die Sidebar ist in der Regel auf allen Unterseiten sichtbar und somit eine Konstante, die man gut für Elemente nutzen kann, die der Besucher der Seite möglichst immer im Blick haben sollte:

Unter anderem Kontaktmöglichkeiten, Newsletter-Bestellung, ein Teaser des letzten Blogartikels, Suchfeld, „Call-to-Action“-Button (z.B. „Jetzt bestellen – 10% sparen“ mit Link in den Shop)

Footer:

Der Footer befindet sich ganz unten auf der Website. Hier können unter anderem Kontaktinformationen untergebracht werden, und auch z.B. Links zu Impressum und Haftungshinweisen sowie zur Sitemap.

Auch Links zu den wichtigsten Inhalts- oder Produktseiten können hier sinnvoll eingesetzt werden, ebenso wie vertrauensbildende Informationen, z.B. Links zu Social-Media-Profilen.

Beispiel für eine individualisierte Version eines Jimdo-Layouts:

Und hier finden Sie mehr Beispiele.