Web technologies are evolving at a massive pace. Since I started (dabbling) with web design, I’ve adopted a number of tools that have either made my workflow faster or made my websites better. Here are five web design tools I can’t live without.
Sublime Text 2
Sublime Text 2 is a front-enders dream. Lighter than Textmate and as feature-rich as Espresso 2 or Coda, this text editor has quickly become a favourite for many prominent community members such as Chris Coyier and Jeffrey Way. If you’re a Textmate advocate and can’t imagine parting with your useful bundles, ST2 has that covered: you can use any Textmate bundle with Sublime Text 2. It’s got great language support if you’re into that type of thing, and the hardcore Vim and command line commandos out there will like how much you can do from your keyboard (hint: everything). For some cool plugins and tips, check out Jeffrey Way’s ST2 article on NetTuts.
I’ve tried (and liked) some of the other OSX heavyweights such as Espresso 2 and Coda 2, but I always seem to go back to Sublime Text 2. The flexibility, the multi-selection, then lightweight and speedy interface and the vast array of packages (aka plugins) make this one a winner. It’s totally free to try for an unlimited period of time and the registered version costs $59. Don’t miss this one!
The strength of CodeKit isn’t that it compiles several different languages – it compiles Stylus and CoffeeScript as well – but that it has so many useful developer features in one place. It allows you to easily make any Sass project a Compass project, which is a must-have framework for anyone wanting to easily incorporate CSS3 into their next web project. It also contains BlessCSS support, JSLint and JSHint.
ImageOptim is as simple as it gets: Drag-and-drop a file (or a whole image folder) and watch it shrink file sizes before your eyes, without sacrificing any quality. Even the highly-lauded Adobe Fireworks doesn’t save images as optimized as they can be; ImageOptim removes everything except the image itself, leaving you (and your users) with the lightest, quickest-downloading files possible. Combine this with sprites and icon fonts to be an optimization superstar!
MAMP stands for ‘Macintosh Apache MySQL & PHP’. Basically, it’s creates a web server environment on your desktop computer. Massively popular CMS’s such as WordPress and Drupal need these components to run, and you as a web designer need a local environment to design and test in. MAMP scratches that itch, and allows you to experiment and design to your heart’s content without having to worry about the rest of the world seeing your iterations. While creating a similar environment without MAMP is possible, ask yourself which you would rather do: spend a lot of time setting up PHP, Apache, and MySQL separately using less-than-friendly techniques that involve modifying Apache files and tinkering around in the Command Line, or use a (relatively) easy-to-use program with a nice GUI that does all of that heavy lifting for you? Pretty easy answer for most people.
MAMP is free, and MAMP Pro costs around $50. MAMP Pro is a lot more customizable and has some more advanced features, but I’d recommend trying out the free MAMP first and seeing if it suits your needs. It can be a little frustrating for first-timers to set up out of the box, but there are a lot of great tutorials to help you out (like this one).
Everyone working on the web needs an FTP program. While you can get pretty fancy with Git deployments and that type of thing, sometimes you just need to get on the server and get stuff done. Panic’s Transmit is definitely the cream of the crop for Mac FTP clients. It combines a beautiful user interface with a feature-rich application to make both a beautiful and powerful app. It’s a good deal at $34, so if you can afford it, buy it. It’ll pay for itself in no time!
So, there you have it: A quick roundup of 5 apps that I use every day. Each one has made my life on the web that much easier, and I love them all! I purposely left the Adobe CS6 programs off of the list because this was supposed to be informative, and everyone already knows the CS programs and their pros and cons. If you’re wondering whether I use Photoshop or Fireworks, I use both.