Export Responsive Prototype v0.2.7 WIP - Fireworks Extension

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.

via mattstow.com

W3C- Media Queries

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets.

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

via w3.org