FAQ: RESPONSIVE SCREEN GRAPHICS 1. PRINCIPLES

| 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

October 12, 2017: The Index and Website Guide have been improved to give greater accessibility


October 12, 2017: The results of a search can now be displayed one graphic at a time. So to run through the latest graphics, select the language flag on the top bar, and then the display option you want


November 1, 2017: The bulk of our Olympics graphics package will be available. Some already released


Please get in the habit of logging in when you arrive as some pages may soon be restricted


If you need help or have questions, please contact us

Cookies