Responsive graphics and MobileFirstDigital 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.
- 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 |
- 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 three versions on three artboards with different widths - corresponding to the size of a mobile phone, tablet and computer screen, the height of the graphic increasing as the width decreases.
When converted into html using the script (AI2HTML) three 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.
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.
| 1. PRINCIPLE | 2. EDITING & MODIFYING | 3. PUBLISHING | 4. SCREEN TO PRINT |
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?