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.3 - update March, 2017 - adoption of two- (rather than three-) artboard template

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.

If you need help or have questions, please contact us