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.

    • | 1. PRINCIPLE | 2. EDITING & MODIFYING | 3. PUBLISHING | 4. SCREEN TO PRINT |

      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


  • Welcome to Graphic News

    Please get in the habit of logging in when you arrive as some pages may soon be restricted. If you are new to Graphic News there is a Website Guide to help you find your way around.


    November 24, 2017 — Ai2HTML screen graphics - The script has been updated to allow multiple screen graphics to be published on the same web page. Click here for instructions


    November 24, 2017 — Training - mobile graphics- The GN AI2HTML method is very fast and easy. It allows designers with conventional design skills to produce responsive “mobile” friendly graphics to meet news deadlines. Contact helpdesk @ graphicnews.com if you would like to join our next training course.


    If you need help or have questions at any time, please contact us

    Cookies