Headway 3.5 Wrappers: Fluid Headers & Footers!

No WordPress theme framework is perfect. And even more true: No WordPress theme framework is perfect for everyone. That said, I overall like the Headway theme more than any other WP theme. It’s flexible, innovative and a huge productivity booster… But alas – it’s not perfect!

I have a widescreen monitor… Gimme a widescreen theme

One of the things many web designers (myself very much included) have craved (yes: craved like a crack-addict craves crack) since Headway 3.0 came out in 2011 – is full width headers and footers, also commonly known as fluid headers and footers, even though I think that’s a misnomer, since the content inside may not necessarily be fluid. It could just as well be fixed.

Full width WordPress themes

What we’ve been looking for is individual wrappers that can expand to the left and right edges of the browser window. These wrappers have to be individual for each section/row on our site, to let us organize the content flow on a given page, into distinct sections / areas.

In the Grid layout editor in Headway 3.5, Wrappers look like this:

Headway 3.5 Wrappers explained

Now, in 2013, the new Wrappers feature in Headway 3.5 finally lets you create a full width / fluid header and footer on your website. This is where the latest web design trends happen. Big, huge, bold layouts with plenty of whitespace, yet structured and organized due to the distinct, visual separation of the sections/rows the user scrolls though, while navigating the page.

To illustrate this, let me show you a screen grab from the theme framework PageLines which also happens to support fluid wrappers (which they call sections):

Here’s PageLines supporting explanation for the above illustration:

Different layout structures change the way background colors and images behave:

• Full-Width Mode Full width design mode allows you to have aspects of your site that are the full-width of your screen; while others are the width of the content area.

• Fixed-Width Mode Fixed width design mode creates a fixed width page that can be used as the area for your design. You can set a background to the page; and the content will have a separate fixed-width background area (i.e. the width of the content).

Anyway, let’s get back to Headway…

Wrappers also has a hidden benefit, saving you time!

Besides allowing fluid layouts, Wrappers also has the hidden benefit of solving a an issue I’ve long had with Headway…

Let me first give you a short back story to let you fully realize how needed this “fix” was:

Headway layouts consist of Blocks. You also build your header with blocks. To save you a lot of work, these blocks can be mirrored across your site / other layouts.

That’s neat! But, the problem is: It only works on the Block level.

If you suddenly decide you don’t want your logo in the upper left corner, but rather centered above your navigation, you’d have to move it to the new place, on all your layouts / templates.

That takes time and effort. Maybe not much, you may think. But it’s the stuff that makes you want to kill your client for wanting such an unexpected design change.

Mirrored Wrappers

With the awesome Wrappers feature now available in Headway 3.5, that’s no longer a problem, since Wrappers can also be mirrored!

That means you just create your header as you want it to be, and mirror the Wrapper on the rest of your site. Should you, or your lovely, but ever indecisive client, change your mind and want a different layout – you simple change it in the mirrored wrapper. Once.

It somewhat mimics a PHP include – or the header.php file found in most WordPress themes.

… and of course it applies to all Wrappers, not just your headers. The fluid, full width headers mentioned above are just used as an example.

Pageless Design & Smart Sites: The future of web design

The possibilities are huge. With full width / fluid wrappers, pageless design or smart sites (as Digital Telepathy calls them) suddenly get a lot more fun to do, since you get way more layout freedom with the full width / fluid wrappers in Headway 3.5.

Next stop Headway 3.6 (room for improvement)

I know Clay and Grant from Headway Themes already have some great plans for Headway 3.6. But what I would personally love to see, is a rock steady, stable version of Headway.

Don’t get me wrong! Headway is stable. But with the fast paced development and rapid introduction of new features and changes in UI – it would be super nice with an update akin to Mac OS X Mountain Lion, where the focus was purely on internal optimizations, to make everything run smoother, faster and better.

Refinement and standardization of Headway’s UI would also be more than welcome.

Usability is of paramount importance to non-coders who use Headway to create the site of their dreams. And even for coders, a lean, mean, fast, stable UI is essential.

Another way to see it: Now that wrappers are finally here, I have very few desperate items left of my Headway wish list. But anything good can always be optimized and refined to get even better.

End notes

Headway 3.5 is $87 for a base (personal) license and $174 for a developer license. The base license allows you unlimited use on sites that you or your business owns. The developer license allows you unlimited use on any site, including sites you develop for your clients. A good deal I think!

PS: If you buy through the link above I get a share of the sale for referring you. Thank you;-)

Stuff mentioned:
Headway Themes, Grant Griffiths, Clay Griffiths, PageLines, Digital Telepathy, Mac OS X Mountain Lion, Usability.gov Usability Guidelines PDF, WordPress Codex on templates.