FAQ: How do the responsive screen graphics produced by Graphic News differ from those of the New York Times?

Although the AI2HTML method pioneered by the New York Times is similar to that used by Graphic News, some fundamental changes were made to make the method easier and faster to use. The New York Times recognized that by using different artboards, graphic designers could create attractive responsive graphics and could avoid bespoke coding. They also had the altruism to make the AI2HTML script available to others.
  1. Graphic News responsive screen graphics use two Artboards (rather than 4). The largest, Artboard 1, corresponds to a standard two-column traditional print graphic.
  2. The Graphic News AI2HTML script produces files to match Graphic News filename conventions and embed code. It also accommodates variables. These can be used to avoid editing text on multiple artboards
  3. The responsive graphic can be proofed on a desktop because the html produced includes the CSS required to display the correct graphic at any given screen width. This eliminates the need for additional javascript to dynamically determine which image is shown and makes it easier for websites of all types to start using responsive infographics.
  4. The text is also outlined before converting to html to avoid uncontrollable text movement at intermediate screen widths. Outlining also enables the designer to use the same Character and Paragraph settings as they would in a print design. This also makes it much faster to make a print graphic from one of the Artboards.
  5. As outlined text is not editable, before outlining the editable text is saved to a separate layer (the Translation Layer). This cannot be seen normally because it is behind the background layer and locked so that it is invisible to the AI2HTML script. Views are set up in Adobe Illustrator so that it is possible to toggle between the Translation View and the Text View, when replacing editable text for outlined text and vice versa.
  6. The layers used are identical to those used in Graphic News print graphics to facilitate producing a print graphic from one of the Artboards.

Note: Although outlining the text means that it is invisible to a search engine, in practice most graphics are accompanied by a story that can be read by a search engine.