So, I’ve been exper­i­menting again. And I do a fair bit of that on this site, but certainly not as much as Brian Gardner does on his.

This exper­iment was twofold. The first part was to convert the site’s content and look from the Genesis framework to the Builder framework. Part two was to do it with a different set of devel­opment tools.

The Tools

Let me tell you about the second part first. I had been using Coda 2 (and Coda, before that) for most of my web work. Yes, I’d dabble with Espresso from time to time, but Coda was my main tool. And I like it a lot; but it’s not perfect, and I’m always looking for “better.”

It seems as if there as always been two approaches software devel­opers to make tools for complex projects—integrated solu­tions or indi­vidual tools. And there are many examples such as Microsoft Works (inte­grated) vs. Microsoft Office (indi­vidual tools), text editor/compiler/debugger (indi­vidual tools) vs. Xcode (inte­grated). And for me, in the web world, there was Coda (inte­grated) vs. the combi­nation of BBEdit, CodeKit, Transmit and Chrome (it used to be Safari, but version 6 screwed the web inspector up so badly I had to switch to Chrome).

BBEdit has been on my DragThing dock about as long as there has been a BBEdit (or DragThing). What can this text editor not do? In the face of a lot of new kids on the block the likes of Chocolat, TextMate, and Sublime Text, BBEdit has stuck around adding features and matching new OS conven­tions year after year. A couple of my favorite features? Tab stops can be shown as vertical lines line pinstripes on the screen to better line up code blocks visually. The alpha­bet­i­cally sorted navi­gation menu for func­tions or CSS decla­ra­tions. And the editing dialogs for HTML and CSS. Love ‘em for when I can’t remember the right syntax.

Where does CodeKit fall in? Its kind of a junk box of handy tools, but I use it mainly for its ability to update a browser window whenever you save a file its been tracking. So as soon as you hit save for the CSS file you’re editing, it updates your browser. Nice! And one of these days I’m going to get serious about Sass or Less, and both of those are compiled on save by CodeKit.

My sites are all acces­sible via FTP, so some­thing with the power and features of Transmit is the way to go for moving files around. It will handle all the file management chores and do sync and even mount an FTP server as a virtual Mac OS X disk. I’ve been using Transmit for other FTP tasks (outside of web devel­opment) for so long I can’t remember what I used before that.

Chrome is my web devel­opment browser, but not my day-to-day browser. I like Safari’s interface, iCloud connec­tions, and general feel much better for my usual surfing. And it used to be my web devel­opment browser, too, because it added web inspector features; but then came version 6. For some reason the devel­opers decided to change the web inspector and dropped the ability to easily find which CSS rule was over­writing which; it used to be in the Computed Style when exposed by the little down arrow.

Continue reading Building With Builder and BBEdit

I’ve used a number of different blogging systems over the years going back to Blogger, WordPress​.com, self-hosted WordPress and Squarespace. Now that I’ve settled in at new hosting, and am running a self-hosted WordPress site again, I set out in search of the “right” theme for this blog. The short version is that I’m using Headway and you can go a long way before finding anything any better. Depending on your needs, maybe you can’t.

Headway is not so much a theme as it is a theme devel­opment platform. Out of the box it gives you a pretty standard looking blog that is certainly func­tional enough, if not very inspiring. The magic happens when you start to put your own look to it and find how very much you can do without writing a line of CSS, HTML or PHP code. And if those letters don’t mean anything to you, you may espe­cially want to take a look at Headway.

There are so many themes available for WordPress that it would be hard to put a number on the total. And most of them are free. Not that that’s bad, in fact that’s pretty good, but if you’re looking for some­thing that will be around for a while and be supported while it is, you know that you get what you pay for. Literally. For some folks, there’s a free theme out there that suits their needs just right – no need to do much to customize it, just use it as it comes.

But if you want your blog, or website, to have a particular look there will need to be some customization done of most any theme. And some themes are more customizable than others. Maybe there are a few color choices, the ability to upload your own header, or even change the base font. But when its time to really get the job done, you are out of the realm of the free themes and you’re looking for a premium theme with a wide range of features. Take a good look at Headway.

One of Headway’s Visual Editor panels. Click to see larger.

The feature list for Headway runs long; to get more of the picture, I’d suggest checking out their website. Here I want to high­light a few of the things that really drew me to Headway. The first, and most important, is the almost unbe­lievable Visual Editor. If you’ve ever tried Squarespace, you have a sense for what the Visual Editor is.

Unlike any other theme editor for WordPress, Headway’s Visual Editor allows you to see your site as it will be seen by others as you build it. And better than that, you can make changes simply by clicking on the object to change and selecting from the options on the control panel.

Pages in Headway are constructed from leafs (like the leafs of a table, not the leaves of a tree). A range of standard leafs comes with Headway, such as text, content (for blog posts and the like), widget ready sidebar, and HTML/PHP (for the code guys). Other leafs can be purchased (there are free ones, too) and added. Once you add a leaf to your layout, you can drag it to the place on the page you want it.

The width of columns and leafs can be adjusted by clicking on the one you want and dragging a slider in the control panel. Many options are offered for the footer, header and columns. Most of the different text elements on the page can be clicked on and then styled as you’d like. There is a tremendous range of options that give you the ability to create very different and unique pages all with Macintosh drag and drop, point and click, and pick from the menu ease.

Headway’s Live CSS Editor. Click to see larger.

Your options don’t stop with the Visual Editor. In more tradi­tional WordPress fashion there are many choices to be made in the dash­board. It is there you’ll find the ability to configure the meta data around your post titles (such as author, date, category, etc.), set the wide range of search opti­mization (SEO) options and create backups of your work.

There’s a lot of power available to users with a little under­standing of WordPress and a vision of what they’d like their website to look like. And it doesn’t stop there. Developers with a knowledge of web coding can just go to town with the numerous hooks (use them with PHP and HTML) that provide access to adding elements to the design. If the Visual Editor doesn’t offer the ability to change the style of an item you need to change, you can use the Live CSS. Make changes to the CSS of your site and see the effects in real time within the Visual Editor – you have to see that to believe it!

And there’s more to Headway than simply building and customizing your own website. Developers can use Headway to create any number of different sites for their customers; each one looking very different from the rest. For that you’ll need to step up from the Personal to the Developer package. The Personal edition is $87 and the Developer edition is $164 with upgrades from Personal to Developer available for the difference in price.

Let me not end without acknowl­edging that Headway is not the only game in town for devel­oping sophis­ti­cated websites in WordPress. Headway’s primary compe­tition comes from the very well respected Thesis theme – another theme devel­opment platform. A large and profes­sional community has grown up around Thesis and for good reason. For those with a smaller budget, I should mention the very capable, but little known, Suffusion from Aquiod Themes. I used that for this blog right before I switched to SquareSpace.

If you are looking for a tool to improve a website you already have, or need to find some­thing to get started with, I’d recommend taking a look at Headway and Thesis, at least. They both cost the same and both offer 30-day money back guar­antees. I know I won’t be wanting my money back for Headway.