Fireworks CS6 mobile design focus forms linchpin of new strategy

By Chris McVeigh, Macworld |  Software, Adobe

The CSS Properties panelnew to Fireworks CS6gives developers an advantage by automatically generating code for many elements of the design. Lets 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 youll 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 caveatand theres always a caveatis 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 codedefined by your slicesdescribes 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, its now possible for a designer (rather than a developer) to customize a jQuery Mobile theme without ever having to weed through code. Its a bit of a ham-fisted process, however. There is no dedicated theme editor in Fireworks CS6; instead, youre asked to customize the properties of objects across a multi-page template and then export it as a theme.

Originally published on Macworld |  Click here to read the original story.
Join us:






SoftwareWhite Papers & Webcasts

Webcast On Demand

HP DevOps KnowledgeVault

Sponsor: HP

See more White Papers | Webcasts

Answers - Powered by ITworld

ITworld Answers helps you solve problems and share expertise. Ask a question or take a crack at answering the new questions below.

Ask a Question