RESPONSIVE SCREEN GRAPHICS

Digital publishers need content that can be used on screens of all sizes - from mobiles to tablets, laptops and computer screens. The "responsive screen graphics" created by Graphic News are digital versions of their "static" graphics that look good whatever the screen width.
SPECIFICATION
  • Principle: Essentially two versions of the graphic are created in Adobe Illustrator using two artboards - one corresponding to a mobile phone screen and the other to a laptop - the graphics become longer as the width decreases. After the html is created using an AI2HTML script, the html determines which image is displayed depending on the screen width, with the images scaled for intermediate sizes.
  • Fast and easy to create using conventional design techniques. This is possible because the method pioneered by the New York Times has been modified – the text is outlined prior to generating the html. This also preserves the design integrity at intermediate screen widths as the text doesn't move out of alignment.
  • Easy to modify in Adobe Illustrator as a copy of the editable text is preserved in a separate layer (called the Translation Layer) prior to outlining. The outlined text can therefore be replaced with the editable text in order to translate, edit, or modify.
  • Easy to publish as the AI2HTML script developed by Graphic News, from that pioneered by the New York Times, enables publication using embed code. This code creates a div (rather than an iframe as with the embed code for interactives).
  • Allows the print version to be created at the same time because the larger image corresponds to a standard 107mm feature graphic. The templates for print graphics and responsive screen graphics have the same layers and fonts, so the print graphic can be placed in Artboard 1 of the responsive template (or vice versa) with the appropriate scaling.