RESPONSIVE SCREEN GRAPHICS
Digital publishers need content that can be used on screens of all sizes - from mobiles to tablets, laptops and computer screens. The "responsive screen graphics" created by Graphic News are digital versions of their "static" graphics that look good whatever the screen width.
SPECIFICATION- Principle: Essentially two versions of the graphic are created in Adobe Illustrator using two artboards - one corresponding to a mobile phone screen and the other to a laptop - the graphics become longer as the width decreases. After the html is created using an AI2HTML script, the html determines which image is displayed depending on the screen width, with the images scaled for intermediate sizes.
- Fast and easy to create using conventional design techniques. This is possible because the method pioneered by the New York Times has been modified – the text is outlined prior to generating the html. This also preserves the design integrity at intermediate screen widths as the text doesn't move out of alignment.
- Easy to modify in Adobe Illustrator as a copy of the editable text is preserved in a separate layer (called the Translation Layer) prior to outlining. The outlined text can therefore be replaced with the editable text in order to translate, edit, or modify.
- Easy to publish as the AI2HTML script developed by Graphic News, from that pioneered by the New York Times, enables publication using embed code. This code creates a div (rather than an iframe as with the embed code for interactives).
- Allows the print version to be created at the same time because the larger image corresponds to a standard 107mm feature graphic. The templates for print graphics and responsive screen graphics have the same layers and fonts, so the print graphic can be placed in Artboard 1 of the responsive template (or vice versa) with the appropriate scaling.
FAQ: How can responsive screen graphics be edited or modified?
Any graphic designer familiar with using Adobe Illustrator can modify or edit responsive screen graphics using conventional design techniques. When you first open one of these graphics you will see lots of “yellow stickers” giving instructions. When you are familiar with the instructions you can avoid the stickers by going to
Edit View. For further information
Click Here FAQ: How can responsive screen graphics be published?
• The embed code supplied by Graphic News can be used. This is essentially a div.
• If you want to host the graphic on your own servers (as you would an interactive graphic) you can create your own embed code. As each editorial system is different, your developers would be the best people to help you with this, but please contact us if you’re having difficulty.
• Previews: Many websites, including the Graphic News home page, use preview images for graphics that are “landscape” (i.e. the width greater than the height). The preview image used by Graphic News, R.jpg , is therefore packaged along with each responsive graphic.
An iframe can not be used because the graphic gets longer as the screen width decreases.
Although the html created by the AI2HTML script could be pasted onto a web page, there are hundreds of lines of code. Using the embed code is much easier!
FAQ: How can I obtain and use the Graphic News version of the AI2HTML script?
The AI2HTML SCRIPT used by Graphic News can be downloaded from the link below. Move the ai2html.jsx file into the Illustrator folder where scripts are located. (This may require administrator status):
Applications/Adobe Illustrator CC 2014/Presets/en_GB/Scripts/ai2html.jsx
To familiarize yourself with using the AI2HTML script:
• Download a graphic -- GN12345R_screen_EN.zip . Inside you will find the master .ai file, GN12345R_EN.ai. Edit the file name appropriately, for example to GN12345R_ES.ai if translating into Spanish.
• Open the R.ai master file in Adobe Illustrator (version CS4 or later). It opens in Publish View. This shows various yellow Help messages surrounding the two artboards. To make these messages disappear, and to edit, go to Edit View. Check the Layer Palette, Artboard Palette, Type-Character Palette. Check the Views: Edit View, Publish View, Translation View, Text View, Ai2HTML settings View. Please read the notes below in conjunction with the yellow Help Messages seen when you first open the graphic.
• Go to the ai2html Settings View and edit the output line to, for example, GN12345R_ES. When the ai2html script is run the .html and .png for each artboard will then be placed in a folder with this name. Trash the previous folder supplied with the .ai.
• Check the Artboard names are still Artboard 1 and Artboard 2 - for some reason the names seem to morph - especially if using different language keyboards. So check, and if the names need to be reinstated go to the Artboard Palette, click on the Artboard Icon to the right of each artboard name to bring up the menu and edit the artboard name.
• Go to Publish View, Save to Adobe Illustrator CS4, and run the AI2HTML script. Check that the .png are labelled 1 and 2. If not, trash the output folder, edit the artboard names (as above), Save to Adobe Illustrator CS4 and re-run the script
FAQ: How do the responsive screen graphics produced by Graphic News differ from those of the New York Times?
Although the AI2HTML method pioneered by the New York Times is similar to that used by Graphic News, some fundamental changes were made to make the method easier and faster to use. The New York Times recognized that by using different artboards, graphic designers could create attractive responsive graphics and could avoid bespoke coding. They also had the altruism to make the AI2HTML script available to others.
• Graphic News responsive screen graphics use two Artboards (rather than 4). The largest, Artboard 1, corresponds to a standard two-column traditional print graphic.
• The Graphic News AI2HTML script produces files to match Graphic News filename conventions and embed code. It also accommodates variables. These can be used to avoid editing text on multiple artboards
• They can be proofed on a desktop because the html produced includes the CSS required to display the correct graphic at any given screen width. This eliminates the need for additional javascript to dynamically determine which image is shown and makes it easier for websites of all types to start using responsive infographics.
• The text is outlined before converting to html to avoid uncontrollable text movement at intermediate screen widths. Outlining also enables the designer to use the same Character and Paragraph settings as they would in a print design. This also makes it much faster to make a print graphic from one of the Artboards.
Note: Although outlining the text means that it is invisible to a search engine, in practice most graphics are accompanied by a story that can be read by a search engine.
• As outlined text is not editable, before outlining the editable text is saved to a separate layer (the Translation Layer). This cannot be seen normally because it is behind the background layer and locked so that it is invisible to the AI2HTML script. Views are set up in Adobe Illustrator so that it is possible to toggle between the Translation View and the Text View, when replacing editable text for outlined text and vice versa.
• The layers used are identical to those used in Graphic News print graphics to facilitate producing a print graphic from one of the Artboards.
