" />

My Thoughts on Coda 2 and Good Design


For the longest time, I’ve had an interest in web development and design. For almost as long, I’ve used Espresso from MacRabbit, which I love. It’s lightweight enough to feel snappy, but powerful enough to offer code-highlighting, previews, lots of web language support, and support for extensions called Sugars. It’s a great app.

Screen Shot 2012-05-28 at 3.17.04 AM.png

MacRabbit’s biggest indie competition comes from Panic Inc, another company that I admire. They make great Mac (and just recently, iOS) apps, and have done so for years. Coda is Panic’s take on web development tools. I’ve always thought it looked interesting, if not good, but the original version of Coda never quite felt right to me. That’s not to say I didn’t respect it as a great tool though.

Just the other day, I heard news that Panic was set to launch a new version of Coda, and a new standalone/companion app for iOS called Diet Coda. My interest was piqued, and before I knew it, I had purchased both.

Both MacRabbit’s Espresso and Panic’s Coda are comparable in features, at least, in regards to the features that I use, though professionals may disagree. The biggest difference between the two apps is their implementation of those features. Espresso is clean, and the main window is mainly devoted to code editing. Coda on the other hand, has everything at hand*, which to some, might be a cluttered experience.

Screen Shot 2012-05-28 at 4.30.00 AM.png

Having everything in one window isn’t necessarily a bad thing when it is as well designed as Coda is. Starting in Coda 2, the tabs of all open documents, are visual tiles with live representations of what that file contains. These tabs can live at different sizes ranging from text-only, to large icons. Having tabs with live tiles of the documents you are working on, very easily clears up the file confusion when working on a large project.


Under the tabs is a breadcrumb trail leading you to the file that you are currently working on. This is particularly useful, considering that you can see all of the files that live side-by-side of the file you are working on, anywhere in the file hierarchy, via this new breadcrumb trail.


The new sidebar is dynamic and works well at keeping the number of on-screen items to a minimum. The bar is customizable, and when you click on an item, the area underneath changes to accommodate. So, for instance, if you click on the files, icon, you can now view the file system of your local machine or server you are working on. You can also customize the bar to show your most-used tools.

Screen Shot 2012-05-28 at 4.57.04 AM.png

In short, it seems that all the functionality of Coda 1 has been re-jiggered into a more comfortable workflow. Everything in the app is easily accessible, and within five minutes of launching the app for the first time, you feel right at home. When using Espresso, there is a little more work involved when wandering around the app.

Diet Coda, the new iOS version of Coda for the iPad is Panic’s second venture into iOS waters, and, boy, have they knocked it out of the park. Diet Coda, which has a terrific name, has a razor sharp focus-editing. Although I’m sure you could create an entire site with Diet Coda, that is clearly not its focus. Instead, it is a tool to login to the server that your website lives on, make a quick change or two, and then go about your business.

Even though their is a different focus with Diet Coda, it certainly feels like the brother of Coda 2. That is, Coda 2 feels very much at home on the Mac, and Diet Coda feels very much at home on iOS. Diet Coda uses the same metaphor for file navigation as Coda 2, while also working with the constraints of the device and OS it is running on. This is design at its best.


For instance, Diet Coda has the same breadcrumb navigation along the top of the window, tying the UI to the Coda 2 on the Mac. However, one tool that could only, and would only, need to exist on iOS, is what Panic calls the “Super Loupe”, which is Panic’s (better) version of the selection loupe we are all familiar with in iOS. Selecting text is a breeze with the Super Loupe.

Super Loupe.PNG

Plus, Coda 2 has a feature called AirPreview, which allows you to view your websites you are woking on in realtime on the iPad with Diet Coda. This is very cool, and is one of those things you didn’t know you wanted until you’ve used with it. It’s a great feature, and makes Diet Coda worth its cost alone.

I really don’t mean to gush over the new Codas just as everyone else currently is, but this is truly good software. Coda 2 is one of those apps that is aimed at everyone. Amateurs and professionals alike should feel right at home. This is something that applications such as Adobe’s Dreamweaver cannot claim.

So which do I prefer, Espresso or Coda? My answer: Both. They are both fantastic applications made by great companies. The biggest difference comes in the form of implementation of features. Both do a good job of keeping everything contained in a single window, but I would say Coda 2 does the better job of the two. So, for now, I will be using Coda 2. That might change as the newness wears off and I begin to miss Espresso, or something better might come along, or I might decide Coda 2 fits my workflow best. Who knows.

Espresso seems to have a focus of getting everything out of the way and focusing on code and code editing, while Coda 2 seems to stress the convenience of having everything you need at hand to create code. Both are well designed, and both are world-class. They are just different embodiments of the same idea, and are both worth a try to see which you prefer.

I won’t say that great design such as this can’t exist on other platforms, so much as it doesn’t. For reasons that still aren’t completely apparent to me, Apple’s platforms have always nurtured good design. Maybe it’s because Apple itself has always emphasized good design? I’m not sure, but we can’t deny that this is the way things have solidified in the personal computer industry.

With that in place, companies such as MacRabbit, Panic Inc, and others have taken it upon themselves to continue that tradition of good design, and perhaps even improve upon existing designs. I think this is the nut of what we should take away from the release of Coda 2 and Diet Coda: great design is of the upmost importance and can change the way we work, create, and even play.**

*Although Panic would shriek at this statement, it feels a little more Dreamweaver-y than Espresso, insofar as everything is visually represented when compared to Espresso’s minimalism and reliance of menubar commands.

**Design is not just how something looks, but how it works as well. If design is properly executed, form and function should be indistinguishable from one another.

Coda+Diet Coda icon image courtesy of Panic Inc.

Continue reading:

TAGS: , ,