As a self-taught web designer, and a compulsive tinkerer, I’ve spent countless hours experimenting with different web design applications. The following list represents the current state of my subjective evaluations. It is an attempt to create the list I would have liked to have when I was first getting started. I hope you find it useful.
How the software was evaluated:
I’ve broken my list into several distinct categories and picked one winner for each category. I’ve used the following order of priorities in considering my winners.
- Free software has the biggest advantage for an obvious reason: if you are just starting out, you do not want to break the bank. Of course, no software is truly free, if you don’t pay for it then the developer does. Please seriously consider donating to free projects or purchasing full versions of any of the apps listed below.
- Usability and number of features are important, but generally less important than the above priority. I’m willing to put up with a slightly less then perfect user interface if it means the software is cheaper.
- Cross platform software is preferred. Primarily because I don’t know what system you’ll be using, but also for practical reasons. (e.g. If your shiny Mac is in the shop it’s nice to be able to keep right on going with that old Linux box in the basement… true story).
Best HTML Editor
Aptana Studio Community Edition
Cost: Free for community edition, $99 for the professional version.
Platforms: Win, Mac, Linux
Pros: Free, many powerful features normally only found in paid applications, cross-platform.
Cons: Sometimes clunky user interface, start-up can be somewhat slow.
Aptana isn’t a winner when it comes to user interface, it can be downright confusing at times, but what it lacks in beauty it makes up for in brawn. The free community edition is powerful enough for professionals. It comes with automatic code completion, code hints/highlighting, code snippets, and integrated validation and debugging tools. It will keep track of multiple projects and has ftp capabilities built right in. It’s not a WYSIWYG editor, but I think this is a good thing for beginning designers, and you can easily see your pages in a browser preview pane without ever leaving the application.
Don’t forget you can edit far more than HTML with Aptana. You can also edit CSS, PHP, Javascript, and a host of other languages. It even includes many popular javascript libraries such as MooTools and jQuery that can be dropped into your projects with a click of the mouse.
Runners up:
- Panic Coda ($99; Mac only)
- Adobe Dreamweaver ($399; Win/Mac)
- Codetch (Free; Win, Mac, Linux. this is a Firefox extension)
Best Graphic Design Application
Fireworks CS4Cost: $299 for full version
Platforms: Win, Mac
Pros: Intuitive editing of both raster and vector graphics in a single document, extremely powerful feature set, specifically made for designing websites.
Cons: Expensive, buggy and complex user interface.
Unfortunately Fireworks isn’t free, at $300 it’s not even cheap. On top of that, its interface has some quirky bugs and annoying design blunders. Nevertheless, it is the clear winner in this category simply because there is no real competition.
Fireworks is the only full-blown vector graphics editor that is also a full-blown raster graphics editor. (Photoshop pretends to do this, but its raster-only origins hold it back). With Fireworks you can create shapes and line drawings as easily as you can remove backgrounds from jpegs. More importantly, you can do all of this in the same document without thinking about it.
Fireworks will prototype entire websites, and export each page of a site directly to HTML/CSS or as a bundled PDF document. I wouldn’t recommend using it to do your coding work for you, but hey, who am I to tell you what to do?
The plain fact of the matter is that Fireworks was created for web design, and that makes all the difference. There is no open source program that even comes close to it, and its only real competitor, Photoshop, is twice as expensive and half as easy to use.
Runners up:
Best FTP Application
FileZillaCost: Free
Platforms: Win, Mac, Linux
Pros: Free and full featured
Cons: Cluttered interface.
FileZilla wins this category because it’s the only free and cross platform ftp program that is fully featured. As mentioned above Aptana already has ftp abilities built-in, but unless you purchase the professional version you cannot use sftp (secure ftp). FileZilla does it all, for free. The fact that it is truly cross platform is another big bonus.
Runners up:
- CyberDuck (Free; Mac only)
- FireFtp (Free; Win, Linux. This is a Firefox extension, and so it also works on Mac, but it requires Xcode and MacPorts to be installed)
- Transmit ($29.95; Mac only)
Best Web Browser
FirefoxCost: Free
Platforms: Win, Mac, Linux
Pros: standards compliant, supports hundreds of extensions, stable, clean interface, fast.
Cons: you might be tempted to add too many extensions which can slow things down a bit.
Firefox is the choice of web designers everywhere. Because it is standards compliant, I design all my sites using Firefox as the standard. If I can get a site working properly in Firefox then it is usually trivial to get it working in most other browsers.
As a browser alone it’s awesome. It’s fast, reliable, and free, what more could you want? Plenty, as it turns out, because Firefox offers so much more. With hundreds of extensions available, Firefox becomes a web designer’s Swiss army knife.
Here’s a short list of the best Firefox extensions for web designers:
- Web Developer: easily dissect, debug and examine any site on the internet.
- Firebug: similar to the Web Developer only vastly more powerful.
- Codetch: brings WYSIWYG HTML editing right to your browser.
Runners up:
Best Site Planning Application
OpenOfficePlatforms: Win, Mac, Linux
Cost: Free
Pros: Entire office suite for free.
Cons: Can be a little slow sometimes.
At first glance it may seem a bit odd to have OpenOffice in a list of web design software, but it is truly indispensable. OpenOffice has incredible outlining abilities, which I use to develop a site map prior to designing any site. It is great for creating site proposals, editing content, and converting those pesky MS Word documents clients send into PDFs. You can even use it to create neat, graphical flowcharts of your website’s pages.
Runners up:
None… okay, okay, fine, Microsoft Office, there, I said it!
thanks , this helped me a lot :) i new i needed Fireworks cs4 cause i already have PS ,FLASH and illustrator CS4 and Fireworks is now improving my graphic web design work :P !
Nice list, but I ended up going with Netbeans and later to JEdit instead of Aptana. Aptana is a great app, but pretty buggy still and a bit cluttered, as you said. The slow start up didn’t bother me too much considering how often I shut down my system or close applications.
I did a trade up to Fireworks from Photoshop (poor text rendering) and Illustrator (too much of what I probably wont ever use) since I’ve started drifting to web design from CMYK publishing work.
Still trying to get convert from PS to Fireworks… and those annoying glitches are bothering me! Did you have some kind of period of frustration when you picked up FW? Can you encourage me to weather through this? I really would love to have raster and vector at once, but I don’t care about prototyping and pixel work is so important to me.. :/
Hi Phil, I started with fireworks, so I never had to convert from PS. I used PS in college in a few classes, but never really liked it. It always seemed cumbersome to me, probably a little bit the way Fireworks currently feels to you. It does approach the work flow differently. The tricky part is to not think that something should work in the PS way in Fireworks. Rather, if you can learn to do it the fireworks way your mental habits will slowly shift. I think you’ll be happy once you make the shift, but not every tool is for everyone. Good luck! Let me know how it is going in a few months if you think to do so.
I’ve recently moved to Espresso on the mac. Nice little editor, doesn’t have all the bells and whistles of Netbeans or Aptana, but it’s very clean and easy to use.
jEdit is killer (just noticed that post). I like the plugin-based thing. I’ve run into a few problems though with getting it setup (also a result of plugin-based thing). Brandon, later that day, I switched back to Photoshop! Signs are pointing to FW, but I think if I switch back and forth enough, I will eventually stop on one of them :/ I will also check out ACDSee Canvas and CorelDraw. Know anything of those?