Export Responsive Prototype v0.2.7 WIP

Posted: November 26 2011

Usage

Export Responsive Prototype allows you to simulate responsive design when you put designs for each media query breakpoint on separate pages.
To indicate which sections of the design "respond" you simply slice the document, making sure that clear rows are defined.
For areas that don't have slices, or just plain slices, their widths will be converted to percentages.
By adding either 'fixed', 'left, 'center' or 'right' in the slice's target field, you can force slices to be to not scale. 'left, 'center' and 'right' will absolutely position the slices to the respective anchor point of the row.
There is no need to name your slices as this extension is for rapid prototyping.
It doesn't support "live" text (it just flattens everything) and you can't specify any backgrounds either.

CS3 and CS4 users please ensure you uncheck 'Current page only' in the Export dialog.

Mac users please ensure you save all important open documents before exporting as it can crash Fireworks. A bug has been logged with the Fireworks team regarding this.

Resources

Downlod Export Responsive Prototype v0.2.7
Watch a demo screencast of it in action
Working HTML protptype of the Boston Globe site (with 3 breakpoints: desktop, tablet & phone)
Exported HTML prototype assets for the Boston Globe demo
Boston Globe FW PNG used for the prototype

Changelog

0.2.7 - Removed sleep for Mac as it seemed to cause more issues than it solved on some Macs. Disabled pinch to zoom. Change img vertical-align to top
0.2.6 - Added sleep for Mac to reduce chance of crashing on export. Fixed export if slice was selected. Fixed markup typo
0.2.5 - Made it compatible with CS3+, fixed broken Export Settings assignment and moved initial assignment
0.2.4 - Fixed edge case where <td>s were output in markup. Fixed page names with spaces
0.2.3 - Made it compatible with Mac OS by re-doing file operations and restoring Export Settings at the end of the script
0.2.2 - Prepended resources with rwd-, only delete files related to RWD and fixed script when only 1 MQ exists
0.2.1 - Made it compatible with CS4 by moving resources from App/User Data
0.2.0 - Added mobile meta tag so mobile devices load correct breakpoint. Improved readability of code. Allows updating through Extension Manager
0.1.0 - Initial release

Let me know what you think.