Genesis 1.7 vs. Headway 3.0

The good news for WordPress devel­opers is that a tremendous range of profes­sionally designed and developed themes exist that will let you get a site running quickly. Among them are “themes” that perhaps 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 framework as their base and simply add in the look required for a given site.

The most well known of these frame­works are probably Thesis, Genesis and Headway. All of them are powerful and each are used by a great number of profes­sionally done sites. But they are not the same. I have expe­rience 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 provide these features in common:

  • Advance control 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 modified and customized as needed
  • Available custom widgets
  • Excellent support forums
  • A community of profes­sional devel­opers available for hire
  • Online docu­men­tation
Different

And they are different in these ways:

  • Extras in the developer license – Genesis gives you all their themes, those they have now and any that are developed; Headway provides special developer tutorial videos
  • Updates – Genesis provides updates free for life, Headway requires a yearly subscription
  • Design approach – Genesis is text based, Headway is visually based
Text vs. Visual

It is the last of the differ­ences that is by far the greatest differ­en­tiator between these two powerful theme frame­works. Developing in Genesis is like programming – you grab your favorite text editor (mine is Coda) and make the modi­fi­ca­tions and adjust­ments you want. Headway shares a lot in common with the web platform 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 primary intention is that the bulk of your devel­opment 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, content, widget area, footer and such) and then simply click on the options to set the style of the elements used (fonts, colors, alignment, headings, link hovers, borders 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 control, but not all of the control. Each block or element can only be modified in the Visual Editor using the tools Headway has created in that envi­ronment. 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 comparison in this article, I have discussed the just released version 3 of the Headway framework. The basic concept of Headway has not changed – it wants to be a visual design envi­ronment. Version 3 has just picked up where version 2 left off and provided more power in the Visual Editor. But version 3 is still a work in progress and does not yet include all the features of version 2. They are coming.

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

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

Drag-and-Drop vs. Code

I’m not a big fan of the way Headway version 3 stores CSS in the WordPress database instead of in text files that can be easily edited in Coda. And I’ve been a somewhat vocal critic of the orga­ni­zation and user interface 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 photog­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 version 2 as a change of pace from Coda and a way to compare those two strong devel­opment tools.

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

Comments

  1. says

    Thank you — thats a useful comparison here. Happy Genesis user here, would love to see some of the visual control come to Genesis too if its tech­ni­cally feasible.

  2. B says

    Calling Headway’s customer support forum “good” would be a stretch at best. I joined in 2010 and have since moved on to Genesis and Woo

    • Brian Lee says

      Same here. Definitely leaning toward Genesis these days. I see all the flashy video demos of the drag and drop in Headway but when it comes to nitty-gritty I don’t like bouncing between Visual Editor and css.

  3. says

    We have used headway exten­sively but one of the major draw­backs is the lack of version control. If you are contem­plating using version control for your sites and themes I don’t think headway is for you. While in the short term you can get away with a create it once and tweak it as you go method that is headway. In the long run, or in an expanding team envi­ronment I think that you quickly find yourself spending all the money that you thought you saved by being able to drag and drop. Also if you think you want to stage your site I’m not sure how you do that and then role it out in headway. So while there are many cases when I have used it. I find myself wanting to move entirely away from it.

    Could they fix it with some versioning system and staging setup to push changes. Maybe, but you would have another versioning system that didn’t fit with your git or subversion.

  4. Janos KOZMA says

    Hello Bob,
    I read care­fully your analysis regarding GENESIS VS HEADWAY. Currently I am looking for a powerful framework to do my website. I was little bit confusing when I read your website where to write nice stuff about headway, but I noticed that your website is powered by Genesis. Is finally genesis the most suitable for WEBSITE devel­opment ?
    I would appre­ciate your lights regarding this point.
    Thanks you very much
    Have a nice day.
    Janos

    • Bob Rockefeller says

      Janos,

      Yes, this site is run on Genesis now. And my other site (Bob Rockefeller Photography) is run on iThemes Builder. So I tend to wander back and forth.

      As nice as Headway can be, it just doesn’t seem to fit me and my coding style. I’m also concerned about their devel­opment road map and the fact that the whole company pretty much revolves around the tech­nical skill of Clay Griffiths. I have found the support and depth of resources of both Genesis and Builder to be stronger than Headway.

      I have no reser­va­tions in recom­mending either. And maybe I should be thinking about a compar­ative article on those two soon.

      Bob

  5. Bob Rockefeller says

    Marie,

    I’ve looked at the new Headway a little, but I’m just not impressed. It’s stability and trust­wor­thiness across updates is just not good.

    Right now, I’m finding a lot to like in Genesis 2.0. I’m updating Bob Rockefeller Photography with it now and hope to roll that out in the next week or two. If I still am happy with Genesis 2.0 after that, I’ll probably overhaul this site and switch to Genesis 2 as my default.

    Bob

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">