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:
- 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.
- 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.
- 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.
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?