Life without Fireworks: sticking with Adobe for web design

As the HTML5 platform becomes richer, it may seem that any role for traditional graphics applications in the web workflow will disappear.

Maybe eventually, but, as anyone who’s tried to create an attractive custom-made design directly via HTML code knows, that’s still a long way off.

For some time to come, we’ll still be creating our sites’ look and feel in a rich wysiwyg editor, then recreating these mock-ups (or “web comps”) in code via Dreamweaver. Moreover, no matter how strong CSS3 becomes, it will never replace JPEGs and PNGs – so even the most code-centric web developer will need a graphics application to achieve the best results.

So which editor is best? For power, the obvious answer is Adobe Photoshop, but while its all-encompassing creative functionality is undeniable, I’ve never liked using it for web work. Back in the late 1990s, my experiences with ImageReady – Adobe’s short-lived Photoshop add-on that attempted to graft web-orientated functions into its pixel-and-layer-based model – were disastrous, a sobering example of how not to do web graphics.

Salvation arrives

Salvation arrived around 15 years ago with the launch of Macromedia’s Fireworks, which took a completely different, ground-up approach to producing web graphics. The key lay in its graphics engine, which combined the best of both vector and bitmap handling.

I remember being especially amazed at its ability to retrospectively re-edit individual brushstrokes

I remember being especially amazed at its ability to retrospectively re-edit individual brushstrokes.

To design a typical pseudo-3D button, for example, simply drag out a vector-based rounded rectangle, then apply a realistic, pixel-based bevel. To make this button interactive, add an image slice and then create new rollover states – by changing the colour or bevel depth, say.

That was just the start. Having created your button, you could quickly copy it and – thanks to Fireworks’ vector handling – simply select multiple objects and quickly align, distribute and, if necessary, edit them all simultaneously.

Add text and import bitmaps, which Fireworks let you edit directly on the canvas, and before you knew it there was an attractive-looking web comp, complete with a navigation bar. Export the result and Fireworks allowed you to optimise your image slices individually, then it automatically generated all the bitmaps and HTML table code necessary to reassemble them inside the browser or your code editor.

Fireworks was a huge advance, and over the years Macromedia added a host more web-orientated additions such as grids and smart guides; symbol- and style-based handling; a built-in live preview; remote rollovers and pop-ups; the option of CSS-based export and tight round-trip integration with Dreamweaver.

Acquisition concerns

When Adobe acquired Macromedia in 2005, one of my biggest concerns was that Fireworks would be dropped. However, with Fireworks CS3 Adobe demonstrated its commitment by boosting integration with Photoshop, Dreamweaver and Flash – and, more significantly still, added multipage support, complete with master pages for repeating elements. Now Fireworks could be used not only to create assets and single-page mock-ups, but full website prototypes.

The future looked bright for Fireworks, but things haven’t turned out as anyone expected. This is a story I’ve covered here before, but to briefly recap, the death of Flash in the browser and the rise of HTML5 and mobile has forced Adobe to entirely reinvent its approach to the web, resulting in its new Creative Cloud (CC) strategy.