My Tools for Web

I've always enjoyed seeing what tools other designers and developers in my industry use to prepare, manage, design and build their works of art. After all, we can't all walk the same path - the world around us would be boring and uninspired. Below are a few tools I use to design, manage and develop for the web.

First off, I'm a Mac guy. I exclusively use Macs for design and development. The following tools are Mac and/or cross platform apps that help me design or develop for the web.

Web Development Tools

Coda 2 is Panic's web development tool with plenty of built in goodies. Packed with the useful tools such as built in Terminal, MySQL Editor, versioning support with SVN and Git, FTP and more. I made my transition from Dreamweaver to Coda rather smoothly. Coda 2 doesn't have your typical editable WYSIWYG, but I never really used the WYSIWYG in Dreamweaver, so the transition was fairly painless. I began looking for Dreamweaver replacements as FTP bottlenecks grew and the app became increasingly unreliable. Coda 2 was a success for me from day one aside from a lack of code formatting and tidy options. To get around this, I found a useful Coda 2 plugin called . I specifically use the CSS and HTML tidy functionality on a regular basis.

For CSS inspecting on an "iDevice", Safari's Develop menu is the only way to really inspect elements on the device. Simply plug in your iPhone or iPad and through the Develop menu, select your device name and you can inspect elements displayed on the iOS Safari app. If you have XCode installed, you can use the iOS Simulator to achieve the same thing. Launch iOS Simulator, launch Safari app and load the site you'd like to test. From the desktop Safari app, select Develop -> iOS Simulator and you can inspect elements from the simulator. Useful if you do not have that specific device to test on. I use this method to mainly test responsive layouts - although nothing beats actual device testing.

Right now, Google Chrome my browser of choice. I tend to jump between Safari and Chrome, but Chrome seems to be a bit more efficient and causes less spinning beachballs than Safari. With the introduction of Safari 7 with OS X Mavericks and it's improved memory usage, this may change. For now, Chrome is my browser of choice. Google Chrome's element inspection is specifically useful, especially the state toggles (active, focus, hover, visited) for certain elements.

Wireframing is an artform and Balsamiq makes this process quick and easy. When I am not using Adobe Illustrator for the more complex layouts, I use Balsamiq Mockups. The beauty comes in simulated links. You can link to other mockups and on PDF export, it will honor your links within the PDF to make a presentation-friendly PDF for the client.

Resource Management

1Password has lived up to all the hype surrounding this invaluable account management tool. I have heard good things for a while about 1Password as a password manager but never realized the value of it as a site management tool. The integration with Dropbox and my browsers make it a part of my daily workflow.

You can't control when and where inspiration strikes. Evernote makes it easy to file away a resource or piece of inspiration with either a browser extension or mobile app. Evernote's ability to be where you are makes it easy to reference that piece of otherwise forgotten inspiration.

Synching files among all of my devices enable me to access necessary assets needed for me to work from anywhere. This additional peace-of-mind enables me to focus on the task instead of locating my files.

Have an invaluable tool thats part of your daily workflow? I'd love to hear what you use when you design and develop for the web. Feel free to share your favorite tools in the comments below.