Some of the very best web design and development tools are free. Free as in speech and as in zero pence. We take a look at the best free software you can use to build a successful, contemporary website, starting with the obvious: tools to design it with.
First you'll need a web editor. Nvu has long led the field in open source drag- and-drop web authoring. However, development seems to be frozen, with no new releases since 2005. KompoZer builds on the same code base and is described as "Nvu's unofficial bugfix release". It might feel like an earlier version of Dreamweaver, but with CSS editing and built-in W3C validation, it's a modern authoring tool. Both are available for Mac, Windows and Linux.
These tools are based on the original Netscape Composer code that went open source with the launch of the Mozilla Project. The original program is still open source as part of the SeaMonkey suite of web tools.
Nvu's CSS tools are a bit basic, so a dedicated editor such as CSSed can be used to boost your toolkit. There are no preview tools, but built-in autocompletion, hierarchical code views and CSS validation make it a match for commercial environments. However, if all you want is to knock together quick and dirty layouts then the free online CSS layout editor and CSS generator at www.csscreator.com may be enough.
Code crunchers
The open source community serves coders better than designers, with free tools that can handle HTML, CSS, JavaScript and server-side programming tasks.
At the top of the current heap, we wholeheartedly recommend Aptana Studio 1.1. It handles web scripting easily, with additional features aimed at advanced application development, including Ruby on Rails, Adobe AIR and iPhone support through free plug-ins.
Aptana is available for Windows, Mac and Linux, though Linux devotees may want to look at Quanta Plus, which is aimed more squarely at site development than Aptana. Something more lightweight required? We swear by Notepad++ (notepad-plus.sourceforge.net), a free code editor and Windows Notepad replacement that's great for tweaking HTML, CSS or PHP code.
Alongside your Ajax coding-capable editor, you'll need a good script library. Why try to reinvent the wheel when others have done the hard work for you? The Ajax framework we recommend has a long history of use and is actually based on two technologies.
First, there's Prototype, a library of bespoke 'classes' for file, form and external data handling. Rico is a library of ready-made interface components, effects and interactive elements that's built on top of Prototype. Similarly, Scriptaculous can be used to extend Prototype. These libraries aren't for beginners, but they make programming Ajax interfaces a whole lot easier.
Site planning
What's lacking from all the authoring tools we've mentioned so far is a mechanism for planning sites, so let's take a lateral step around this conundrum.
Aside from project management and file transfer (which we'll come to in a moment), what else do the site planning tools in commercial behemoths Adobe Dreamweaver and Microsoft Expression Web really offer? A visual method of planning site architecture, perhaps?
How about Dia, then? A tool for drawing structured diagrams, flow charts and hierarchies, it can be used for circuits, flow control and, of course, site architecture. If this all sounds too specialist for you then the Microsoft-baiting OpenOffice comes with the concisely named Draw tool, which is ideal for mapping site architecture before construction.
Site management isn't just about architecture, though – it's about project management too. That's where an online tool like Open Workbench comes into its own. If you manage your manpower with this alternative to Microsoft Project, you'll be able to track resources, impose deadlines, assign tasks to team members and more. Though it's aimed at enterprise level project management, it's ideal for collaborative site building too.
