10 Mac Apps for Web Design and Development

I thought it’d make an interesting experiment to post my current top 10 apps for Web Design and Development on the Mac now at the beginning of the year, and then follow up at the end of the year to see what, if anything, changes.

So without further ado, here are my top 10 apps (in no particular order) for web design and development on the Mac:

1 MAMP, MAMP pro

It’s always best practice to develop and test everything locally before uploading to a server, and whilst the Mac comes with an Apache Server & MySQL already installed, I use MAMP. It’s quick to install and get up and running, and easilly configurable from it’s simple interface. An installation of MAMP gives you an Apache server with PHP and MySQL and the ability to locate the root level of your localhost server anywhere on your Mac. The basic MAMP installation is free but the paid for MAMP Pro is much more configurable and it allows you to setup multiple virtual hosts, and use Dynamic DNS.

version: 1.9.4
developer: appsolute GmbH
site: http://www.mamp.info/
Price: MAMP: free / MAMP Pro: €29.00

2 Subversion

Developing and maintaining a project would be a nightmare without some kind of version control. I use Subversion, as it plays well with my choice of editor (Coda — see number 4). Subversion can be a struggle to learn, but once learnt it definitely makes life easier.

version: 1.6.11
developer: CollabNet
site: http://www.open.collab.net/
Price: free

3 SequelPro

So now we’ve got the server environment and version control set up, what about working with MySQL?. I could use the command line or PHPMyAdmin which comes preinstalled in the MAMP package, however, on the Mac you can’t go wrong with SequelPro. It’s simple, powerful and free, giving you direct access to all your databases both local and remote.

developer: mjmedia
site: http://www.sequelpro.com/
Price: free

4 Coda

Finally on to the coding! I’m currently using Coda from Panic. It’s not quite a full IDE, but it does a lot and makes what it does do very easy. To begin with, it’s a text editor based on the popular SubEthaEdit text engine, it features syntax modes for ActionScript, ASP-HTML, CFML, CSS, ERB, HTML, Java, Javascript, JSP-HTML, LassoScript-HTML, Objective-J, Perl, PHP-HTML, Python, Ruby, Smarty, SQL & XML and additional syntax modes can be added. Whilst coding HTML it can validate on the fly. It gives coding hints as you type (great if you can’t quite remember the syntax for that php function!). It supports Subversion for version control and it is extensible both with AppleScript and third-party plugins. Coda has built-in FTP (it uses the same FTP engine as Panic’s top Transmit app). As well as all this Coda has a built-in GUI for coding CSS, a preview mode which allows you to browse the DOM, a built-in Terminal for when you need access to the command line and ‘books’ — a reference section giving you the complete run-down on HTML, CSS, Javascript and PHP.

version: 1.7
developer: Panic Inc.
site: http://www.panic.com/coda/
Price: $99.00

5 CSSEdit

Although Coda has a built-in GUI for handling CSS I still find myself coding all my CSS in CSSEdit from Macrabbit which I have been using for much longer than Coda. In fact, CSSEdit is the app that taught me CSS. The main window is split in to 3 columns, the left column contains all your classes, ids, selectors etc., the right column is a GUI for building your styles and the central column is a text editor for any manual adjustment you would like to make. On top of this, the Preview window gives you a live preview of your site which changes in real time as you edit your CSS. And that only scratches the surface of what this little app is capable of. If your developing on the Mac and you don’t have CSSEdit get it now!

version: 2.6.1
developer: Macrabbit
site: http://macrabbit.com/cssedit/
Price: €29.95

6 Kaleidoscope

When you have been working with version control for some time there will come a point when you want to either compare or merge a document with a previously archived version. If you have the Apple Developer Tools installed (they’re on your Mac OS X install CD) you can use FileMerge. However, a far more elegant solution is Kaleidoscope. As well a having a fantastic interface, Kaleidoscope has the ability to compare image files. Kaliedoscope can also be configured to work as the default diff app for Versions, TextMate, Cornerstone, Subversion (command line), Git, Mercurial, Bazzar and with a bit of command line persuasion Coda.

version: 1.1.1
developer: Sofa
site: http://www.kaleidoscopeapp.com/
Price: €29.00

7 Pixelmator

Anyone who is familiar with Photoshop will instantly have some idea of where Pixelmator is coming from. That’s not to say that it is a direct copy and whilst not as poweful as PS, it has some features and functionalitiy that is in fact better. Pixelmator can only handle RGB but as I’m using it for web graphics that’s just fine. Pixelmator uses Apple’s in-built quartz filters for image effects, so if you have Apple’s Developer Tools installed and you know your way around Quartz Composer, you should be able to build your own. All the familiar features are here, selection tools, gradients, brushes (it even supports Photoshop brushes). It can open and save in the .PSD format although some features like layer effects are not supported. It’s not a complete replacement for Photoshop (one thing I miss is some kind of path tool), but it can do most things – and for the price (E29 from the app store – which includes a free upgrade when version 2.0 comes out) it’s just great!

version: 1.6.2
developer: Pixelmator Team
site: http://www.pixelmator.com/
Price: €29.00 (Mac app store special offer)

8 Sketch

When it comes to designing icons I generally prefer to use a vector app. There are several alternative vector apps out there for Mac and each has it’s pros and cons. I am currently using Sketch which I got at a reduced price when I purchased the excellent Fontcase (see number 10). If you’re used to using Adobe Illustrator then this app can take a bit of getting used to, however, once learnt it’s really quite fun to use and for icon design it’s prefectly adequate. It creates files in it’s own .sketch format but it can export to .pdf, .eps. .svg, .jpg, .png and .tiff.

version: 1.0.6
developer: Bohemian Coding
site: http://bohemiancoding.com/sketch/
Price: €32.00

9 ImageOptim

This small utitliy is great! Before uploading any images I always run them through ImageOptim — if fact I have an Automator action set up to process them and the upload to my server. Basically ImageOptim is a GUI for several command line utilities (PNGOUT, PNGCrush, OptiPNG, AdvPNG, JPEGOptim, Jpegtran & Gifsicle). Even after saving an image using Photoshop’s Save for Web feature you can make considerable savings on the size of images (PNGs in particular) by running them through ImageOptim.

version: 1.2.5
developer: Kornel Lesiński
site: http://imageoptim.pornel.net/
Price: free

10 Fontcase

When it comes to Font Management the Mac’s built-in Font Book is not really up to the job — enter Fontcase. Fontcase is a kind of ‘iTunes for fonts’, it makes organizing, activating, and choosing fonts easy and enjoyable.

version: 1.5.8
developer: Bohemian Coding
site: http://bohemiancoding.com/fontcase/
Price: €42.00


Whilst I’m not claiming these apps are the best out there — although one or two (Fontcase and CSSEdit spring to mind) probably are — I am using them all on a more or less daily basis. It will be interesting to see how that changes over the course of 2011.