Responsive graphics and MobileFirst

Digital publishers making content available for mobile phone, tablet and computer screens need responsive graphics because graphics become unreadable if scaled according to the screen width. Responsive graphics change their design so they look good and remain readable on screens as small as mobile phones, as well as tablets and computer screens. Responsive graphics let viewers choose how they want to view content without publishers creating alternative sites.

  1. Responsive graphics can be interactives or, what we call, responsive screen graphics. All new interactives created in Adobe Edge Animate are responsive. These graphics can be published using an iframe because the height of the graphic remains constant regardless of the screen width. | INTERACTIVES |

  2. Responsive screen graphics are produced in Adobe Illustrator and converted into html using a method originally pioneered by the The New York Times. Essentially each graphic is produced in two versions on two artboards, the smaller size being designed for mobile phones and the larger size for tablet/computer screens, with the length (height) of the graphic increasing for the thinner mobile version.

    When converted into html using the script (AI2HTML) two images are created from the artboards. The html selects which image is displayed according to the width of the reader’s screen, the image scaling at intermediate screen widths.
Disadvantages of the New York Times Method - the additional time required to create each graphic in multiple sizes, the time taken to add the text due to the restrictions imposed by the html scripting, and the horrible typography that results when a graphic is viewed at intermediate screen widths.

The method developed by Graphic News - uses outlined text rather than editable text (an editable version of the text being stored on a concealed layer). This stops the text “wandering about” at intermediate screen widths and so maintains the visual quality of the graphic. Outlining the text also means that traditional traditional font and paragraph settings can be used; designers are familiar with designing in different widths to correspond with the columns in a printed edition. And by choosing appropriate font and Artboard sizes a print graphic can be produced from one of the Artboards.

So although undoubtedly additional time is required, this is only about 10% more than that required to produce a print graphic alone. The big advantage is that conventional construction techniques are used and so a conventional graphic designer can produce graphics for print and digital to meet news deadlines, without the assistance of a coder... and the visual quality is maintained.


FAQ: Why do graphics need to be responsive for digital publishers
FAQ: How do I know if a static graphic is also available as a responsive or an interactive??
FAQ: What do the terms responsive, fluid, adaptive mean?
FAQ: How does the Graphic News system differ from that of the New York Times?

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 @ if you would like to join our next training course.

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