17 Essential Apps for Web Developers & Designers on Mac OS X

34

by Andy Boyd

Here’s our run down of the essential apps available for web developers and designers. Rather than focus on one element of the web development or design process, we’ve pretty much covered all the bases here. You’ll find apps designed for code editing, file and data transfer, collaboration, database management, image editing, invoicing, time tracking, expenses tracking and much, much more.

The apps explored below are a rather disparate group, but there are two common threads tying them together. Firstly, as you might expect, they are all perfect for web developers and designers, greatly reducing the time, hassle and heartache needlessly expended during projects. Secondly, they have all been designed to be used on a Mac, by a dedicated Mac user, who expects his or her apps to operate in a certain Mac-like way.

Most of them are relatively inexpensive and almost all of them offer a free trial period, so pick the ones that are right for you and give them a go. You never know, they might just change your professional life!

Code Editors

1. Coda ($99)

Rather than have several windows open at the same time, all doing different things (one text editing, one saving files to the server, one previewing in Safari etc.), combine each aspect of web development into one unified window with Coda, to make editing CSS that little bit easier.

As well as syntax colouring, line numbering, auto-completion and block editing, Coda offers some unique features, such as Live Collaboration, which lets you edit code live with any co-worker in the world, and Clips, a floating window which lets you insert frequently used text CSS snippets quickly and easily.

2. CSSEdit ($79.90 with Espresso)

Unlike some of the other code editors available, CSSEdit is strictly limited to the coding of CSS. Luckily, it performs its sole function extremely well. Web developers with any level of expertise will be able to code more quickly and simply with this great program.

CSSEdit’s strongest features include Live Preview, which without saving or uploading, lets you preview any changes you make to your stylesheets in real time, and Milestones, which saves your work continuously so that you can tweak away to your heart’s content without the fear of screwing things up!

3. TextMate ($48.75)

TextMate, the self-styled “Missing editor for Mac OS X”, is a text editor inspired by Apple’s approach to operating systems. Lightweight and easy to use, TextMate offers programmers, developers and designers the ability to search and replace in a project, select and type in columns, use tabs when working with multiple projects, and bookmark visually to quickly jump between places in a file. It supports over 50 languages and comes complete with simple project management apps too!

File & Data Transfer

4. Transmit 3 ($29.95, $17.95 to upgrade from Transmit 2)

Transmit is quite possibly the simplest GUI FTP client to use. Mac users will instantly feel at home with its Finder-like interface. New features in Transmit 3 include column view browsing (Mac OS X style), a sidebar for the most frequently visited locations and tabs for multiple transfer sessions in one window. Transmit 3 can also be used as a Dashboard widget, and its Dock logo shows the status of your transfers at a glance.

5. Dropbox (free basic package)

Dropbox makes it easy for you to store and transfer files across any number of computers and/or smartphones. Once downloaded, a Dropbox folder is added to your desktop. Drag any file into the folder and it will ‘magically’ appear in the Dropbox folder on each one of your machines. What’s more, each file is automatically saved to another folder on the Dropbox website, which is accessible from any computer in the world. No longer will you have to continuously email yourself or transfer files between computers with a USB stick.

6. Meerkat ($19.95)

SSH tunneling is a way of shunting data securely across the internet on behalf of other programs. It’s often used to bypass firewalls and provide secure communication to programs with poor encryption capabilities. It sounds complicated, doesn’t it? Well, in fact, it is very complicated, which is why Meerkat, an SSH tunnel manager designed especially for Mac users, is so incredibly useful. With Meerkat, you’ll be SSH tunnelling in no time.

Collaboration

7. Basecamp (from $24 per month)

Basecamp is the world’s leading project collaboration tool, endorsed by National Geographic, Warner Brothers and thousands of very satisfied web developers and designers. Basecamp’s uncluttered, customisable interface encourages seamless collaboration between team members.

Write to-do lists, assign tasks to specific team members, store and share files effectively, write on your team’s messageboard, create milestones to keep track of what’s been done and by who, track time spent by team members on different tasks, and get an all-encompassing project overview.

8. GitHub (free basic package)

GitHub is another collaboration tool with glowing endorsements from giants of the business and web world, such as EMI and Yahoo! Unlike Basecamp, GitHub is specifically designed for collaborative coding, allowing you to fork and merge code, send pull requests and monitor web development at the touch of a button. It’s designed to function like a social networking site, with each user assigned a profile which tracks progress and participation. Follow specific developers to keep tabs on their activity.

Database Management

9. Querious ($25)

Querious is a great MySQL database management application, perfect for web developers looking for an alternative to the rather dated and fussy front-end of MySQL. Importantly, Querious lets you manage how your data is structured (through the Columns tab) as well as the data itself (through the Contents tab). With Querious, you can view, search, edit, import, export and structure your data easily and effectively. Furthermore, it operates in an intuitive way that all Mac users will be completely comfortable with.

10. Sequel Pro (free)

Sequel Pro is another MySQL database management application, but unlike Querious, it’s completely free. Again, unlike Querious, which will only connect to MySQL 5 servers, Sequel Pro connects to both MySQL 4 and MySQL 3. Sequel Pro performs the same basic functions as Querious, albeit in a less polished and less stylish manner. However, Querious easily outperforms Sequel Pro when it comes to running queries, offering both syntax highlighting and code completion, which make a huge difference.

If you don’t mind spending $25 (which really isn’t that much to ask), I’d recommend Querious over Sequel Pro every time, unless you need to connect to MySQL 4 or MySQL 3, in which case you don’t really have a choice.

Image Editing

11. Photoshop ($699)

Perhaps it goes without saying that Adobe Photoshop is the finest piece of image editing software on the market, used to some extent by almost everyone involved in web development and design. There’s no point in listing its features; they’re far too numerous to mention. All there is to say is that it’s very expensive, but unsurpassed in its field as yet. If it’s too expensive for you or you don’t need as much power, there are plenty of alternatives on the market to look into.

12. Layers ($24.95)

Layers is a unique screen capture application which lets you take multilayered screen and webshots. When taking a screenshot, which can be done simply by pressing “Alt Shift S”, each different element on the screen, including application windows, desktop icons, the Dock, menu bar, cursor and even menu bar icons, are saved as different layers in a PSD file. When opened in Photoshop, you can simply uncheck a layer to remove an element from the image, or select a layer to move the element around.

Layers works in much the same way when it comes to webshots. A shot of the full web page is captured, even if some elements are off the screen, and everything, including video frames and Flash, is included in the layers.

Miscellaneous

13. Charles Proxy ($50)

Charles Proxy is a web proxy which runs on your own computer. It records all data that’s exchanged between your web browser and the server when you access the internet, displaying this information in plain text for your consumption. With this invaluable information at your fingertips, you can quickly diagnose and rectify any problems you may be experiencing with your websites. Besides proxying, it also provides bandwidth throttling, which allows you to experience websites as a modem user.

14. Changes ($49.99)

Changes is a file and folder comparison tool which aims to unclutter your digital life by allowing greater folder comparison and merging. With Changes, you can easily sync folders, getting rid of .DS_Store files, .svn directories and other rubbish which accumulates over time, keeping up-to-date and organised in the process. You can even compare text files for code and prose, collapsing text and editing as you go.

15. xScope ($26.95)

xScope brings together seven great tools for measuring, aligning and inspecting on-screen graphics and layouts. These tools include: Dimensions, which gives you the dimensions of anything on-screen; Rulers, which measures pixels on-screen; Screens, which displays the usable screen content area for any screen size; and Loupe, which magnifies anything under your mouse. These tools, accessible via the Mac OS X menu bar, float above desktop windows, saving you valuable screen space.

16. FreshBooks (free basic package)

FreshBooks is a great app for tracking time and money. It gives you an instant overview of how you and other members of your team are utilising time, letting you update your timesheets from your smartphone if you wish. It lets you track your expenses and send and manage professional-looking invoices. Never again will you fret over a lost invoice, as each one is saved and stored exactly where you’d expect to find it.

17. Harvest (from $12 per month)

A similar application to FreshBooks, Harvest is a great app for keeping tabs on time and money, with packages designed for freelancers and individuals, small businesses and teams, and larger companies. Harvest presents information in a highly visual manner, giving you a snapshot of time spent on projects, expenses accrued and invoices created.

Like FreshBooks, Harvest is a web app, which means that nothing has to be downloaded and that all your information is accessible from any computer in the world (provided it’s connected to the internet, of course).

Add to this list

If you have any other applications web or not that you use daily as a designer / developer please leave it in the comments section.

Written by Andy Boyd

Andy is a full time writer and designer from the UK who works with a leading provider of printing accessories. If you would like to read more of his creative writing on art, design and technology, head over to CreativeCloud.

Enjoy this post? Subscribe by RSS or Email

Apple Stuff

  • Matt Langtree

    Hi Andy,

    Nice review, you mentioned a few products that I haven’t seen before, thanks!

    I’m curious what version of Sequel Pro you are using. The screenshot suggests 0.9.7 but you mentioned missing features like syntax highlighting and code completion that have been in Sequel Pro for a few of the recent releases.

    Best,
    Matt Langtree

  • Gustavo

    Check out SSHTunnel – it’s free and, for me, works a lot better than meerkat (I tried it as well).
    http://www.apple.com/downloads/macosx/networking_security/sshtunnel.html

  • Ryan V

    I use, or have used these items you mentioned:
    Coda
    Espresso
    Textmate
    Sequel Pro
    Charles

    Charles is especially awesome when you’re working between PHP and Flash using AMF. Since it completely understands AMF, it’s easy to see the whole process results. It also decodes XMLRPC calls, JSON, and others.

    Sequel Pro is also absolutely vital to my day-to-day.

    Coda and Espresso are OK for basic editing, but for any advanced PHP projects, the PHP capabilities just aren’t good enough. There’s no code crawling for autocompletion, and things like that…

  • http://www.threestyles.com Shane Jeffers

    @Ryan

    What do you recommend for advanced PHP projects?

  • Ryan V

    I go back and forth on that question all the time. Currently I’m using Netbeans and Komodo PHP editors depending on the project. I’ve used Eclipse PDT and Zend Studio 6 & 7 a lot, but they’re a little on the heavy/slow side.

    One of the projects I’m on has 35MB of php source code, so a good, solid editor with good code crawling and auto-complete functionality is absolutely needed. I also use the Zend Framework for a lot of projects, and the same goes for that. There’s just too much code there to not be able to have it suggest something out of a specified include path or from a project crawl.

  • http://alexmcvitie.com Alex Mcvitie

    Great article just bought a new 27″ imac so this will come in very handy!
    .-= Alex Mcvitie´s last undefined ..If you register your site for free at =-.

  • http://www.JohnLamont.com John Lamont

    Great list, i’d add Little Snitch which allows you to control which apps get access to the net.

  • http://woeye.net Lars Hoss

    Thanks for the list. Though I already knew most tools some of them I’ve actually never heard of. Especially Meerkat sounds interesting because I was looking for such a tool only a few days ago! If only the database tools weren’t limited to MySQL (I am a PostgreSQL user).
    .-= Lars Hoss´s last blog ..Multiple submit buttons but no JavaScript =-.

  • http://azizlight.tumblr.com/ Aziz Light

    Thanks for the list. I have a question though, what does Querious have that SequelPro doesn’t (besides the price tag)?
    .-= Aziz Light´s last blog ..The Yii PHP framework =-.

  • http://www.motorstop.asia toyota

    Coda is the absolute must have for coders using mac. I really wish they’ve a version for windows too

  • Daniel

    I have used basecamp before and loved it but have recently found 5pm and must say I like it a lot. Check out 5pm and Coda is the greatest thing…ever!

  • Pingback: 17 Essential Apps for Web Developers & Designers on Mac OS X | Design Newz

  • http://twitter.com/kqatran Kenny Tran

    Should check out Swatch, it’s a menu bar app that let’s you get any color on your screen and store’s them for later use. http://fuelcollective.com/swatch

    Also check out LittleSnapper, let’s you capture screenshots and organise them in a library. http://www.realmacsoftware.com/littlesnapper/
    .-= Kenny Tran´s last blog ..KQATran: 10 Irresistible Gmail Features You Should Know – http://bit.ly/95Khs9 =-.

  • http://tutorijali.hdonweb.com/ Tutorijali HDonWEB

    Great post :-)
    .-= Tutorijali HDonWEB´s last blog ..TwitteRSS način praćenja RSSa =-.

  • http://www.myintervals.com John

    Definitely take a look at Intervals, an online project, task and time tracking app. It’s similar to Basecamp except that it does more for the same price or less. In addition, Intervals was built by and for web designers and developers.

  • Chris

    Another great image editor is Pixelmator. It’s $59 and does pretty much what Photoshop does.

    http://www.pixelmator.com

  • http://twitter.com/Shoshana_v Hanh Tamulis

    Thanks for sharing, see you then. I should just give up and take lessons from you

  • http://avangelistdesign.wordpress.com Avangelist

    What about Dreamweaver? Seems silly to list Photoshop accepting that it is the industry standard and then leave out what remains to be one of the best, if not the best code editors around?

    I am kinda surprised to not see BBEdit on the list, I confess to never using it myself, but it always seems to be around.

    I think it is also worth mentioning MAMP for your development environment.

    And of course FIrebug for mozilla firefox.
    .-= Avangelist´s last blog ..HTC Talk about designing for users =-.

  • Pingback: 17 Essential Apps for Web Developers & Designers on Mac OS X | Crafted Copy

  • http://www.denbagus.net denbagus

    nice collection .. thank you
    .-= denbagus´s last blog ..Winners of ActiveCampaign Email Marketing Sofware =-.

  • http://www.coleman-creative.com Tom Coleman

    Interarchy looks like the finder and plays nice with BBEdit:

    http://nolobe.com/interarchy/

    http://www.barebones.com/products/bbedit/index.html
    .-= Tom Coleman´s last blog ..Test Your Awareness =-.

  • http://www.orologic.com/ Vincent

    Never heard of CSS Edit before. Will try it soon for sure!

  • http://www.basekit.com/ Alex W

    Great list – thanks for posting!

  • http://www.pmhut.com PM Hut

    Basecamp is not only a project collaboration tool, it’s also a project management tool. There are also many Basecamp alternatives that can be used by Mac users (for project management).

  • http://www.fortystones.com prashish

    nice collection.. but most of them are NOT FREE :\

  • Daniel

    I found some more good apps, see macpuddle.com/loadup/

  • http://webmarketingireland.com Salvatore McDonagh

    What about GIMP? this has to be one of the best image editors avialable, and it is free, open source, cross platform (Mac, Windows, Linux versions are all identical) and developers can create python scripts to automate common tasks, apply the same effects on multiple files, etc. GIMP will also read and write almost any image file type – so it is easy to migrate to GIMP from any other image editing/manipulation package, including the expensive licensed versions which keep you on the paid upgrade treadmill…

  • http://lowepromotions.com/apparel Matt Lowe

    This is a great list, but as someone else mentioned, I’d like to see a list of free alternatives. I don’t mind buying software that I need…It’s just that there is so many applications that I need to conduct business.

    Thanks,

    -Matt

  • http://www.steammopreviews.org.uk John Kiu

    Thank you for the list!

    One web dev application missing off this list is Diagrammix is a Mac App for creating diagrams with assorted art elements and connectors. Good for user UI layouts.

  • http://www.replicon.com/time-clock Employee Time Clock

    How about Replicon employee time tracking software app?

  • Katrina Dan

    Also Talygen (talygen.com) is great for tracking time.

  • http://www.facebook.com/profile.php?id=900820332 Michael Perry Goodman

    I highly HIGHLY recommend LiveReload which can be had in the Apple App Store for a mere $10 and it’s one of the most useful tools for development I’ve ever used. Aside from compiling LESS, SASS, and other preprocessors Every Time You Save, it also reloads a target browser tab. Super useful.

  • http://www.facebook.com/pages/Time-management-Community/554894041201119 Vincent Churchil

    How about Replicon’s time and expense management software? I believe, this is something that every developer needs to have.

  • Rodriges Antonio

    I found some more better then Sequel Pro tool – Valentina Studio, it works as with mySQL, so with postgreSQL and SQLite. And yes, it is also FREE http://www.valentina-db.com/en/valentina-studio-overview