Aufbau, Bildgrößen und Anzeige
Die Homepage ist so aufgebaut, dass große Bilder, klare Inhalte und eine saubere Darstellung auf verschiedenen Bildschirmgrößen gut zusammenarbeiten. Dabei wird bewusst zwischen Startseite, Beiträgen und Seiten unterschieden.
Header und Navigation
Im oberen Bereich befindet sich ein fester Header, der immer sichtbar bleibt. Auf der Startseite ist er zunächst transparent und wird beim Scrollen sichtbar. Das Menü bleibt zentriert, damit die Navigation unabhängig von Suche oder weiteren Elementen sauber ausgerichtet ist.
Hero-Bild auf der Startseite
Die Startseite nutzt ein großes Hero-Bild mit einer festen Höhe von 600 Pixeln. Dadurch wirkt der Einstieg großzügig und modern. Das Bild wird mittig ausgerichtet, sodass der wichtigste Bildbereich auch bei unterschiedlichen Auflösungen möglichst im Zentrum bleibt.
Zusätzlich wird das Startseitenbild leicht animiert. Dabei zoomt es sehr dezent, um dem oberen Bereich mehr Dynamik zu geben, ohne unruhig zu wirken.
Hero-Bilder in Beiträgen und Seiten
In Beiträgen und normalen Seiten wird ebenfalls ein großes Headerbild verwendet, allerdings kompakter als auf der Startseite. Dort beträgt die feste Höhe 500 Pixel. So bleibt das Layout einheitlich, während der eigentliche Inhalt schneller sichtbar wird.
Diese Bilder werden ebenfalls mittig ausgerichtet. Falls das Seitenverhältnis nicht exakt passt, kann es zu leichtem Beschnitt kommen. Der Fokus sollte deshalb möglichst in der Bildmitte liegen.
Bilddarstellung und Zuschnitt
Für die Darstellung der Hero-Bilder wird ein Verfahren verwendet, bei dem der verfügbare Bereich vollständig ausgefüllt wird. Dadurch entstehen saubere, gleich hohe Banner. Damit das optisch gut funktioniert, ist die Bildmitte als wichtigster Bereich vorgesehen.
Auch bei Vorschaubildern und Beitragsübersichten wird darauf geachtet, dass die Darstellung ruhig und einheitlich bleibt. Besonders bei breiten Bildern ist ein mittig gesetzter Fokus sinnvoll.
Bildgalerie und Steuerung
In der Bildgalerie können Bilder auch mit dem Mausrad vor- und zurückgewechselt werden. Das macht die Bedienung einfacher und sorgt dafür, dass sich Fotostrecken flüssig und bequem durchsehen lassen.
Darstellung auf verschiedenen Auflösungen
Die Website ist so aufgebaut, dass sie auf breiten Monitoren, Notebooks und kleineren Geräten sauber reagiert. Große Bilder werden skaliert, Inhalte bleiben mittig ausgerichtet und wichtige Bildbereiche sollen möglichst erhalten bleiben.
Besonders bei breiten Hero-Bildern ist entscheidend, dass der zentrale Fokus des Bildes in der Mitte liegt. So bleibt die Darstellung auch bei wechselnden Bildschirmbreiten stimmig.
Technik und Browser-Verhalten
Die Darstellung wurde so aufgebaut, dass moderne Browser große Bilder flüssig anzeigen können. Gerade bei animierten Hero-Bildern kann das Verhalten je nach Browser unterschiedlich ausfallen. Deshalb wurde auch darauf geachtet, dass die Startseite technisch stabil und sauber dargestellt wird.