Fireworks CS6 mobile design focus forms linchpin of new strategy

Adobe Fireworks—a curious combination of Photoshop and Illustrator that is specifically dedicated to Web design—is one of the more specialized apps in Adobe’s Creative Suite. As a companion product to Dreamweaver, Fireworks allows designers to create Web mockups, slice files for export, and pass along assets to developers. To that end, Fireworks CS6 rolls in enhancements that help ease the exchange between designers and developers.

Master of mockups

Fireworks’ set of bitmap tools allow you to construct mockups pixel-by-pixel, while the program’s vector tools let you quickly lay down boxes, backgrounds, and other resizable shapes. You can create multiple pages within a single document for different versions of the same basic design; for example, one page might contain a mockup of the home page and while another hosts the standard content page. Completed mockups can be sliced for export, and you can assign slice behaviors (a rollover, for example) to be compatible with Dreamweaver.

Fireworks CS6 includes some minor usability improvements, including opacity controls for fills and strokes, an enhanced color picker that displays hex values, and the ability to specify the angle of a gradient. Additionally, the symbol library now includes interface elements from smart phones to help designers quickly mock up mobile websites. New items include gesture icons, keyboards, and hardware frames.

Enhanced CSS functionality

A typical workflow might have a designer creating Web mockups in Fireworks, and then passing them to a Web developer for coding. The developer then has to deconstruct the mockups, making judgments about what visual elements can be achieved via Cascading Style Sheets (CSS3), a coding language that is increasingly used to describe not just the look and layout of text, but the appearance of graphical elements such as buttons, backgrounds, and shadows.

The CSS Properties panel—new to Fireworks CS6—gives developers an advantage by automatically generating code for many elements of the design. Let’s say you use the vector tool to create a rectangle with rounded corners, apply a gradient fill, and add a subtle drop shadow: All this can be described by CSS. Select the object and visit the CSS Properties panel, and you’ll see the full list of properties along with the necessary code (which can be copied to the clipboard). Additionally, Fireworks can generate code specific to Opera, Firefox, Internet Explorer, and Webkit browsers like Safari and Chrome to ensure consistent cross-browser rendering.

This feature is a great asset for developers and it benefits designers, too. Tailor your design elements to CSS, and you can avoid contentious edits by a developer seeking to streamline the website. The caveat—and there’s always a caveat—is that there are only a few types of graphical elements that can be fully coded by CSS. The CSS Properties panel describes aspects of these objects (for example, line weight, line color, and fill), but it needs a warning indicator to let designers know which objects cannot be fully described by CSS.

The second key way Fireworks now supports CSS is via CSS Sprites. Instead of slicing interface graphics into dozens of individual files, you can export a single image file (or sprite sheet) containing all graphic elements. CSS code—defined by your slices—describes the location of each graphic element on this sprite sheet. The benefit is that the sprite sheet is downloaded only once, which helps speed up the site by reducing demand on the server.

jQuery Mobile theme skinning

jQuery, for the uninitiated, is a touch-optimized framework that can help developers quickly deploy content tailored to smart phones. It leans heavily on CSS graphics and CSS sprite sheets to ensure that mobile websites load quickly.

In Fireworks CS6, it’s now possible for a designer (rather than a developer) to customize a jQuery Mobile theme without ever having to weed through code. It’s a bit of a ham-fisted process, however. There is no dedicated theme editor in Fireworks CS6; instead, you’re asked to customize the properties of objects across a multi-page template and then export it as a theme.

Choosing Commands -> jQuery Mobile Theme -> Create New Theme opens a new theme document. The first page lets you define global assets and styles, and you’re presented two sets of common navigational icons that you can customize. You can also specify the style for button labels, icon backgrounds, box shadows, and rounded corners by clicking an object and adjusting its properties. The subsequent five pages offer default swatches that you can tailor to your design by choosing fonts and tweaking the color of headers/footers, backgrounds, and buttons. Unfortunately, Fireworks does not disable properties that aren’t Web-friendly, so you have to be careful to avoid fonts and gradient types that aren’t supported by CSS.

A built-in theme preview lets you check out your theme at any time, though you must manually reload the preview after you make changes. The trouble is that you cannot preview the theme using your own sample content, which is disappointing given that the primary focus of this app is to construct Web mockups. In effect, this means you’ll need to rebuild the theme in a regular document in order to create a proper mockup for your client.

Moreover, jQuery Mobile offers a free Web-based editor called ThemeRoller, which handles theme customization with more finesse than Fireworks. Theme settings are configured on the left, colors can be dragged and dropped from the palette at the top, and all changes to a theme are displayed live in the center of the page. Once you’re happy with what you see, you can download the theme for free. Fireworks’ multi-page template structure is awkward in comparison, though unlike ThemeRoller, you can make changes to the theme’s default icon set (and add new icons) using Fireworks.

Old habits

Despite four major updates, Fireworks retains a good deal of interface artifacts from its days as a Macromedia Studio MX product. As a result, many aspects of the interface are inconsistent with other apps in the Adobe Creative Suite. Fireworks’ vector tools—originally derived from Macromedia Freehand—continue to be markedly different than those in Illustrator.

That’s not always a bad thing; for example, gradient controls include a set of handles that allow you to quickly tweak the placement and angle of the fill, and you can edit the corners of a rounded rectangle or the points of a star at any time. However, these differences create an unnecessarily steep learning curve for new users migrating from Photoshop or Illustrator.

It simply doesn’t make sense that products within the same application suite would have different tools to achieve the same end. It’s been five years since Fireworks was officially integrated into the Creative Suite, and unfortunately, it still feels like a bit of an outsider.

Macworld’s buying advice

Fireworks CS6 is a conundrum. It shares a lot of functionality with Photoshop, and many designers are quite content to use Photoshop (or even Illustrator) to create Web mockups. However, Fireworks CS6 has a number of distinct advantages as a Web design environment, including an extensive symbol library, hooks with Dreamweaver, and enhanced support for CSS.

Existing Fireworks users will want to upgrade to CS6, particularly if they often run into design issues with Web developers who want elements like buttons and backgrounds designed within the limitations of CSS. On the other hand, the Fireworks user interface can be divergent enough from its Creative Suite mates to frustrate some users. From an artist and designer standpoint, unless your Web developer asks that you provide CSS code snippets or CSS sprite sheets, you’re probably better off sticking with Photoshop to mock up your websites.

[Chris McVeigh is an author, illustrator and toy photographer who lives in Halifax, Nova Scotia, and a frequent contributor to Macworld.]