Website Aufbau – Welches Design soll deine neue Website haben?
Beim Website Aufbau gilt heutzutage Mobile first.
2022 betrug der Anteil mobiler Endgeräte 85 %. Eine mobil optimierte Website ist daher zwingend erforderlich, denn Google nutzt Informationen, die auf der mobilen Version einer Website gefunden werden, um die Suchergebnisse zusammenzustellen.
Weil deine Website in jedem Gerät ein bisschen anders dargestellt wird, ist der Aufbau einer Website seit der Verbreitung von Smartphones und Tablets komplizierter als früher: Auf einer responsiven Website werden die Elemente a) skaliert und b) verschoben: Je nach Größe des Bildschirmes bildet der Browser die Elemente untereinander oder nebeneinander ab und – je nach zur Verfügung stehendem Platz – kleiner oder größer. Die Schrift ist meist gut lesbar, und die Länge einer Zeile entspricht der Breite des Bildschirmes – hochkant ist die Lauflänge schmaler als quer. Auf dem Smartphone sieht man alle Elemente untereinander.
Website Aufbau: Boxed oder Widescreen macht wenig Unterschied – außer auf dem Desktop.
Einen spürbaren Unterschied macht die Entscheidung, ob man lieber Boxed oder Widescreen mag, nur auf dem Desktop. Dort sieht man auch den Hintergrund einer Boxed-Seite. Auf kleineren Monitoren bildet der Browser das Hintergrundbild meist nicht ab.
Die Hauptnavigation ist auf mobilen Geräten oben.
Egal, wie man die Website gestaltest: Der Benutzer erwartet die Navigation oben. Bei neuen Projekten verbirgt sie sich auch auf größeren Monitoren hinter dem sogenannten Hamburger-Menü: drei übereinander liegende horizontale Striche. Klickt man auf die drei Striche, öffnet sich eine Liste mit den Unterseiten. Alle wichtigen Angebote müssen direkt dort erreichbar sein, sonst wird der Benutzer ungeduldig. Und klickt die Seite wieder weg.
Soll der Header ein Hintergrundbild haben?
Der Gestaltungsspielraum beim Website Aufbau ist trotzdem recht hoch, wie dir meine zahlreichen Projektbeispiele zeigen. Wir können immer noch einen farbigen Header und Footer haben oder mit einem Hintergrundbild arbeiten. Das Menü kann unterhalb des Logos stehen oder daneben. Das Menü kann sogar unterhalb eines Fotos stehen, wenn du dies möchtest, und statt eines Fotos kann ich einen Film einbetten.
Ich verwende beim Website-Aufbau im Wesentlichen die folgenden Versionen:
Boxed Classic:
Bei diesem Website Aufbau wird ein Bild oder eine Farbe als Hintergrund verwendet, aber auf kleineren Geräten (Laptop, Tablet und Handy) sieht man den Hintergrund nicht mehr. Die Navigation geht nicht über die gesamte Breite, sondern endet an den beiden Kanten. Der Fußbereich kann dunkel oder hell sein und geht ebenfalls nur bis zur Kante.
Widescreen I:
Bei dieser Website läuft auf jeder Seite ein eigenes Panorama-Foto über die gesamte Bildschirmbreite. Das Foto ist als festes Bild eingebaut, so dass es sich bei kleineren Bildschirmen einfach 1:1 verkleinert. Der Kopfbereich enthält links das Logo und rechts die Navigation. Dies funktioniert, wenn es nicht zu viele Menüpunkte gibt, die in einer Reihe stehen müssen. Kopf- und Fußbereich sind gefärbt oder mit einem Hintergrundbild ausgestattet.
Der Nachteil von Widescreen-Formaten ist, dass man bei der Auswahl von Fotomaterial eingeschränkt ist: Die Bildaussage muss in einen schmalen Ausschnitt passen (Briefkastenschlitz), damit der Besucher sieht, dass unter dem Foto noch Text steht. Wenn du selbst Fotos schießen lässt, muss der Fotograf ein Weitwinkelobjektiv benutzen. Lies auch diesen Artikel zum Bildausschnitt.
Widescreen II:
Wie Widescreen I, aber hier ist das Panorama-Foto nicht als Bild eingebaut, sondern als Hintergrund. Dadurch kann man vor dem Foto Text einblenden, aber man muss das Foto 3x einbauen (für drei Bildschirmgrößen) und jeweils festlegen, wie viel davon zu sehen ist. Ein weiterer Unterschied ist, dass ich bei diesem Website Aufbau mit Content Boxes gearbeitet habe („Meine Säulen in der Therapie“). Unten (nicht im Bild zu sehen) gibt es einen Teaser mit Foto zum Profil.
Widescreen III:
Nicht immer muss eine Widescreen-Seite Fotos enthalten, die über die gesamte Bildschirmbreite gehen. Auf dieser Website haben wir mit kleinen Fotos gearbeitet. Bei diesem Modell kannst du leicht selbst Seiten anlegen, weil du die entsprechenden Fotos nur kleinrechnen, aber nicht zuschneiden musst.
Widescreen IV:
Hier ist alles Widescreen: Nicht nur das Hauptfoto, sondern alle Elemente nutzen die ganze Bildschirmbreite.
Dieser Aufbau ist etwas anspruchsvoller als die oberen Variationen, weil ich die Fotos als Hintergrundbilder eingebaut habe. Je nach Bildschirmgröße verschiebt sich der Bildausschnitt, so dass ich ihn für jedes Foto gesondert anpassen muss.
Hinterlasse einen Kommentar