My (Mostly Free) Web Design Toolkit

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!

Test Environment

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.

FireFox Add-ons

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?

2 comments

  1. Hey,So do you run Photoshop and Fireworks from Ubuntu? Growing really sick of GIMP but I might give it one last shot and follow some tutorials before giving up for good.Basically if I find a good image editor that runs from Ubuntu I’m seriously set! Oh and I’m installing Aptana tonight so I’ll see how it goes and report on it on my blog.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s