I’ve been working on websites for years now (since University days), and my toolkit has changed quite a bit since those early days of hand-crafted Notepad HTML.
These days I’m using a combination of free and paid-for tools and FireFox extensions that help me code, design and troubleshoot my web pages. Here’s the line-up:
Graphics & Design
Photoshop/Fireworks – I’ve long been a fan of using Fireworks for doing wireframes of my sites to establish the layout and rough typography. However, Fireworks (certainly the version I use) suffers from pretty poor font rendering. I’m increasingly using Photoshop to create attractive headers and work with graphics for my sites. Not only can I establish some nice graphic effects, but the web compression options are essential.
GIMP – Gets an honourable mention here, because most of what can be achieved in Photoshop can also be done in GIMP. Because it’s free, GIMP comes with a hideous user interface though, but there are some good tutorial sites out there to help you get the most out of GIMP.
HTML & Coding
Aptana Studio – This – shockingly – is a free piece of software that helps you write web pages. Aptana is quite like Dreamweaver in places, but has the ability to let you browse a live website and make edits to pages on the fly. It’s also highly extensible and can handle Ruby and all that new-fangled stuff.
Notepad++ – A useful piece of software for quick and dirty edits here and there. It’s not one for code autocompletion like Aptana, but it can be useful if you know what you’re doing. Plus, it displays ‘readme’ files correctly, unlike Notepad 90% of the time!
XAMPP – I use this to run a couple of development Drupal and WordPress installations. XAMPP gives you a fully functional Apache/PHP/MySQL framework running within Windows, and even PhpMyAdmin to maintain your databases if necessary.
One quick tip if you’re installing – if you use Skype, change the Apache port from 80 in httpd.conf to something else (I use port 89). This avoids a conflict with Skype.
There are a few add-ons for FireFox that can be a massive help when troubleshooting design issues. The heavyweight one (and recently ported to FireFox 3.0) is the Firebug extension. The quick and dirty CSSViewer is also amazingly useful for getting the properties of elements on the page, but tells you very little about CSS inheritance.
Firebug is an awesome HTML inspector – it can help you locate buggy parts of your page, will highlight them as you hover over the code, and will show you the inheritance of CSS style rules – often across multiple stylesheets.
CSSViewer – another tool that’s saved my bacon multiple times. CSSViewer isn’t quite as comprehensive as Firebug, but it can quickly show you the properties of an element just by hovering over it.
Now, you show me yours…
With the exception of Photoshop and Fireworks above, these tools are freely available and at least as good as commercial grade software. Aptana in particular has negated the need for me to continually upgrade my Dreamweaver version and my Photoshop is at least a few versions old now.
What tools are you all using for web development work – paid or free? Is there anything else I should be looking at?