| 2 . AI2HTML SCRIPT - familiarisation | 3. EDITING & MODIFYING | 4. PUBLISHING | 5. SCREEN TO PRINT |

The principle behind responsive screen graphics is as follows:

  1. A graphic is prepared in Adobe Illustrator using two Artboards of different sizes: Artboard 1 (640px), Artboard 2 (320px). Artboard 2 corresponds to a mobile phone screen, and Artboard 1 to a laptop screen. Adobe Illustrator CS4 is the earliest version of to allow multiple artboards is CS4.

  2. A script (ai2html) is then run. This converts the images on the two artboards into two .png - one for each artboard - plus an .html file.

  3. When the html is played in a browser the size of the screen determines which of the two images is displayed. With intermediate screen widths the image scales.
This method and the script used by Graphic News has been developed from that pioneered by the New York Times. The script used by Graphic News avoids typographic problems at intermediate screen widths (by using outlined text), and allows screen graphics to be constructed using the conventional character and paragraph styling used to create print graphics. This makes it possible to create responsive screen graphics to meet news deadlines, as well as traditional print graphics.

FAQ: How does the Graphic News system differ from that of the New York Times?
FAQ: What is a responsive graphic and why are they needed?

Welcome to Graphic News

If you are new to Graphic News there is a Website Guide to help you find your way around.