Responsive "screen" graphics

Digital publishers making content available for mobile phone, tablet and computer screens need responsive graphics because graphics become unreadable if scaled down to the size of a mobile phone screen.

  • Responsive "screen" graphics (as produced by Graphic News) are produced in Adobe Illustrator using conventional design techniques. Essentially two artboards are used, one equivalent to the traditional print graphic, and the other to the smaller mobile phone screen.

    When converted to html using a script (AI2HTML) each artboard becomes a separate .png. Which image is seen depends on the screen width, with the .png being scaled at intermediate screen widths.

    As the smaller artboard for mobile phone screens is made longer than the other artboard, as the screen width decreases, the height of the graphic gets longer. This contrasts with responsive interactives that stay the same height as the width decreases. The embed code used to publish an interactives is essentially an iframe, whereas the embed code used for a responsive "screen" graphic is a <div>

    The method used by Graphic News was developed from that pioneered by the The New York Times to improve the production speed, the consistency of the visual end product, and to allow graphics to be published using a simple embed code :
    • Only two artboards are used (rather than 3 or 4 used by the NY Times).
    • The fonts and layers used for the screen graphic are similar to those used when constructing print graphics. This enables the print graphic to be created from Artboard 1 (or vice versa).
    • The text is outlined. This stops the text “wandering about” at intermediate screen widths and so maintains the visual quality of the graphic (and the sanity of the artist trying to construct it). Outlining the text also means that traditional font and paragraph settings can be used by a designer with conventional design skills.
    • So that the text can be modified the editable text is saved (before it is outlined) to the "Translation Layer" - so called because in the print graphic this layer is used to hold the original English text when a graphic is translated. With a screen graphic you can select all the outlined text in "Text View", go to the "Translation View" to select the editable text, then return and paste the text in the Text View (Cmd-F)
    • When the .ai is first opened, the Artboards are surrounded by "Yellow stickies" giving instructions. Artists familiar with the methodology can hide these instructions by going to Edit View.


      FAQ: Why do graphics need to be responsive for digital publishers
      FAQ: What do the terms responsive, fluid, adaptive mean?

      GN_AI2HTML_script GNv2.4 - update November, 2017 - update to allow more than one responsive on a single web page

  • 21 days to go until NEW GRAPHIC NEWS - a new website for a new era.

    28 years ago — April 2, 1991 — the original Graphic News launched using a precursor to today’s websites that used email technology. These enabled infographics to be delivered electronically around the world over telephone lines. What was possible was very limited - It took 10 minutes for a 100K file to download.

    Since then delivery speeds and website technology have moved on. The new website will offer the best online experience possible now, adding many new features (and offering new opportunities for the future), but still enabling existing users to select and download infographics and enjoy the distinct brand of visual journalism that is Graphic News.

    Over the coming days I will give further information. Please contact me if you have any questions. Fiona Roberts, froberts @