Das Beste aus Fluid-Wrappern herausholen

Fluid Wrappers, das heißt fließende Überschriften, stellen eine der besten Vorzüge und Anwendungen von Headway dar. Und das ist es, was wir wollten. Diese fließenden Überschriften/Fluid Wrappers geben uns die Möglichkeit einen sehr schönen Kante zu Kante Hintergrund zu gestalten, um eine ansehnliche Seite mit modernem Design zu gestalten, ohne auf die Bildschirmgröße zu achten. Wir begrenzen unsere Layouts mit dicken farbigen oder sehr feinen Markierungen, aber wir sind nicht länger an eine Maximalgröße von 960px und einen einzigen, sich wiederholenden Hintergrund gebunden, um unseren fließenden Look/unser fließendes Design zu gestalten.

Fluid Wrappers, Fixed Grid (feste Gitter)

Dies ist die beste Wahl, wenn Sie eine Reihe von Inhalten,  eine Widged Fläche/Schaltfläche und Text haben.  Diese Blöcke neigen dazu, mehr Fließtext zu beinhalten, als in die Fläche eingebaut werden können, sodass eine Konstruktion von festen Gittern für diesen Text die Anzahl der Zeilenumbrüche reduzieren kann und somit auch schwieriger lesbare Absätze und Bereiche des Texts vereinfacht darstellen kann. Ein festes Gitter behält die Breite der Textblöcke bei, wobei wir uns dennoch die fluid wrappers zunutze machen können.

Der Hauptgrund, fluid wrappers und die festen Gitter zu benutzen liegt darin, dass nun die Möglichkeit besteht einen Hintergrund zu schaffen, der die gesamte Breite der Vorlage, der Grafik oder der Farbe (?) in Anspruch nimmt, während die einzelnen Blöcke dabei aber im Mittelpunkt des Browserfensters bleiben. Das bedeutet, dass die Spalt- und Blockmaße auf nahezu allen Desktop Browsern gleich dargestellt werden, während unsere Seite immer in der Full-Screen Ansicht angeschaut werden kann

Dieses Design Layout ist sehr beliebt und verbreitet und ermöglicht es, längere Seiten in Sektionen mit feinen (oder dicken) Farbabgrenzungen, Schaltflächen oder Kanten zu gestalten. Schauen Sie sich ein paar Beispiele weiter unten an:

Dezente Hintergrundfarben und eine gedämpfte Farbpalette kombiniert mit dem Fluid Wrapper und einem festen Raster lassen diese Website organisiert und aufgeräumt aussehen.

Für eine beeindruckende optische Wirkung verwendet man eine Kombination von Fluid Wrappern und festen und flüssigen Gittern (der Haupt Image Slider wäre ein Fluid Grid)

Dezente Hintergrundtexturen und Grafiken helfen die vorgestellten Bereiche auf dieser Seite hervorzuheben

Diese Website verfügt über feste Gitter mit einem Fluid Wrapper und einem gutem Beispiel für einen großen, dunklen Wrapper Hintergrund, um einen vorgestellten Bereich für Inhalte zu erstellen.

Fluid Wrappers, Fluid Grid

Fluid wrappers with a fluid grid offer some great opportunities too. The fluid grid expands to the width of the screen, stretching blocks, text and images to really take advantage of the browser width. This type of grid lends itself perfectly to full-width slider blocks ( or third-party slider blocks you've integrated)

Keeping Mobile in Mind

Remember that background images do not resize for mobile! So your full-width slider in a fluid wrapper with a fluid grid will resize down to mobile, but a large 1500px wide backgound image centered in your fluid wrapper will not.
Consider using repeatable background patterns and background colors to define your wrapper areas, because these scale down exceptionally well on mobile devices. You can also use custom CSS and a CSS Gradient Generator ( try this one or this one) to create gradient backgrounds without images (supported on most modern browsers).

Different Wrappers, Different Layouts

Each layout can have it's own unique set of wrappers. This is incredibly useful when setting up a separate, unique homepage design, landing pages or unique page layouts. Consider the following three layouts with different groupings of wrappers:

The interior pages have a consistent set of wrappers, creating a cohesive feel as you navigate throughout the site

The Contact page departs from the standard layout to draw attention to the subheading and contact form

This landing page departs entirely from the standard, giving users limited navigation options (pushing them towards the form) and using wrappers to highlight the video and signup form. 

Clever use of wrappers and clearly defined content areas will be the key to making your website readable, functional and interesting, so start experimenting with them and find what looks great! Then share your new designs with us at the Showcase by sending a „Showcase Submission“.

Last updated on February 22, 2014