14 killer web design and development tools for the Mac

Here are 14 must have web design and development tools for the Mac that I use on a daily bases. Many of these applications are also available on windows, and the ones that are not have alternatives. These tools can make your life easier and optimize your workflow. Unless the word “demo” is included in the download link, most of these apps are Open Source or just plain free.

Firebug

This application is the holy grail of Firefox addons. I still haven’t made full use of everything it has to offer, but the ability to select any element in real time on the screen and see the markup and the CSS hierarchy immediately, has change how I debug my code. What’s even more useful is you can troubleshoot problems right in the browser by changing CSS and HTML on the fly and watching the browser update in real time. You can also debug JavaScript and view the DOM hierarchy.

This tool is also invaluable if you develop email newsletters. Often web based email clients like Gmail and Hotmail will rewrite parts of your code and break it. Firebug allows you to see these rewrites and come up with workarounds.

Web Developer

Web Developer is another Firefox addon that I have been using even longer than Firebug. It allows you to do things like outline your markup, validate local files quickly, clear session cookies, disable CSS or JavaScript, view image alt tags, and way too many features to name. It’s also super easy to use.

Coda

Coda quickly turned into my favourite editor earlier this year and has entered regular daily usage. While Dreamweaver is still a daily part of my web design life, Coda has moved to the top of my list for web page and php creation. It’s light weight and super fast, it’s also got a fantastic interface. Like Firefox there are also a bunch of great Plug-ins for it. It also has built in FTP with a publishing system and Subversion integration. There’s also a lot of uniquely Coda things to explore and it’s one of the most polished web applications I have used. Coda is also where I first started playing around with Zen Coding.

Dreamweaver

This beast (and it’s a beast) is practically on every web designer job description out there. It’s become synonymous with web design and has help many web designers achieve a faster workflow. That said, Dreamweaver has become a bit of a beast lately; it’s often slow and bloated with many features you may or may not ever use. It’s also one of the reasons that Coda has entered my work space. Why is it on the list then you ask? Because it is the absolute best table based editor out there, and if you are making email newsletters you are either using tables or making newsletters that don’t work. Yes anyone can code tables by hand, but it can get tedious and unruly when you have several nested tables and need to expand or collapse multiple columns and rows. Chances are you’ve got better things to do with your time than count table cells, so why not let Dreamweaver do the mundane work for you.

It’s also a pretty good application for pouring static content, although some versions of the program will not recognize a copy and past from a program like Microsoft Word. That said I often find myself firing up Dreamweaver to copy and past large chunks of text and then pasting that formatted HTML into Coda. The purists out there might turn their nose up at this, but they have probably missed the clients bold and italic formatting in the eighth paragraph.

Free Ruler

Ever need to measure things on your screen? I do all the time, especially when trouble shooting padding and margin issues. This ruler is pixel perfect and will show where your mouse pointer is. This tool was also used to measure many of the screenshots in this article. A simple yet powerful tool to add to your arsenal and of course it’s free.

EasyFind

A good search program is an enormous help when working on large websites. I often search through hundreds of files looking for a phrase or snippet of HTML when I can’t find the right file to edit on a site I am not familiar with. The search systems on today’s operating systems leave a lot to be desired for developers. Sure they are fast, but often both Mac OS and Windows will skip files they think are unimportant. A program like EasyFind lets you dictate exactly how you want to search, fast and effortlessly.

DiffMerge

Although I don’t find myself needing to compare files often, when I do this program is invaluable. Sometimes you might need to know why an older version of a script is working and not a newer one, or maybe you need to compare the content? Whatever the reason a file compare and merge program will allow you to compare differences between files line by line and merge if necessary.

Photoshop

What list would be complete without Adobe Photoshop. Yes lately Adobe has been introducing a lot of bloat to their products and removing valuable tools from some of their apps, but Photoshop still remains the image manipulation powerhouse that most of us run to for web design. There are many alternatives to Photoshop, including the great open source program GIMP. Could I use GIMP to achieve my web design goals? Probably, but I’ll stick with Photoshop because if you work in the industry, almost everywhere you go people will be using Photoshop.

Cyberduck / FileZilla

FTP programs are a must and there are so many to chose from. Programs like Dreamweaver and Coda have built in FTP functionality, and  you can usually get command line FTP via the terminal of most operating systems. That said, there may be times when you want a graphical standalone FTP client.  Cyberduck and FileZilla are two fantastic FTP programs, but I would lean towards Cyberduck on the Mac and FileZilla on the PC.

MAMP

If you work with PHP you will no doubt need a local web server. If you are using a PHP based Open Source project like WordPress or Drupal, your host is probably running a LAMP stack. This is Linux, Apache, MySQL and PHP. Most PHP Open Source projects run best on this setup. For Mac there is MAMP, and for Windows there is WAMP. Setting up a web server yourself is timely and not really necessary for most of us running a local development server. That’s where MAMP comes in, in moments you can be up and running with everything you need for most PHP based software. You also get phpMyAdmin installed and ready to go, which is an Open Source web based MySQL database administration tool. This software bundle saves you a load of time.

MaxBulk Mailer

Email newsletters have become a part of many web designers duties. I create a lot of email newsletters, and with the mass of half baked email client implementations out there, testing becomes very important. MaxBulk Mailer is a quick and easy way to set up your test email accounts and fire away at them. It’s easy to send to your Gmail, Hotmail and Yahoo test accounts along with whatever stand alone email clients you intend to test. You can also blast off test emails to an online email preview service like Litmus.

Colloquy

If you use one of the many Open Source packages out there like WordPress or Drupal, you may want to look into an IRC client and the FreeNode IRC network. A lot of open source developers and users spend time on IRC, and you can learn a lot from them. Remember you will probably get more help if you also donate time and support back to the community.

Colloquy is a really polished Mac client. You can save favourite channels and quickly connect to them.

Virtual Box

As a web designer/developer you will need to test, test, test, and test again. How do you do this in multiple browsers when you can only install one browser per OS, or better yet how do you test on other platforms other than your own? This is where Virtual Box comes into play, another wonderful Open Source application that allows you to run virtual machines. You can run several Windows machines on a Mac and test in different versions of IE. With virtual box I sometimes have several virtual Windows machines going at the same time with IE6, 7 and 8 running. Don’t forget to check out my tutorial on cloning your virtual box installs.

OmniGraffle

I only recently started using OmniGraffle for flow chart diagrams and wireframes. This fantastic application lets you quickly create diagrams and the interface is very intuitive. For a web designer, a lot of the power in OmniGraffle comes from the free stencils you can download that Omni Group and it’s users have created.

That wraps up my list of fantastic apps. Don’t see your killer app on the list? Share it with the rest of us and post it in the comments, I’d love to try it out.