Documentation › Making the Most of Fluid Wrappers

Making the Most of Fluid Wrappers

Fluid wrappers are a much-anticipated feature for Headway, and it’s everything we hoped it would be. Fluid wrappers give us the opportunity to create beautiful edge-to-edge backgrounds for that slick, modern visual regardless of screen size. We’re breaking up our layouts with bold color or subtle borders, but we’re no longer constricted to 960px and a single repeating background to create our “fluid” look!

Fluid Wrappers, Fixed Grid

This is your best option when you have a set of content, widget area and text blocks. These blocks tend to contain longer stretches of text that can get unwieldy when elongated, so a fluid grid would reduce the number of line breaks and create difficult-to-read paragraphs and sections of text. A fixed grid keeps the width of the blocks in check while allowing us to take advantage of the fluid wrapper.

The primary reason for using a fluid wrapper and fixed grid is the opportunity to use a full-width background pattern, graphic or color while keeping blocks centered within the browser window. This means that the column and block sizes on most desktop browsers will be consistent while our site still appears to have a “full screen” style.

This design style is very popular and makes it easy to break up a longer page into sections with subtle (or bold) colors, patterns and borders – see a few examples here below:

Subtle background colors and a muted palette combined with the fluid wrappers and a fixed grid keep this site organized and clean looking

A combination of fluid wrappers would use fixed and fluid grids (the main image slider would be a fluid grid) for impressive visual impact

Subtle background textures and graphics help to highlight featured areas on this site

This site features fixed grids with fluid wrappers and a great example of a big, bold wrapper background to create a featured area for content.

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”.

This article was last updated for Headway version 3.8.3

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress