Tool Number Four: Firefox 2

I LOVE FIREFOX! There, now that that’s out of the way I can concentrate on giving you details as to why I use Firefox to develop sites. I use Firefox for two main reasons. I code every site and test as I go with Firefox. The main reason is that the fine folks at Microsoft have discontinued Internet Explorer for Mac; which quite honestly is fine with me. I do have a standby Windows machine dedicated to testing once I am sure everything looks fine in Firefox. The other reason I prefer to do all of my work with Firefox is the great add-ons that you can download from the mozilla site. That’s the beauty of using an open source browser; the community of developers come up with some of the coolest add-ons to make your internet experience more enjoyable.My favorite add-on for Firefox is the Web Developer Toolbar by Chris Pederick.
This toolbar is un-freakin-believable! I found the toolbar perfect for creating my WordPress theme…or modifying the theme. I started using the Web Developer Toolbar when I designed my first Joomla! template. The ‘information’ menu allows you to display class and id details for an entire page. An invaluable tool for locating the classes that control the layout and look of the template. Another cool feature allows you to display the CSS used on the site…even if it’s a linked stylesheet.The other tools that I use are fairly straightforward and are installed more for convenience than ‘need’. ColorZilla is a great add-on that gives you a color picker when activated to get the RGB or HEX value of a color within the browser window. FireFTP is an add-on FTP client to upload and download files on your web server. I don’t use FireFTP as much as I used to, now that I use CODA. If you’re looking for a good FTP client, and don’t want to fork over money for it…FireFTP is a good option.

Tool Number Five: MAMP

MAMP (Macintosh, Apache, MySQL, PHP) is a program that creates a local server environment on your Mac. There is a windows equivelant called WAMP; which does basically the same thing as MAMP, but in a Windows environment. The reason I use MAMP is it allows me to setup a local version of a site (ie. my WordPress Theme) and do all of the testing locally. This saves a great deal of time, because I don’t have to make a change, upload the file, refresh the browser…and repeat if necessary. Since it installs PHP and MySQL within the application directory it’s a perfect fit for developers that desing Joomla! templates, WordPress themes and other CMS customization. Both MAMP and WAMP are free to download and we all know that free = good!

Well, there you have it. That’s my list of web development tools that I use and recommend to anyone that is either starting out in web design or is an established designer. If you have any comments or questions involving this list or anything else related to web design; please let me know. Also, if you have software that you would recommend please add a comment and let me know about it.

~ GrandmasterB

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