I have been asked many times what are the best tools (programs) to use when designing and developing websites, or what do you use when you develop a site. For me it all starts with the most simplest of tools…pencil and paper. What you say? This clown uses a pencil and paper to design websites? I find that by drawing out ideas first helps me to find a direction for the design. This approach really isn’t any different than how an author approaches writing a novel or a sculptor creates a masterpiece out of bronze or marble. Only after I have a good idea of where I want to go with the design do I sit down in front of my computer (Mac of course!) and get busy with Photoshop.

Tool Number One: Photoshop CS3

Photoshop is my favorite tool for getting my design from paper to pixel. It is by far the best imaging/paint software around. Yes, I know about Fireworks and PaintShopPro. Quite frankly, I’m more comfortable with Photoshop, and it’s set of amazing tools. There are many resources available for people that are new to using Photoshop. I understand that it can be intimidating at first, but if you start small you can hone your skills and become a Photoshop master (eventually). Check out Pixel2Life for great Photoshop tutorials that range from begginer to expert levels of difficulty.

Tool Number Two: Coda (Mac)

I just recently discovered CODA and all it can do. For the longest time I used Dreamweaver to do all of my coding work, but after finding CODA I dropped Dreamweaver like a bad habit. CODA is a Mac web development tool that has everything you could need for managing one site or multiple sites.CODA is divided into six sections: Sites, Editor, Preview, CSS, Terminal and Books.The “Sites” section allows you to setup the directory of your website files and establish connections to the server where they are hosted. The cool thing about “Sites” is that you have a cool graphic showing you what your index page looks like. All you do is double click the page and it connects to your server. Edit or Create your pages and click publish and your new content is updated locally and remotely.The “Editor” is very similar to most web development text editors that color the tags according to what type of element they are. The “Preview” tab is just that a preview of what your site will look like (in Safari). CODA does allow you to open a second area below the coding window to preview your changes on the fly. The “CSS” tab gives you more of a WYSIWYG approach to style sheets. Personally, I haven’t found much use for it yet, as Tool Number Two is my choice for editing CSS. The “Terminal” is a great addition to CODA. It gives you the ability to open terminal services (ie. Telnet, SSH) into your server to perform tasks such as building a MySQL database and queries. I didn’t think that I would use it as much as I have, because the Mac OS already has a terminal program. This one is a click away and easy to get to, and I can store my connection information right inside the site configuration. The “Books” tab section has e-book versions of the Web Programmer’s Desk Reference to HTML, CSS, Javascript and PHP. All of these great tools in one program and at a reasonable price (just $79 USD). That’s a lot of BANG for your buck!

Tool Number Three: CSSEdit (Mac)

CSSEdit from macrabbit.com is by far my most favorite tool for developing sites. The editor allows you to take the hand-coding approach or you can use the WYSIWYG approach to styling your site. The program window has three sections to make styling your site easier.The “styles” section shows all of the selectors within the css file and shows a preview of what they look like. The mid-section is where the beautiful CSS code lives. The right side of the window has the WYSIWYG portion of the program. CSSEdit also has a cool feature that allows you to save milestones in case something breaks; you can revert back to a milestone when the style sheet was working properly. There is also a full preview window that you can open an HTML file to see the styles in action. The preview window also has a feature dubbed “x-ray” that allows you to click on a section of the HTML page and see what styles are applied to that piece of code. Last but not least is a full fledged CSS Validator to ensure that your code is valid and doesn’t include any coding errors. CSSEdit is available for purchase online for $29.95 and in my opinion is a steal!These are the three major tools I use when developing websites. The other tool that I use is extremely important with all of it’s uber-cool addons. I will talk more about that in part two of “My Web Development Tools”.

~ GrandmasterB