| 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

Please get in the habit of logging in when you arrive as we will be restricting the number of pages viewable to unregistered users

The website is undergoing the first part of an upgrade, so please let us know if you encounter problems. When responsive graphics are available, there is now a button to show how they adapt to screen size. There are improved indexing and information pages and also an auto translate facility for our foreign readers. We have also incorporated GN NewsAhead and the GN On This Day anniversaries database.