How iThemes Builder sped up my workflow

There’s no shame in using the best tools at your disposal.

I have been using iThemes Builder and its available child themes for over a year now, and it’s made my process far more efficient. It’s not just a matter of slapping a logo on one of their prefab child themes and calling it a day. Most clients still require tweaks and changes to meet their needs.  As I’ve stressed numerous times in talks, blog posts and tweets: design isn’t just a matter of making something pretty, it’s about the functional presentation of information that achieves the goals of the client.

Over the time I’ve been designing themes for clients, I’ve built up a large library of CSS and HTML snippets to help speed up changes. Builder has made that library largely unnecessary because it makes layout changes a matter of a few mouse clicks. You can switch views (home, single, page, name it)  to any layout available, whether it’s the ones that ship with Builder itself or one you’ve created. You can just imagine how easier this makes testing a particular layout.

The best part about Builder is that—in a manner of speaking—it grows with you. Or, you can grow within it. You can start off with modifying a few child themes and experimenting with some layouts, through full-blown, from-scratch design. (I’m currently working on releasing a child theme or two for the framework. Testing use-cases—especially since these are being shared with the public—requires some thoroughness, so between client work and the nine-to-five, the going has been slow, I must admit.)

Watch out for a case study in the near future, but for now, iThemes is having their Black Friday sale. Use the coupon code FREESHIPPING (they’re a cheeky crowd, those guys) on a purchase of the All-Access Theme Pass, Builder, Plugin Buddy Developer Suite, or a premium annual membership to WebDesign.com.

Posted on: November 25, 2011 at 1:46 pm under: Freelance Protips

One Response

WordCamp Philly: A bit of a follow up

In the gentle words of an aging pop star: “If I could turn back time.”

Due to technical issues (stupid 1st-generation MacBook Air and its esoteric video out) the presentation I was able to give only amounted to about half of what I had hoped to do. The goal was to demonstrate with live code the way a WordPress theme folder’s different files affect the browser output. The goal was to demonstrate how, armed with this knowledge, a designer can make it easier for themselves and the developers who will slice their layouts.

You can see the slides at the end of this post. A few colleagues and they have commented that the use of labeled overlays was a good way to demostrate the relationship between the theme files and the Photoshop layers. When I came to that point in my talk and kept the slides up for a bit, I scanned the audience. Most of them had a look of realization. Not all, but most, and that was what I was looking for, ultimately: that moment where everything clicks into place.

I had left out a demonstration of the reusability and modularity of theme files using get_template_part, which was a segue into DRY not just for developers but also for designers. We all have our base templates in Photoshop with which to create comps, right? I had left out a demonstration of the use of conditionals in the theme, and how it can be shown in comping.

Basically, my favorite bits, the parts that blur the line between digital graphic design (a medium of pixels) and web design (a medium of HTML, CSS, Javascript, and related technologies) were lost. But I do have other opportunities to expand on this, on this here blog and also in future talks. So, here are my slides. Hopefully they help.


Posted on: November 17, 2011 at 7:19 pm under: WordCamp

One Response

WordCamp Philly 2011 Presentation Resources

I did that way too quickly.

Hi everyone, thanks for attending my talk at WordCamp Philly. This zip file has the PSD, an HTML folder, and a WordPress theme folder. You can install that theme folder into your local WP install and test it out, or you can explore the files using your favourite text editor so you can see the relationship between PSD layers and theme files.

Thank you and see you around.

Posted on: November 5, 2011 at 11:34 am under: WordCamp

Comments Off on WordCamp Philly 2011 Presentation Resources