Tools for Web Development / by Chel Wolverton

Artist Toolbox: Dean Russo / Dumbo Arts Center: Art Under the Br

As a web developer, I use many tools to wrangle websites and designs on a daily basis.  Photoshop is a godsend when doing mockups but that's just the tip of the iceberg.  Here are some other tools that help me with different aspects of the design and implementation process.

Themes for Wordpress

Quite often, a client comes to me already having found a theme to modify for Wordpress.  I will take that theme and customize it to their specifications.  I don't have hours to spend looking through Wordpress' theme bank, so finding good reliable sources with great themes that I can refer clients to works wonders at saving time.  One set of themes I love and support is Elegant Themes (affiliate link).  Fantastic looking, easy to use and clean code is awesome.

My own theme was customized by me but mostly out of the package from Site5.  I switched to it yesterday and so far it's also super easy to customize and use.  I do not use Site5 hosting so I cannot speak to the experience of that service.

FTP Clients

There are a lot of clients floating around out there.  I know some people are crazy for Transit, but I like Cyberduck.  The support is fantastic for donation based software and it just works.  The hands down best feature is the edit button being linked to the programs I typically use to edit files.  I can choose edit and it will open the file.  When ready to save my changes, they are saved back to the server.  Easy peasy.

Coding and Editing Files

There are a handful of tools that help me with coding.  First, Firefox plus Firebug plus Web Developer are my browser tools of choice.  I mainly use Firebug for debugging CSS and javascript errors, it also allows for live editing of code and a search function for finding keywords in errors fast.  Web Developer is toolbar that puts assorted dev tools in the browser.  I find myself using the view and edit CSS functions the most but this also allows me to see the div layout which helps with debugging code issues.  It was recently released for Chrome but I haven't had a chance to try that version yet.

I use CSSEdit for editing stylesheets and for php I use BBEdit.  CSSEdit quickly highlights each div upon click, making it easy to edit sections. BBEdit is not only great for editing any type of code but makes for a fun toy for geeks.  Forget find and replace.  This baby will prefix, suffix, process text lines, clean up text files, run scripts, change case, and add line breaks.  That's just off the top of my head.  It is supremely powerful.

Design Elements

Websites need color and often more than one.  In order to get colors that really mesh well, ColorSchemer Studio is hands down the best.  It will create a color scheme from one color but also pull colors from an image and allow you to preview a scheme as a blog or website as well as check for readability and contrast issues.  As a bonus it connects with the ColourLovers website so you get access to user-created colour schemes!

Fonts!  We want to make sites shiny and original and uncommon fonts are another way to do that in design.  Finding a good font can be just as search heavy as themes, but it doesn't have to be.  First, check out TypeKit.  Great for less than technical users, it even has a Wordpress plugin to make installation easy, just copy and paste the script after you install the plugin.

If TypeKit doesn't strike with inspiration, there are many font banks.  I am not attached to any particular one but most have a test feature that demonstrates the font.  Very handy for checking out prior to downloading a bunch of files.

Personally I like to use cufon.  It does require uploading the font to a server and adding in the javascript to theme files to make it work in specific elements.  Google Font will let you use their directory as long as you tie in via the API.


Flickr and Creative Commons.  Need I say more?  Make sure there is proper credit, get permission if necessary and extend a thank you to the photographer.  Rather purchase?  Check out iStockPhoto.

There are many more tools that I use just for testing, code validation and inspiration, but that's another post.  Have a question about any of the tools or a suggestion?  Leave it in the comments!