Figure 3: The Pages and Layers panels.
In the last paragraph, I mentioned a niche market for Fireworksâ€”web prototyping. Photoshop is all anyone needs for web graphics now that it’s absorbed most of ImageReady’s tools, and probably every web designer out there is using it. What to do with Fireworks, which was a Photoshop competitor? Simpleâ€”make it a web prototyping application! The way the Fireworks team has accomplished this is to add a Pages panel where you can add pages to a fileâ€”think of them as Flash’s scenes or Photoshop’s layer comps, but with more flexibility (each page has its own size, color, resolution and guides). These pages can be exported separately to create prototype HTML pages quickly and easily. The addition of pages improves Fireworks, but I’m not sure it’s the best prototyping tool out there. There are better HTML prototype creators out there that create clean HTML code, such as SiteGrinder, or you may start immediately with Dreamweaver CS3. I still like creating prototypes with Photoshop and working on the actual HTML code with Dreamweaver.
I haven’t extensively tested Fireworks’ HTML capabilities, but it seems like the application is more like ImageReady than SiteGrinder in that it makes images of everything and holds them together with tablesâ€”a web standards no-no. The doctype used is XHTML Transitional which is admirable, but I see it uses spacer images and/or non-breaking spaces to create spaceâ€”both are frowned upon by top-flight web designers. Fireworks’ prototypes wouldn’t be very suitable for development with Dreamweaverâ€”and if that’s the case, then it doesn’t really compete with Photoshop and its powerful tools. Photoshop can output HTML as well with its Save For Web module, and it has no doctype but other than that the code is very similar to that from Fireworks. I should note that Fireworks is extensible, and plug-ins are available that improve the application, including XHTML code export. I haven’t tested anything like this, but there’s plenty of options out there so the likelihood that Fireworks’ native deficiencies can be overcome is high.
Fireworks’ main saving grace is its status as a “niche” product. Photoshop can do everything Fireworks can do, but a whole lot more as well–and some users may not need all those features. If Fireworks can achieve what a web designer needs, then it makes a lot of sense to use it for his/her daily work and leave behind the largesse of Photoshop (and the higher price tag).
Fireworks also has both vector and bitmap tools, which basically combine the powers of Photoshop and Illustrator (or Freehand) in one application, a definite plus for designers. The essay “Why Choose Fireworks?” by StÃ©phane Bergeron says much about this aspect of Fireworks, and argues that this is a main reason why Fireworks is the ideal web design and web prototyping application (and Photoshop is not). I’ve read the essay, and while there are several worthwhile points (for instance, Fireworks does do a better job of positioning elements by pixel coordinates) I find that practically everything mentioned can be done in Photoshop, sometimes done better, and since CS3 even more Fireworks functions can be achieved or exceeded (an example is non-destructive filters). Maybe this is because I am used to using Photoshop. In any case, there are many designers out there who swear by Fireworksâ€”look at the many comments posted on John Nack’s blog entry “Photoshop + Fireworks: Where to from here?”, way back in February 2006.
If I were to suggest a web graphics or web prototyping application to a new designer, I would suggest him/her to take a good look at Fireworks and see if it fits his/her workflowâ€”it may be all they need. If the designer is a veteran who has Photoshop experience, or if the designer does photography or print work as well, I would have to suggest Photoshopâ€”but I would also recommend taking a look at Fireworks.
For those that don’t know, Flex is Adobe’s new tool for creating rich internet applicationsâ€”and it’s an exciting development. One thing Fireworks does have going for it that Photoshop doesn’t is Flex integration. You can create a Flex application layout in Fireworks and export the proper code (MXML format) for use in the Flex environment. Styling and positioning are maintained so there’s little to worry about when moving the assets over to Flex Builder. I am glad Fireworks and Flex are being leveraged as a team, and this is the type of feature that keeps it relevant and fresh.
Figure 4: The Common Library and Symbol Properties panels.
I wanted to review Fireworks because I feel Adobe’s top-tier applications steal a lot of coverage from these application, and you read about them only in user groups or forums. The only people writing about these applications are those already using the application. With CS3 and Adobe’s attempt to find a niche for its expanded lineup, I was excited to see what Fireworks had to offer. My conclusion is that Fireworks CS3 does not offer much more than Fireworks 8â€”though interesting things are happening with Flex that may cause excitement in a year or so. There are also some good decisions being made by the Fireworks team that may make the application the go-to tool for website prototypes. There is no killer application yet within Fireworks that makes it irreplaceable in this field, but new features have improved its power and with CS4 we may see an even greater leap ahead.
Adobe Fireworks CS3