Genesis 1.7 vs. Headway 3.0

The good news for WordPress devel­opers is that a tremen­dous range of pro­fes­sion­ally designed and devel­oped themes exist that will let you get a site run­ning quickly. Among them are “themes” that per­haps should be referred to as frame­works because they are much more than a simple theme. These frame­works allow the designer/developer to add or create child themes that use the frame­work as their base and simply add in the look required for a given site.

The most well known of these frame­works are prob­ably Thesis, Genesis and Headway. All of them are pow­erful and each are used by a great number of pro­fes­sion­ally done sites. But they are not the same. I have expe­ri­ence with Genesis and Headway and would like to describe how they are the same and how they are different.

The Same

Both Genesis and Headway pro­vide these fea­tures in common:

• Advance con­trol for Search Engine Optimization (SEO)
• Personal and Developer licenses
• Complete flex­i­bility of design using HTML, PHP and CSS
• Well struc­tured code (espe­cially well orga­nized CSS classes)
• Available child themes that are ready to go out of the box or that can be mod­i­fied and cus­tomized as needed
• Available custom widgets
• Excellent sup­port forums
• A com­mu­nity of pro­fes­sional devel­opers avail­able for hire
• Online doc­u­men­ta­tion

Different

And they are dif­ferent in these ways:

• Extras in the devel­oper license – Genesis gives you all their themes, those they have now and any that are devel­oped; Headway pro­vides spe­cial devel­oper tuto­rial videos
• Updates – Genesis pro­vides updates free for life, Headway requires a yearly subscription
• Design approach – Genesis is text based, Headway is visu­ally based

Text vs. Visual

It is the last of the dif­fer­ences that is by far the greatest dif­fer­en­tiator between these two pow­erful theme frame­works. Developing in Genesis is like pro­gram­ming – you grab your favorite text editor (mine is Coda) and make the mod­i­fi­ca­tions and adjust­ments you want. Headway shares a lot in common with the web plat­form Squarespace, but is based on WordPress. While you always have the option to break out the text editor and dive head first into the HTML, PHP and CSS code, the pri­mary inten­tion is that the bulk of your devel­op­ment efforts will be spent in the Visual Editor.

The Headway Visual Editor allows a designer to start from scratch and design a site using drag and drop tech­niques to place the building blocks of the site (the header, con­tent, widget area, footer and such) and then simply click on the options to set the style of the ele­ments used (fonts, colors, align­ment, head­ings, link hovers, bor­ders and so on). Or you can start with a child theme and modify that with the same approach.

The Visual Editor allows a lot of con­trol, but not all of the con­trol. Each block or ele­ment can only be mod­i­fied in the Visual Editor using the tools Headway has cre­ated in that envi­ron­ment. If you want a header title to have a graphic back­ground, for example, you can do that in the Visual Editor.

Headway Version 3.0

For the com­par­ison in this article, I have dis­cussed the just released ver­sion 3 of the Headway frame­work. The basic con­cept of Headway has not changed – it wants to be a visual design envi­ron­ment. Version 3 has just picked up where ver­sion 2 left off and pro­vided more power in the Visual Editor. But ver­sion 3 is still a work in progress and does not yet include all the fea­tures of ver­sion 2. They are coming.

Notably, ver­sion 3 has no upgrade path for web sites from ver­sion 2. That, too is coming.

New with ver­sion 3 is the licensing and pricing model. Gone is the life­time sup­port; now its a yearly renewal. Lucky for me I got a developer’s license before the release of ver­sion 3 so I am grand­fa­thered in for sup­port for life.

Drag-and-Drop vs. Code

I’m not a big fan of the way Headway ver­sion 3 stores CSS in the WordPress data­base instead of in text files that can be easily edited in Coda. And I’ve been a some­what vocal critic of the orga­ni­za­tion and user inter­face of the Visual Editor. The good news, at least for me, is that you can do all your layout work (which can be very tedious in pure text) in the Visual Editor and then do your design work (CSS) in a text editor – a tip I got from Headway Expert.

There’s more for me to learn since I’ve been using Genesis, and liking it, for a while now. But I started work on a new web site for my pho­tog­raphy work and decided to use Headway together with Gallery+ and ProofBuddy. So far so good and it has let me really get down into the HTML and CSS behind the scenes. I’m doing most of the work using Espresso ver­sion 2 as a change of pace from Coda and a way to com­pare those two strong devel­op­ment tools.

So I may have a more in-depth blog post about Headway and Espresso when that project is complete.