Die optimale Gestaltung von flüssigen Wrappern

Fluid-Wrapper war ein heißersehntes Headway-Feature was seit Version 3.6 umgesetzt wurde und es wurde nicht zuviel versprochen. Fluid-Wrapper bieten uns die Möglichkeit, unabhängig von der Bildschirmgröße wunderbare Hintergründe in voller Breite darzustellen und diese schicke, moderne Optik vorzuzeigen. Wir trennen unsere Layouts mit grellen Farben oder subtilen Rändern, aber wir sind für unseren „flüssigen“ Look nicht länger auf 960px und einen einzelnen gekachelten Hintergrund angewiesen.

Fluid Wrapper, Fixed Grid

Das ist Ihre beste Option, wenn Sie eine Reihe an Content-, Widget- und Text-Blöcken haben. Diese Blöcke enthalten für gewöhnlich längere Textabschnitte, die unhandlich werden, wenn sie in die Länge gezogen werden. Ein Fluid-Grid würde also die Zahl an Zeilenumbrüchen reduzieren und schwer lesbare Absätze und Textabschnitte verursachen. Ein Fixed-Grid achtet auf die Breite der Blöcke, erhält aber alle Vorteile des Fluid-Wrappers.

Der Hauptgrund für die Kombination aus Fluid-Wrapper und Fixed-Grid ist die Möglichkeit, ein Hintergrundmuster, eine Grafik oder Farbe in voller Breite darzustellen, gleichzeitig aber die Blöcke im Browserfenster zentriert zu halten. Das bedeutet, die Größe der Spalten und Blöcke werden auf den meisten Desktop-Geräten konsistent sein, die Seite aber doch einen „Vollbild-Eindruck“ hinterlassen.

Dieser Gestaltungsstil ist sehr beliebt und erleichtert es, eine längere Seite in Abschnitte mit subtilen (oder grellen) Farben, Mustern und Rändern einzuteilen – unten ein paar Beispiele:

Subtile Hintergrundfarben und eine sanfte Farbpalette kombiniert mit Fluid-Wrappern und einem Fixed-Grid lassen diese Seite wohl organisiert und sauber aussehen.

Eine Kombination aus Fluid-Wrappern könnte Fixed- und Fluid-Grids nutzen (der Hauptbild-Slider wäre ein Fluid-Grid), um optisch Eindruck zu schinden.

Subtile Hintergrundtexturen und Grafiken unterstreichen auf dieser Seite die Feature-Bereiche.

Diese Seite nutzt Fixed-Grids mit Fluid-Wrappern und bietet ein schönes Beispiel für einen großen, grellen Wrapper-Hintergrund, der einen Bereich für Feature-Inhalte bildet.

Fluid Wrapper, Fluid Grid

Auch Fluid-Wrapper mit einem Fluid-Grid bieten ungeahnte Möglichkeiten. Der Fluid-Grid reicht bis an die Bildschirmränder und streckt Blöcke, Text und Bilder, um die Breite des Browserfensters wirklich voll auszunutzen. Diese Art von Grid eignet sich ideal für Slider-Blöcke in Vollbreite (oder eventuelle Slider-Blöcke von Drittanbietern).

Mobilgeräte nicht vergessen

Beachten Sie, dass Hintergrundbilder sich auf Mobilgeräten nicht skalieren! Ihr Vollbreiten-Slider in einem Fluid-Wrapper mit Fluid-Grid wird sich also auf Mobilgeräten herunterskalieren, nicht aber ein großes, 1500px breites Hintergrundbild, das in Ihrem Fluid-Wrapper zentriert ist.
Ziehen Sie kachelbare (repeatable) Hintergrundmuster und Hintergrundfarben in Ihren Wrapper-Bereichen in Erwägung, denn diese werden auf Mobilgeräten ausgezeichnet runterskaliert. Sie können auch angepassten CSS-Code und einen CSS Gradient Generator (z.B. Ultimate CSS oder Gradient CSS) nutzen, um Hintergründe mit Farbverläufen ohne Bilder zu erstellen (wird von den meisten modernen Browsern unterstützt).

Verschiedene Wrapper, verschiedene Layouts

Jedes Layout kann seine eigene, unverwechselbare Reihe an Wrappern haben. Das ist unglaublich hilfreich, wenn man separate, einzigartige Hauptseiten, Landingpages oder Einzelseiten-Layouts gestaltet. Man nehme z.B. folgende drei Layouts mit verschiedenen Wrapper-Gruppen:

Die inneren Seiten nutzen konsistent gestaltete Wrapper, was bei der Navigation durch die Seite ein stimmiges Gefühl vermittelt.

Die Kontakt-Seite weicht vom Standard-Layout ab, um Aufmerksamkeit auf die Unterüberschrift und das Kontaktformular zu ziehen.

Diese Einstiegsseite bricht komplett mit dem Standard, bietet dem Nutzer begrenzte Navigationsmöglichkeiten (dirigiert ihn Richtung Formular) und nutzt Wrapper, um das Video und Anmeldeformular zu unterstreichen.

Geschickte Nutzung von Wrappern und klar erkennbare Content-Bereiche sind der Schlüssel dazu, Ihre Webseite lesbar, funktional und interessant zu gestalten. Experimentieren Sie also damit herum und probieren Sie, was einfach gut aussieht! Teilen Sie dann Ihr neues Design mit uns unter Kunden, indem Sie uns eine E-Mail mit Betreff „Kundenwebseite“ senden.

Letztes Update: 21. Mai 2014