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

No Responses

Faux Minimalism

Never confuse minimalism with derivative reduction. Minimalism requires originality.

They were all the rave last year and the trend is ongoing but on the decline. These “movie posters,” that are “minimalist,” as they’re described.

Except they’re neither minimalist, nor would they sell a movie enough to make them qualify as “movie posters.”

Derivative and reductionist, these “posters” miss the very point of making movie posters: to create intrigue and interest in an upcoming movie. Instead, a huge lot of them rely on actually spoiling a movie. Consider: the following posters for Alien, Die Hard, District 9, Donnie Darko, Inception, and Misery:

Each one of these depict a pivotal moment in the film, so much so that they spoil the movie. The chestbuster emerging from Kane, the pain of John McClane walking on wounded feet, the merging of DNA in District 9, Frank the Bunny getting the bullet in the eye; these moments are part of the expository act of the film itself. To reveal these in promotional movie posters would leave viewers waiting for that moment, instead of being wowed at the time the moment happens. More so with Inception, whose dream-within-a-dream motif was kept under wraps through the entire promotional cycle. Lastly, consider: would your reaction be as visceral towards the hobbling scene in Misery if you already saw posters of a broken ankle?

These posters aren’t minimalist; they’re literalist. They miss the whole point of graphic design (which is, as is everything that has the word “design” attached to it, to fulfill a specific goal and to meet a specific need). A truly productive graphic design and movie poster project would be to create a poster for a hypothetical film, one that hasn’t screened yet, and one that you haven’t even seen, because the graphic designers who make these posters? That’s what they have to deal with.

Additional commentary:

Joe Clark notes: they work great in online thumbnails. Other graphic-design formats – including bedrocks of human civilization like body copy in books – work so badly online that you never see them. While Alexandra Lange rails against 60s retromania in addition to these posters. Good; my next post will be an attack on Instagram and retro filters.

Credits:

All images lifted from this big list of fifty minimalist movie posters. I like about two of them. Originals for: Alien, Die Hard, District 9, Donnie Darko, Inception, and Misery

Posted on: October 3, 2011 at 12:31 pm under: Design
Tags: , ,
No Responses

Every WordPress theme has its own learning curve

Fair warning: tweaking someone else’s theme is never as straightforward as you think. There’s a reason theme frameworks have gotten popular for custom designer/developers.

The client inquiry seems simple enough: “Hey, I downloaded this theme from the repository,” or “I bought this theme at a marketplace,” and “I’d like you to make a few changes. It’s close to what I want, but it needs a few changes.”

You quote the prospect your hourly rate and the estimated time you would spend doing the tweaks. The client sends you the zip file of the theme, you run it in your development environment then…

Boom. You’re staring at code you can’t make out. Forget the readability bit; forget shorthand. You’re faced with poorly written custom functions, undocumented hooks, abused filters, you name it. You get this feeling you might as well reverse-engineer the front end of the theme or plugin and call it a day. You find that researching the edits to the theme would push your estimated time to over twice what you quoted. You need to quote your client more, but expectations have been floated, if not set.

There’s more than one way to skin a cat. Some days, it seems there’s one way for every cat.

If it’s a matter of customizing a theme in terms of reader-facing design: colours, typography, minor changes to the markup, the task is simple enough. But when a client asks to expand a theme’s functionality using a theme whose code I have never seen before, there are so many potential pitfalls that it serves neither my client nor myself for me to enter into a contract for work without having the chance to review what I have to do.

Let’s start at HTML and CSS. Before CSS3 and widespread browser support, rounded corners for boxes required extraneous divs just to get them to work. You ran into alignment issues when cross-browser testing, and heaven forbid that you had to make it “IE6 compliant.” A single sidebar box with rounded corners and a background image can be coded in at least four ways, with varying degrees of efficiency. To an extent, CSS3 solves this particular problem, but how many more of these little things will you face as you go through your work? When you throw in PHP, the number of possible ways to produce a required output greatly increases.

We may all be writing in the same language—PHP—but we’re writing widely different manuscripts. The human cost of learning one person’s theme—purchased for a small amount of money—for one client, for use on one project is high enough. Having to do this with every client you come across would make the cost insurmountable.  This messy, diverse, beautiful nature is also what’s led to the rise of “theme frameworks,” and they’ve proven to be helpful and efficient ways to churn out custom themes for clients. They let developers streamline their learning paths by having a relatively standard base on which to build their themes, especially when the custom themes they make would require periodic, minor maintenance over time.

Theme frameworks help. I’ve been using one I’ve developed since version 0.71.

There are some themes I won’t touch. I have no experience with the Thesis framework and I won’t get into jobs for that. I would send them to experienced Thesis developers like Greg Rickaby or Andrew Norcross. Or I’d offer my own solutions. Freelancing is the same as any other profession, and it requires savvy salesmanship to stay in business.

A number of commercial themes have enough features to enable professionals to do their jobs a little bit better, a little faster. This is the reputation built by HeadwayStudioPress GenesisiThemes Builder, and Thesis. What they do not have are features that cast a wide net to capture numerous, small slices of the market from their competitors. For example, Builder doesn’t ship with a slider plugin, but they do have Displaybuddy available for separate sale.

Recently I’ve switched to Builder for rapid deployment projects. The many child themes available address a majority of the aesthetic requirements of clients, and creating a child theme is relatively easy. There’s a lot to learn with it alone, and I admit, that trying to learn another framework—be it Genesis or Headway—might not be the best choice for me at the moment. Maybe when I am ready to expand in that direction, but not yet.

“Standardization” in open source is impossible, but we can try to come close.

If you’ve ever worked in engineering or architecture, you’d know that drawings for a project are made according to a standard. It makes plans understandable for anyone with the professional knowledge, and allows for the continuity of a project across multiple participants. We don’t have that in WordPress. We have quality standards, and we hope that people who follow them get the most exposure. The WordPress Theme Review Team presides over theme submissions before they make it to the repository, and the official checklist is there for everyone to see an aspire to. None of these are guarantees to the actual readability and malleability of the code by a third party, though.

A few recommendations.

Commercial theme devs, especially those offering lower price points: a good way to help those who buy your commoditized themes is to offer links to people who are familiar with your work and have customized them before. I don’t know how the sub-$50 theme market works in terms of competition and whatnot, but even in such a crowded space there should be plenty of room for cooperation and referrals.

Freelancers: don’t quote anything until you’ve looked at the code. That hour or two looking at someone else’s theme may fall under time spent and even close to speculative work because you risk not getting client, but don’t forget to factor in that discovery time when you quote them. Don’t forget to educate your clients. there is a real difference between a drop-in theme you get from Themeforest, which you can slap a logo on, and an application/theme development framework you can start off of.

(Thanks to Andy Stratton, Ryan Duff and Phillip Copley with help on this article.)

Posted on: August 17, 2011 at 5:45 pm under: Freelance Protips

No Responses

Timthumb zero day vulnerability: time to get back to basics

It’s time to rethink how we bundle plugins with WordPress themes, and give our endusers the benefit of the doubt that they are smart enough to do some installations and updates on their own.

It’s a little long and techy, but Leland (@themelab) linked to a very disturbing post about timthumb, a script that resizes images and generates thumbnails for use with themes. The vulnerability is fixed, and anyone who updates the timthumb script would be safe.

“Anyone who updates the timthumb script.” And herein lies the problem: that script has been bundled by theme developers for years. Most of the people who download these themes will never know that they are running an old, vulnerable version of timthumb. Some might not even know how to update these. Some have purchased themes based on memberships that may be expired.

There are millions upon millions of vulnerable copies of the script out there, and not enough technically able users who can update this. There’s a fix for this moving forward, but it’s extremely politically incorrect.

Eliminate, as a matter of choice by theme developers, the bundling of plugins.

Instead, devs should include checks in their theme that look for the required plugins, and display a nag message in the admin linking to the WordPress plugin repository. Something. Anything. But not how it’s done today. Because, once a plugin is in the repo and a vulnerability is found and fixed, the developer can mark it as “updated,” which itself produces a nag message in the admin screen to update the plugin.

The architecture exists for issues like this to be avoided entirely. The counterargument—that “users” are too dumb to install a simple plugin which they can find in the repository without even leaving their own admin screens—is pure bullshit. It’s parochial and condescending for a developer to think this way.

WordPress has taken down technical barriers to entry. Despite that, we all need to call upon users to better themselves: to understand the basic basics of running a WordPress-powered site, no matter how “non-technical” they say they are.

Posted on: August 2, 2011 at 7:23 pm under: WordPress

4 Responses

Dreamers and Doers

Those who can, do. Those who can’t, read Lifehacker and fantasize about the perfect system to get things done.

When I first planned to have a second site dedicated to work-related matters, I wasn’t certain about a lot of things. I’ve had my personal domain for almost ten years, and in that time it’s built up a lot of Google juice. I didn’t want to lose it at first, so I asked a few trusted friends on what they think would’ve been a better route. (Obviously I was convinced to move design and work-related matters to a brand spanking new domain.) What ended the discussion for me was when one of them said “Google juice can be earned.”

Something that simple cut through a lot of doubt. I’m not going to lie: I have to deal with second-guessing myself. It’s a daily challenge and it’s not easy. Sitting down to wireframe a site on a pad of graph paper brings the excitement of a project getting ready to take shape. It also brings the sheer terror that the hour or two I’ll be spending doing this will result in a mulligan, or worse, an outright rejection. The same mental storm thunders through my mind as I do comps, as I code a WordPress theme, every step of the way.

It takes practice to keep trucking through—or around— this white-knuckled fear. I didn’t have anyone to tell me how to deal with it, except I knew that every book half-read on my shelf, every blog post draft unpublished, every sketch that never gets the time for play into an actual comp, was time spent starting something and not finishing that thing. It was time wasted. Each and every case.

I learned to stop regretting that wasted time, and instead to gaze upon the those wastefully murdered hours and just tell myself to not add to that pile. That time wasted not finishing something could’ve been time spent with family, with a special someone, on fitness, on anything else with a beginning and end, simply because that heap of unfinished projects is time forever lost… until the projects are finally completed.

However, for every procrastinator and second-guesser like myself, there exists another, more challenged individual: the perpetual planner. These productivity-obsessed folks spend hours reading about the processes of other, more successful people. Many of them spend hours on Lifehacker and similar sites, always thinking of how to do things better without actually having a goal in mind. They read these featurettes about how Mr. Big Name Internet Celebrity works, as if a thousand-word article can distill years of him developing a process that worked specifically for him. They spend all this time thinking to themselves, man, if I only worked that way I would get this project done. The problem is they never get past that bit. They find another alluring idol to follow with a story on their process, then another, then another. Instead of collectors, they become hoarders.

It need not be this way, though. I wish I had read Steven Pressfield’s Do The Work when I was in college. I wish it were written back then, but come to think of it, I wouldn’t be here without developing the processes I needed to develop on my own. I’ve made many mistakes and have paid for them, but most importantly I’ve learned from them.

That is the biggest difference between dreamers—perpetual planners—and doers. Dreaming requires no risk, sacrifice, nor discipline. Doing leaves one vulnerable to rejection and failure. Only one route makes you a better person.

Posted on: June 4, 2011 at 9:00 am under: Freelance Protips

3 Responses

WordCamp Raleigh 2011 Presentation: Bridging the Designer-Developer Gap

Well, that was nerve-wracking.

Here are the slides


And some additional commentary

I suppose, if I’m out to talk in a manner that challenges folks to leave their comfort zones, I’ll be bound to have someone in the audience who won’t like what they hear. The whole aim of the talk was to challenge folks to expand their skills to stay relevant in the medium. For print designers, it means that designing for the web is not just a matter of pixels but HTML, CSS and JS (and I admit that I am largely ignorant of Javascript).

After speaking with my colleagues and friends who were there, the consensus is that anyone designated “web designer” is one who implements a graphic design into the language of the web itself; this means that a graphic design education that ignores these languages is deficient for this medium.

If you think that finding the easiest, purchaseable solution will be enough for even the shadow of a career in a design consultancy, you are sorely mistaken. I’ve seen plenty of tweets from programmers (or in common parlance, developers)—self-taught, school educated or both—who sneer the idea that someone who can implement plugins is considered a “developer,” and for the same reason, any designer who thinks they can slap a logo on a prepackaged theme and call it a day is…eh.

I guess they can keep the title. Just as false prophets, we will know them by their work.

I was happy with the open discussion from the audience towards the end of my session; I was not expecting that. When I spoke last year, I had an audience that didn’t have to feel the need for commiseration. They were looking for direction, and my talk last year was a very gentle nudge. This year, I could see that the talk encouraged discussion from that has been bubbling under the surface.

One takeaway that seemed to stick was it was a matter of communication. Yes, but it’s only the first step. You can’t communicate clearly the concepts that you have little to no grasp of, so, yes, by all means, be a better communicator by knowing what you’re talking about.

Reception was far more positive than I expected, and I am very thankful for each and every one who thanked me for my presentation. I was worried that the message would be lost in the midst of the discussion at the end; that people would walk away thinking it was a whole lot of nothing. Judging by the responses from everyone, I’m glad that it wasn’t.

Perhaps the best part was after the talk when someone approached me, saying she knew HTML and CSS and has a background in writing, and just wanted to know how to make a WordPress theme. I tried explaining the hierarchy to her and realized she needed even more basic information, so when I had the chance I sat with her for fifteen minutes and explained the concept of template tags and how WordPress prevents designers from repeating themselves. Yes, Virginia, there are such people who have such a need to learn even this most basic of concepts. Contrast her willingness to learn, cf. the flippant attitude of merely leveraging money to meet a goal, and you see the diversity in my audience.

Maybe I could’ve handled it better. When I was asked, “why should I learn HTML when I could just buy a theme,” I imagined I had a look of sheer disbelief. I wasn’t thinking “how dare you,” but rather, “sir, it is this very attitude that I aim to combat,” because relying on buying your way through a craft doesn’t make you a better craftsman. I believe in craftsmanship. It’s the philosophy behind the cryptic “code is poetry” dictum surrounding WordPress. And I will be spreading the word: we can always, always do better.

Posted on: May 24, 2011 at 2:46 am under: WordCamp
Tags: ,
7 Responses

I’m speaking at WordCamp Raleigh

“Bridging The Designer/Developer Gap” is aimed at helping attendees learn a bit more about each other, themselves and the wid and wacky skill set that we all need when working with WordPress.

Do you call yourself a designer, or a developer, or perhaps a hybrid of both, in varied proportions? What has led you to say so? Most of us have been self-taught in WordPress, but most designers carry some formal education in their field and developers are also likely to have had classes in computer science and other programming-related courses.

Whether you call yourself a designer or developer, you’ve probably had to learn a bit of The Other Side’s skills in order to progress with a project. That, or you’ve subcontracted  work out to others. If you’re a designer, have you ever had the developer you’re working with come back to you and say, “this solution may not be the best”? If you’re a developer, have you ever been handed a comprehensive layout and thought to yourself, “if only this designer knew a little bit of what I had to do to make this design work“?

If any of these teaser questions apply to you, then you may want to come to my talk. I can’t promise I’ll have the answers, but I’ll be encouraging some lively discussion and hopefully we can share with each other how we’ve dealt with challenges like this.

And if you’re not at Raleigh, I’ll try to post video after the event.

Posted on: May 19, 2011 at 9:00 am under: WordCamp

2 Responses

A new beginning of sorts

Not so much a new kid on the block as I am putting up a new house.

Under the pseudonym of One Fine Jay, I’ve blogged for about eight years now. Recently, I’ve grown more comfortable letting out my real name and associating it with my written work. Because I write on two very different families of topics and the overlap between among my readers is so small, I’m launching this site to serve those who are interested in design, WordPress and related topics. Personal and political material will remain on my other blog.

This site also serves my professional goals. I am, after all, a designer for hire, and it’s only right that I gave my work a showcase of their own. I’m also working on a few freebies for everyone to enjoy: icon sets, maybe even a WordPress theme or two.

So here it is. It’s a bit of a fresh start, and I hope you have a great time.

Words of thanks

I wouldn’t have started this without the counsel of some very close friends. The idea to start a professional, topic-focused site started in talks with Michael Torbert, who also took my absolutely fabulous photo in my bio page. Instrumental to the final decision to start this project were Ryan Duff of Fusionized (who also provided the plugin that powers the riders that introduce each of my posts), Chip Bennett and Doug Stewart, who’ve also provided much guidance and encouragement throughout this project. Plenty of emotional support came from Lisa Sabin-Wilson, whose encouragement helped me through moments of doubt. And because having oneself as a design client—physician, heal thyself—can either bring you to the heights of self-aggrandizement or the depths of self doubt, my friend who runs Denifed has been a source of serious design critique through the entire process.

Posted on: May 16, 2011 at 3:00 pm under: News
Tags:
No Responses