Can This Tool Help Me Build My Site Faster?

That’s the question I ask when I look at new tools. And it’s one of the ultimate benchmark tests that I consider when assess any new tool or process.

My core toolset is entirely programmatic. I either build custom themes from scratch, build child themes on top of existing themes, and plug the gap with plugins that I either get from the wordpress repository or build myself.

A handful of tools dominate the market for “visual builders” allowing people who are creating sites to build without having to code. Or at least minimising the amount of code that has to be written.

Over the last few days I’ve taken a look at a few of these tools. I’ve partly been motivated glowing reviews in the community, including from the likes of Chris Lema. Such posts often have a trail of positive comments talking of the wonders of these tools. That’s another motivation.

However my overall impression is that none of these tools offer a clear advantage over either customizing a child theme or coding from scratch. I’m likely to continue climbing the learning curve just in case something clicks. But the claims of added convenience and speed just don’t amount to much.

Here’s a summary of each of the builders that I’ve looked into, and my impressions.

iThemes Builder

iThemes Builder
iThemes Builder

Steep learning curve. Big and complicated. Unconventional coding makes child themes difficult to work with. iThemes provided themes are built very unconventionally and I learnt the hard way that you can’t just child them and expect to be able to use them without having learnt Builder deeply. I wouldn’t recommend picking up iThemes Builder as an experiment for an client project.

Support staff are responsive.

I’m uncertain that I’d ever use this for a real project. I can see that they’ve put a lot of work into it, but currently I can’t see the benefit of using Builder over creating a custom theme.

Ultimatum

ultimatum-logo-white

Also big and complicated with a steep learning curve. Advertises a “drag and drop builder”.  The term “drag and drop” gives an impression of simplicity. However, Ultimatum’s builder requires that you learn a complicated interface and new terminology. All of this has to be learnt before any dragging and dropping is done. An interface for customizing CSS the ultimatum way is too constraining for some simple things (You might have to add your own plugin to inject CSS into the footer). It isn’t helpful that they’ve overloaded the term ‘template’, already used by wordpress.

Subscription gives access to a bunch of plugins that you’d otherwise have to buy separately on codecanyon. I don’t know how they offer support for these.

Documentation is very detailed. However some parts of it are unclear, particularly when it comes to adding custom CSS.

I could end up using Ultimatum for a real project. But I wouldn’t expect to see any advantage in the speed of site creation over building from a child or custom theme.

Headway

headway
headway

A much more slick product then the previous ones but not without it’s own frustrations. It’s polish doesn’t prevent you from having to learn it’s nuances and many configurations. You get to the “drag and drop” action faster then you would if using Ultimatum. But it’s still big, complicated and constraining: as far as I can tell, if you are building a layout then you can’t create a custom loop within that layout.  You can add a “code area” with your own php. But thats frustrating, because you can’t code with the convenience of a proper text editor. So testing becomes a pain.

The actual “drag and drop” editing screen is also confusing for while. Power and simplicity do not go hand-in-hand.

An alternative is to drop in a widget area and then find a widget that lets you create a loop. But that’s much more of a pain then just, say, coding your own Page Templates from. Also, using a widget would require that you do custom styling without access to markup (annoying) and make it very difficult, if not impossible, to work with data created with tools like pods. This is entirely unnappealing.

I could possible use Headway for a real project. But I’d have to sink more time into learning it and I still wouldn’t expect to see a speed advantage.

**update: jan 5th 2015 **

Headway can be great for quickly laying out or prototyping sites. The difficulty comes when you need to use custom code. Headways templates allow you to drop in custom php. However, the workflow for this isn’t smooth. So the convenience of fast layout and intuitive layout production is offset significantly by clunky workflow. The headflow developers have clearly done much hard work on this polished product. But it isn’t developer-friendly.

Conclusions

For all of the above tools it could be relatively straightforward to build a simple site. But if you wanted to build a simple site you wouldn’t want to spend money and time on a new tool when you can just use an existing theme and possibly child it. Or code from scratch.

What I’m probably seeing is the emergence of niche: wordpress tools for “developers” who don’t actually do programming.

I don’t mean to sound like  grumpycat. I can see that the developers of these tools have put in a lot of work building their tools, marketing them and providing support. All the vendors have been industry players for at least a year and get a lot of great reviews – reviews that encouraged me to test their wares.  Clearly a lot of people in the industry are getting value from them.

And I’m likely to continue to experiment with these tools. Maybe I’ll have an “aha moment” with one of them. But for the moment the appeal of each of them is limited.

At first I didn’t understand the point of Aesop Story Engine.

I installed it in a local test instance of wordpress, and started using it. Initially all I could see that it let me add blocks of content via the editor. But members of the wordpress design and development community whose opinion I really trust are quoted as saying that it’s the best thing since sliced bread.

A couple of things helped me to ‘click’. First I read this article in the documentation. About halfway through reading it, I started to get it.

 The Niche

The marriage of digital storytelling and longform journalism has some produced some remarkable, and remarkably compelling pieces of online content. Here’s a famous example from the New York Times. Wired magazine produces some masterful pieces as well, including this one Edward Snowden.

The examples linked to above represent the state of the art, produced by a team of people fulfilling the roles of designer, developer and art director.

Can a wordpress plugin help you craft beautiful pieces of masterfully designed digital storytelling?

Probably not. Masterful craftsmanship takes more then a plugin. But Aesop Story Engine can give you a start in that direction. And in my opinion, if you channel skill, focus, time and digital resources into it, then maybe with ASE you an create something that approaches the state of the art.

 How Aesop Story Engine Is Being Used Today

The showcase has a mixed bag of examples that is, overall, inspiring. The showcased sites use themes available from ASE. Some of the uses are really great. In terms of presenting content all of the examples are at least pretty good. I think the ASE developers should be really proud of the possibilities that they’ve enabled for content producers.

The Ecosystem

aesop homepage

ASE can be downloaded for free. It’s available from the wordpress plugin repository and from github. Once enabled from the wordpress backend, it can be used straight easily and immediately from the wordpress editor for posts and pages. Although that probably isn’t what you want to do (more on that in a bit).

Official themes for ASE are available for download at cost from the ASE website. They aren’t as cheap as most themes, but I have no doubt that they are worth it: wordpress themes generally are underpriced and I’ve got faith that the team behind ASE produce great themes. My only reservation was that I’d love to be able to take an “official” theme for a test run and dig into the code.

However, there is this: a minimal example sample theme on github, offered for free by the developers.

It was pondering the way that the example theme worked that made me click to the “why” of ASE’s existence.

Now, there do not seem to be any free themes made for Aesop. But I suspect that they may come. Personally, I find this empty niche interesting. I can see third-party developers creating themes in the future and I’m tempted to build one myself.

The ASE site offers a bunch of inexpensive plugins, none of which I’ve tried. I’m sure they could save some development time for coders and non-codey site operators. Personally I couldn’t justifying shelling out for any while just test-driving ASE. Besides, I’d probably want to buy them all.

Why And How I Want To Use ASE

Digital multimedia storytelling can look beautiful and be really compelling. I’m dying for an excuse to use ASE.

Personally I think that multimedia digital storytelling can be more powerful if the content has some kind of contrast against it’s immediate context.

Here is what I mean by that:

Articles in this style in Wired magazine online look different from other articles in wired. They contrast. And that contrast adds to the character of those articles.

So for a website focussed on text content, I would like take either a few or none of the default styles and create specific articles with ASE using the minimal sample theme on github. I’d use something like  this plugin to deploy the custom theme for a specific post. (Thanks to an article in wpmudev for making me aware of that plugin).

Now some developers would wonder why I would use ASE if I’m going to code for that article anyway. My answer is “pure curiousity”. I might be able to achieve the same thing in roughly the same amount of time if I can do it by hand. I really don’t know if this is the case but I’d like to find out.

— edit —

Taking a slightly closer look at some of the features and add-ons to ASE, I can definitely see how building a story with ASE can be faster then doing it all by hand.

So, I decided to spend a little time improving my PHP skills. I’ve been building hacking wordpress templates and building plugins for a while, but I’ve been feeling like I need to improve my mastery of object-oriented development in PHP. I picked up a copy of William Sanders “Learning PHP Design Patterns” and started working through it. As I began working with the examples, I felt the urge to test concepts really quickly. Having a REPL handy is basic necessity for testing things out quickly in any language. Getting a REPL to run inside emacs makes driving your REPL of choice even faster and a great deal more pleasurable. My php repl of choice is boris, simply because I’ve got some familiarity with it. To get it to run inside emacs I installed php-boris and php-boris-minor-mode. php-boris needs the highlight library. My config ended up looking like this:

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;
;; boris
;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

(require ‘highlight)

(add-to-list ‘load-path (expand-file-name “~/.emacs.d/lisp/php-boris”))
(require ‘php-boris)

(add-to-list ‘load-path “~/.emacs.d/lisp/php-boris-minor-mode”)

(require ‘php-boris-minor-mode)
(add-hook ‘php-mode-hook ‘php-boris-minor-mode)
(add-hook ‘web-mode-hook ‘php-boris-minor-mode)

Once all the libraries were installed, I evaluated my conf file and ran a test: I created a simple php file and passed it to boris. It worked!

Another pane opened in my emacs window, showing PHP’s evaluation of my test.

boris-repl

Putting the pieces together was easy enough. Now I can quickly test ideas from within emacs.