WordPress Design And Development Tools

February 17, 2011 | Bill Robbins | 3 Comments | WordPress

Here is an assortment of tools that I use in developing most every theme that I create. Over the years I’ve tried lots of programs, but these are the ones that I keep coming back to.

iMockups

Some people begin with pencil and paper, but I love the iMockup app for the iPad. It allows me to rapidly experiment with different layout options. If something doesn’t work, there’s no erasing, or fuss. You can develop some pretty nifty wireframes, especially considering its only $9.99. My only negative point with the app is that its export options are somewhat limited.

Photoshop

Once I have a mock up that I’m pleased with, I move the wire frame over to Photoshop to add design flesh to the skeleton that was created. Here I create everything from backgrounds, to layout elements. Generally I make a full mock-up of what the finished site will look like. I’m not a slave to the pixels that I put down here. Generally I do a bit of finishing in the browser that changes the design a bit from this point. Once the Photoshop work is finished, I move on to the coding using the next group of programs.

Coda

I’ve been a faithful Coda user for about two years now and I find it stable, helpful without being intrusive. Each of my sites gets a screenshot on the home screen where all my login and other details are stored. Clicking on the screenshot takes me the code of that site. It has a live preview built in. It’s FTP tool is built on top of Transmit, another really solid program. There’s a terminal for server access, SVN and more. I even used to use its good CSS tools before I discovered CSSEdit. Coda is a tool for the Mac. If you’re not a Mac user, I’d consider becoming one just to use Coda and CSSEdit.

CSSEdit

After using this tool, I can’t imagine going back to any other way of editing CSS. It has a fantastic live preview that allows you to make real-real time changes to the CSS of any page. Especially useful is what they call X-Ray. It allows you to freeze the page and then select elements in it. CSSEdit will then tell you where within the site’s HTML the element is located and which styles in the stylesheet are affecting it. It’s quite useful if you can’t figure out why something looks the way it does. As an added bonus, it automatically creates shorthand styles when applicable. If you enter margin-top: 0; margin-left: auto; margin-bottom: 0; margin-right: auto; it will automatically convert it to margin: 0 auto; for you. Lastly it will keep your style of writing CSS to keep things consistent.

If you’ve used Firebug for Firefox or the developer tools that come with Safari and Chrome, you may have tasted a hint of what CSSEdit can do, but those tools can’t come close to matching it. There are a few things I wish could be improved. I wish you could freeze drop down menus with x-ray. I wish it had better support for CSS3 properties. Lastly I wish it could tell you about the styling inside an iframe like Firebug can.

MAMP

This an incredibly important program that I don’t think about all that much. It allows you to run a web server on your local computer. Do you need to serve website from your laptop? Probably not, but you can use this free web server to do local WordPress development. Without this or its Windows counterpart XAMPP, you’ll be forced to upload all changes to a live web server to see changes. All those seconds of uploading end up becoming hours of wasted time before you know it. Speed up your development, and do it without anyone else watching, by using MAMP on your local computer.

So these are the tools that I use most when developing a new WordPress site or theme. What tools do you find the most helpful?