Small design firms like ours have a lot to juggle: we manage clients, sales, proposals, phone calls, billing, marketing, writing, and — when we have a free moment — the actual pixel-pushing that gets us paid! And when it comes to one’s development workflow, it pays to standardize on a handful of devices and technologies rather than try to be all things to all people. For example, in our office we’re an all-Apple shop, which means that we seldom have any hardware or uthftware compatibility issues.

For the actual web stuff, though, it took us longer to settle in. A year ago we had some clients running on Textpattern, some on WordPress, others on now-defunct platforms and still others on systems we’d custom-built. In some cases we inherited sites and had to learn the particular coding and style and conventions of other design shops and development teams… All of which, as you can imagine, resulted in a terrific amount of unnecessary additional overhead that would eat into our margins. It’s challenging enough to learn a bunch of different systems at the outset of a project, let alone six months down the road when I have to remember again how we pulled it off! Starting from scratch each time is definitely no picnic.

So What’s the Solution?

Glad you asked. Over time I gradually began standardizing our development efforts, sometimes intentionally, sometimes unconsciously. Here’s an outline of the technologies, frameworks and apps that I use for our client work:

Web Technologies

1. ExpressionEngine (CMS)

I don’t remember exactly when or how we first encountered it, but working with ExpressionEngine was love at first {exp:weblog} tag. There are serious advantages it has over other offerings in the market: it’s infinitely flexible, inexpensive, maintained by some of the best and brightest minds on the web, boasts a rich climate of 3rd-party extensions and comes with support in the super-active user fora. You can make EE do whatever you want, from the simplest single weblog to the most complex magazine-style site with multiple weblogs and content groups. We use it to power any client’s site that requires a content management system. Love it, love it, love it…no need for any others.

Version 2.0 is supposed to be released soon and I’m especially excited about it. Mum’s the word at EllisLab, so we don’t know many details — they’re supposed to be announcing the preview at this year’s South by Southwest festival in Austin. What’ll it be like? We can only guess (but let’s hope they revamp the member module).

If you’re new to ExpressionEngine, start here:

• Sean Sperte’s Introduction to ExpressionEngine – page removed.
• Veerle Pieters’s ExpressionEngine Articles
• Boyink’s ExpressionEngine Tutorials
• And of course, the EllisLab Docs

2. CodeIgniter (Server-Side)

CodeIgniter is a free, open-source set of PHP libraries that were spun off from the work on ExpressionEngine in the same way that the free, open-source Rails emerged from the work on Basecamp. It’s one of a number of PHP frameworks available lately that takes a lot of the pain out of developing a PHP website: like Rails, it favors convention over configuration and comes with a lot of built-in functionality. Also like Rails, it promotes good coding practices by encouraging proper MVC separation.

Because CodeIgniter ships with many of the same kinds of scripts that are common to any app, it lets you focus on the 20% that’s unique to your project and not worry about the 80% that’s identical to every other dynamic site (database queries, input validation, XSS filtering, etc). As a result we can provide the same level of high-quality work in a fraction of the time it would take to write it all from scratch. We win and our clients win!

CodeIgniter, while easy to learn and use, is not a full-featured framework: by its own homepage’s admission it’s intended to be a lightweight starting point for development. But I like it a great deal and, had I not started coding in it first, would have had a much harder time getting my mind around the basics of Rails architecture. It’s not an exact analogy, but Rails is to Ruby what CodeIgniter is to PHP.

Best place to start if you want to learn CodeIgniter would be the video tutorials, followed by the user guide. The docs are terrific and the forum users are especially helpful and considerate of newbies.

3. jQuery (Client-Side)

A jQuery user said it best on the homepage:

You start with 10 lines of jQuery that would have been 20 lines of tedious DOM JavaScript. By the time you are done it’s down to two or three lines and it couldn’t get any shorter unless it read your mind.

jQuery makes writing Javascript fun again. It, like CodeIgniter, takes away much of the tedium involved in producing rich user interfaces, especially across browsers. And, also like CodeIgniter, it’s one of many recent similar frameworks.

jQuery is so simple to use it practically writes itself. Here’s a short example of a script I use on our company site (in fact, all of the animations you see here are powered by jQuery):

1. $(function(){
2. $(“a[rel~=’external’]”).click(function(){
3. window.open($(this).attr(‘href’));
4. });
5. });

jQuery finds any links in the page that have the attributerel="external" and then opens them in a new window; it’s totally unobtrusive and degrades gracefully. You can grab anything you want on the page and do anything you want with it — hide and show items, remove them, insert new HTML, get and post AJAX calls — all in a tenth of the lines of code you’d need with classic DOM scripting. It’s marvelous.

Admittedly, the documentation needs a lot of work and the overall jQuery brand is nowhere near as polished as, say, mootools or Prototype, but having tried out all three I find jQuery to be far superior. To learn more about jQuery, you can check out the tutorials on its homepage, but I recommend these resources in particular:

• Simplify AJAX Development with jQuery
• Learning jQuery
• Official jQuery Message Board
• Digital Web’s jQuery Crash Course

According to its creator, you’ll find jQuery is used by Drupal, WordPress, Digg, Google and the BBC.

4. Project Management: Basecampfire

Many moons ago, when 37Signals was still only a successful web design firm, they decided to write their own project management software because they weren’t happy with the options available. And after releasing it to the world, they’re now a successful web software company! Their first product, Basecamp, has become the industry-standard. David Heinemeier Hansson wrote it in Ruby and the libraries he developed for that purpose later became Rails, which were used in turn to develop their other web properties, like Campfire. We use Basecamp for everything: keeping track of client emails, timelines and calendars, to-do lists, files and assets — I can’t imagine our business without it. It actually reflects well on us in our clients’ eyes that we’re using such a slick, polished product, even though we didn’t create it.

Chris and I work remotely several times a week, so Campfire has become really handy when we need to collaborate from a distance. (Though just as often, we’ll use it even when we’re all in the office.) And since we’re running Leopard, that means we can take advantage of some of the cool software available only for that platform…

Desktop Applications

1. Coda*

Panic released Coda last year to (well-deserved) rave reviews. It’s my full-time code editor of choice, replacing the aging, bloated dinosaur that is Adobe’s Dreamweaver. It’s funny, but it never occurred to me before how much of a hassle it is to switch between 5 apps at a time when building a website… using Coda makes you think, Why hasn’t it always been so easy and intuitive? Keeping all our sites organized is a breeze and the built-in mini-Turbo Transmit is lovely, though probably the best feature is remote collaboration: Chris and I can be working on the same file at the same time, which just blows my mind.

As much as I like it, it still feels like a 1.0 release. The syntax highlighting barely works, code completion can be patchy, there’s no global find and replace and the documentation (“Books”) feature is really pretty useless (and only available with an internet connection, which is goofy). Crossing my fingers for a kick-ass version 2.

* Chris prefers TextMate, though he also uses Coda frequently. I haven’t used TextMate that much but apparently there are some features it has that make it a better text editor… but I’ll let him explain that. (I should point out, though, that one of the EllisLab admins posted a handy tip for working with ExpressionEngine in Coda that doesn’t work in TextMate: Live Preview with Coda.)

2. Transmit

Best FTP software, on any platform, case closed. It’s worth every penny of its $30 price tag… Did I mention that it’s gorgeously designed, too? That Cabel is a pixel god.

3. CocoaMySQL

No updates for more than a year and being someone’s open-source side project do not usually make for great software, butCocoaMySQL is still the best tool I know for managing MySQL databases. Nearly all of our web projects involve some kind of dynamic data input and retrieval — ecommerce and content management fit the bill, definitely. And what better way to work with data than an OS X-like interface? Sure, phpMyAdmin may have more features, but I can only work with it for so long before the ugly starts to make my head spin. CocoaMySQL works not only for remote databases but local ones, as well (you’ll need to set the ‘socket’ field correctly, though: see here).

4. MAMP

If you’re going to develop web sites, you’re going to need a web server. MAMP provides everything you need to develop web sites locally: one-click install and you’ve got your web server and database configured and ready to go. It’s true OS X has shipped with Apache and PHP installed for some time, but the versions often lagged behind the official updates and you’d have to install MySQL anyway. MAMP does all that for you.

Combined with a little clever virtual hosting, I can run each client’s site from its own local domain. For example, I’ve got our company’s site running at http://onwired.dev, where I can make edits and test them before publishing live.

5. Firefoxbug

My dependence on the Firefox extension Firebug has become so complete I can’t even remember building websites before it. How else can you track down that stray CSS rule that’s made your layout go all wonky? Firebug not only provides live DOM inspecting, but lets you edit the markup and CSS right there in your browser on the fly: no more back-and-forth between your text editor and browser. Not to mention running jQuery live at the command line, visualizing CSS metrics and network monitoring… Heaven help me, it’s perfect! Mr Hewitt, you deserve a Nobel.

Sure, Safari (my daily, preferred browser) has the web inspector, but you have to enable it via Terminal and as lovely as it is just doesn’t offer the same toolkit. It’s a terrific move in the right direction, though… I’d love to see the Webkit team port it over exactly.

Moving Ahead

Chris is a big Rails fan — he’s been working with it for some time and is continually telling me what a pleasure it is. I’ve only just begun to teach myself the basics (fortunately, Leopard ships with both Ruby and Rails installed out of the box) and I definitely dig Ruby’s syntax. After a while, PHP begins to feel really verbose… kind of like classicDOM scripting compared to jQuery: too many extra lines and punctuation.

For example, Ruby doesn’t require any terminal semi-colons. This doesn’t seem like much, but when you factor in all the braces and parentheses, it adds up and starts to clutter your code — Ruby’s definitely a cleaner, more elegant language. Unfortunately, Rails is a bit of a beast to host so for now it’s more suitable for hosted services (like Twitter, Shopify and Blinksale) than licensed / downloadable apps that you can install on your own server.

Until then, ExpressionEngine, CodeIgniter and jQuery remain our magical trio of web development technologies. If they got any better, I might be out of a job…