Gestaltung einer Vorlage mit verschiedenen Wrappern

Headway bietet die Möglichkeit multipler Wrapper. Es mag Sie überraschen, aber das gehört zu den mit Abstand besten Dingen an Headway. Dieses Feature bietet unglaubliche Flexibilität!

Was ist ein Wrapper?

Einen Wrapper kann man sich am besten als einen Behälter für Blöcke vorstellen. Sie haben eine Reihe dieser Behälter, die übereinander (aber nicht nebeneinander) gestapelt sind. In diese Behälter können Sie beliebig viele (oder wenige) Blöcke einfügen.

Fluid vs. Fixed

Wrappers können Fluid-Wrapper („flüssig“) oder Fixed-Wrapper („fest“) sein. Ein Fluid-Wrapper nimmt 100% des verfügbaren Platzes am Bildschirm ein. Ein Fixed-Wrapper benötigt eine festgelegte Zahl an Pixeln (je nachdem, wie Sie den Grid konfigurieren). Blöcke verteilen sich je nach Grid-Spalten über den Grid – Blöcke in einem Fluid-Wrapper sind also typischerweise wesentlich breiter als in Fixed-Wrappern, da die Spalten (die unabhängig vom Wrapper-Typ festgelegt sind) breiter werden, um sich gleichmäßig über die Bildschirmbreite zu erstrecken. Das bedeutet auch, dass Blöcke in einem Fluid-Wrapper sich auf Ihrem Laptop eventuell über je 500 Pixel in drei Spalten erstrecken, während auf dem tollen Thunderbolt-Bildschirm Ihrer Mutter jeder Block in drei Spalten 1000 Pixel breit sein könnte (alles schon passiert).

Unabhängige Grids

Sie erinnern sich, wie ich von einer festgelegten Zahl an Spalten in einem Grid gesprochen habe? Das stimmt zumindest größtenteils. Es gibt auch die Option, einem Wrapper einen „unabhängigen Grid“ zuzuweisen, d.h., Sie können in einem bestimmten Wrapper völlig andere Grid-Einstellung vornehmen, als in allen anderen. So könnten Sie z.B. zwei Fixed-Wrapper haben, von denen einer einen unabhängigen Grid umfasst. Der unabhängige Wrapper könnte je nach Ihren Änderungen in den Grid-Einstellungen z.B. breiter sein. Nicht vergessen: Innerhalb eines Grids können Sie die Zahl der Spalten, Spaltenbreite die Spaltenzwischenräume festlegen.

Das Layout gestalten

Nun, da Sie Ihre Möglichkeiten mit Wrappern kennen, können Sie entscheiden, wie Sie Ihr neues Multi-Wrapper-Layout gestalten möchten. Im Folgenden finden Sie eine übliche Anordnung, von der Sie sich inspirieren lassen können. Wrappers sind rot umrahmt, Blöcke grau.

Wrappers zur Gestaltung verwenden (nicht nur organisatorisch)

Wrappers sind natürlich ideal dazu geeignet, Blöcke zusammen zu gruppieren. Der größte Vorteil multipler Wrapper ist allerdings die Fülle an Gestaltungsoptionen!

Definieren Sie Ihre Wrapper im Design-Modus und nutzen Sie Hintergrundfarben oder Bilder, um Ihr Design interessanter zu gestalten oder verschiedene Bereiche zum umreißen. Im vorherigen Beispiel könnten Sie z.B. den beiden Fluid-Wrappern eine bestimmte Hintergrundfarbe geben, um ihre Flexibilität zu unterstreichen und gleichzeitig verschiedene Seitenbereiche klarer abzugrenzen. Der Wrapper mit den Inhalten könnte eine griffige Hintergrundfarbe haben, um den Text lesbarer zu gestalten, wenn die ganze Webseite eine unruhige oder gemusterte Hintergrundgrafik nutzt.

Wrapper spiegeln (mirror)

Behalten Sie auch im Hinterkopf, dass komplette Wrapper gespiegelt werden können – also der Wrapper inklusive seiner Einstellungen und aller Blöcke darin. Das ist besonders nützlich, wenn Sie einen „Header-Wrapper“ mit all Ihren Kopfzeileninhalten haben, den Sie auf der gesamten Seite anzeigen möchten, oder einen „Content-Wrapper“, der gleich bleibt – ein voreingestellter Inhaltsblock mit Seitenleiste –, egal, wie Sie Ihre Kopfzeilengrafiken oder Fußzeileninhalte verändern (so könnten Sie z.B. je nach angezeigtem Archiv oder Seite den Kopfzeilenbereich ändern).

Letztes Update: 20. Mai 2014