Headway 1.0 vs. Thesis 1.5.1 – A Designer’s Review

What’s Headway?

This blog post took me 2 hours to outline and write.  It should, hopefully, take you considerably less time than that to read.

The Twittersphere has been all abuzz over the debut of the only serious competitor to the Thesis Theme for WordPress last week.  It’s the Headway Theme, presented by Grant Griffith’s G2 Web Media and developed by his son, co-owner Clay Griffiths.  Since there’s a lot of press out there on Thesis already, and I myself have written a rather comprehensive article on why Thesis is the bomb, I won’t reiterate the basics of Thesis here.

Naturally, since I have a strong client base of legal professionals, and Grant Griffiths’ products are well-known and respected in that community, I’m hearing from clients about Headway.  It’s already gaining a strong foothold among the lawyer set.

Disclaimer: This comparison is not intended to be a “yellow team” vs. “blue team” shoot-out, although readers are free to fight it out in the comments (be nice).  Any of my small gripes about Headway are not in order to protect any sort of serious Thesis affiliate income – I’ve made less than $600 in commissions on Thesis over the past seven months.  Either I’m the world’s lousiest affiliate marketer, or I’ve just been too busy building Thesis websites to push that avenue. This post is long, because I personally hate short, very general posts that are just intended to get you there so you might click the affiliate link.  I’m here to actually give you some information.  Suck it up.

How the Comparison was Done

As a test of how Headway can be customized, I decided to try to recreate the home page from my own Rowboat Media website (if you’re not in an RSS reader or email – you’re here). It’s on a Thesis full-width framework and really isn’t heavily customized at ALL – it’s still very discernably Thesis. My Headway “clone” is here.  Explanation of the three basic pages on that site – Home, About, and Blog – follows.

While it may be obvious that Headway’s quickly-becoming-famous drag-and-drop layout editor is a boon to non-designers willing to operate within its constraints, I took a designer’s perspective.  I often work with a specific end in mind and need to see if a framework can be bent to my will – without modifying core files, which is a rule I absolutely refuse to break.  I don’t need clients screaming at me that they updated WordPress or their theme and broke their design.

The Home Page

To create my home page, I first went into the Headway Design panel and handled all of the options there.  A more detailed blog post with screenshots of the Headway Dashboard may be forthcoming, but I’m trying to stay high-level here.  The Stylesheet section is important to designers – you can choose the Headway Default style sheet or a couple of bare bones stylesheets, which are recommended for designers.  I was curious about what I could accomplish without having to resort to my own code, so I stuck with the Default and springboarded off of that.  I also activated the custom.css stylesheet, which became quite necessary later.

I uploaded my header graphic and was presented with the option of “inside wrapper” or “outside wrapper”.  I guessed that for a full-width look, I needed to choose “outside wrapper.”  I was right, and choosing a matching header background color gave me the look I wanted, and the behavior of the navigation menu seemed tied to that choice as well.

Then I went through the choices for colors, typography and font sizes and filled in all of the relevant fields with colors and fonts to match my original site (more on that later, in the Gripes section.)

Finally, I went to the Layout Editor – instead of choosing from a set series of column layout choices like those Thesis offers, I was given the option to enter pixel dimensions or drag and drop to create my layout.  I created a content area, a rotating image leaf (to correspond to Thesis’ multimedia box) and two sidebar leafs/leaves (guess what those matched up with?).

After that I went to create a footer that matched my existing full-width footer.  No dice with that – see Gripes, after viewing the NOT-full-width footer on the clone site.

The About Page – in Which I Grok the Layout Editor.

Once I had styled my home page as far as I could go to match my original without modifying core files, I decided to have some fun with the Layout Editor in the About page.  And in five groggy minutes after midnight, I accomplished what you see there.  A top content layer (the default WordPress-issued text) and three columns underneath.  In five minutes, with the drag-and-drop editor, and using some of their “canned” functionality.  For instance, the About leaf lets you write your blurb, upload a photo, and include a “Read More” link for a deeper read – I can see this fitting perfectly in any blogger’s home page sidebar.  The Twitter leaf is self-explanatory, and the Recent Posts – nothing to write home about.

What’s exciting is this.  I did in five minutes with Headway what would have possibly taken hours to do in Thesis without pre-canned code, using hooks, functions, a calculator, PHP and CSS and lots of head-banging looking for the inevitably misplaced semicolon.  Newbies think this is way cool.  As a designer, I know the pain intimately, because I do things every day that non-technical WordPress users won’t even attempt.

Note, of course, that this layout is completely different than the one in the home page.  Without writing a single function or conditional statement.  I just did a big project with custom page templates in Thesis, so I bow down before this functionality.

And, let’s face it – the page-width content or graphics area with 3 columns centered below it is highly trendy right now, which means clients are going to ask for it.  I myself am starting to see it as the look of “2009 design.”   Heck, check out Headway’s own home page above the fold (wicked grin).  Two years after the avant garde design community was saying rounded corner designs were so OVER, we’re still doing them for clients.  Of course, who are these people who get to declare trends over, anyway?

The Blog

I left the blog completely untouched on purpose – therefore you can see the Headway “instruction panel” that you’re supposed to delete, and the default sidebar that comes with the blog page.  This sidebar is the one called the “primary sidebar” in the Widgets panel.  Obviously you can do with your blog all of the things you can do with any of the other pages in Headway, so I felt safe to stop here.

Headway Gripes

You knew this was coming, didn’t you?  Before you all rush over to port side to buy Headway instead of Thesis and capsize this here blog post, keep reading.  You only have two more sections to go, I promise.  Stop. Whining.

I compiled a detailed list of every single thing that gave me heartburn, and emailed it to the owners of Headway.  They responded personally, thanked me for my list, and told me many of the things on it will be addressed in v1.5, which is currently in development.

Here they are:

Typography: In my Why Thesis? article, I wax poetic about Pearson’s mastery of typography.  Headway’s got a way to go here.  There are less than half the font choices in the design menu, and the line height defaults to 1.75, which looked super-crappy on my site.  I went over to my real site and grabbed Chris’s magical calculated value from there, and I had to use custom.css to style my elements in Trebuchet MS, a disgustingly common font.  This slowed me down considerably.  Type sizes don’t match up either – 13 pt Arial in Thesis had to be sized down to 11 pt in Headway to look the same.  Here is one area where I had to get into code more with Headway than with Thesis.

Footer: There’s no elegant way to pull off a full-width footer in Headway without modifying core files, which I refuse to do.  Ditto for those default links.  Clay assures me this is coming soon.

Image rotator: The image rotator is really cool, in that it produces a built-in slideshow of up to 4 images per page, and you can control speed and transition.  I liked the static randomizer in Thesis, though, as I hate flashy things when I’m trying to read something.  Also – in Thesis, images are auto-sized to fit perfectly into the multimedia box (provided you stay within a long list of common aspect ratios). The same images were not auto-sized in Headway, and I found I had to do a certain amount of tinkering around with the size and never did get the hairline border to look right before I declared it too time consuming and moved on to other things.

Location of custom.css file: I clocked this whole experiment at 5 and a half hours.  This would have been considerably LESS had the custom.css file belonged in the Custom folder along with its cousin, custom_functions.php.  However, it doesn’t – Headway stores it in the Headway root folder.  My Thesis-trained FTP brain never could remember this, and there was much cursing when my site seemed to be ignoring my CSS.  I kept either dropping it in the Custom folder, or the site root folder.  This may say more about me than Headway.  Someone moved my cheese.

Sidebars: Sidebars/Leafs don’t show up in the widget panel with unique names (like Sidebar 1, Sidebar 2) unless you assign them, which took me a minute to figure out.  It also took me a minute to figure out what the heck a Primary Sidebar was (it’s the default-issue with the blog page).

Which do I buy?  Headway or Thesis?

The only answer I can give, even though I know major goodness is coming down the pike for both products, is based in the here and now.  It depends on what is important to you.  If you are a DIY blogger and you want to get your paws on that Layout Editor above all else and get a site launched by the end of this month, go with Headway.  It’s looking to be a good product for a v1.0, and I’m certainly going to keep following it, kicking its tires, and developing on it because my clients demand it.

However, Thesis has proven itself over the past year to be a stability and SEO powerhouse (which Headway has not yet had a chance to prove), and has a large community with a rich supply of information already out there.  The forums are active and well-populated with skilled designers, whereas Headway’s support forum is just getting off the ground, and the demographic in the forums so far isn’t asking the really hard questions to draw out the complex answers.  There are many good designers with hundreds of hours of Thesis design time under their belts, including yours truly.

On the other hand, a lot of the complex questions asked and answered about Thesis just aren’t that complex any more with Headway’s Layout Editor.  I have no doubt that Pearson has something spectacular up his sleeve for Thesis 2.0, however, and these two developers may be leapfrogging each other for quite some time.  Once Thesis 2.0 is released, I know it will be elegant and stable because everything else has been to date.  Both frameworks offer lifetime upgrades with purchase of a license, so I wouldn’t go diving from one side of the fence to the other (or experiencing buyer’s remorse) just yet.  I think the fourth quarter of this year could turn out to be extremely interesting where both products are concerned.

Bottom line: If you already own and like Thesis, I’d sit tight for a month or two and see what happens in terms of functionality.  If you don’t own either one and are trying to make a decision, use the information above and my Why Thesis? article to help you.

As a designer with a varied range of clients to serve, I’m casting my vote in both places and adding both to my toolbox, and the Headway banner gets an honored place in my sidebar alongside Thesis.