The New York Times created and released the open-source project called ai2html, a script that converts Adobe Illustrator graphics into html and css.
Adobe Illustrator quickly became the primary tool of newspaper graphics departments after it was first released in 1986, and it remains so even today in the age of the Internet. At The New York Times, more than 90 percent of the information graphics published on the web are primarily authored using Illustrator.
Before ai2html, the main way to create a web version of an Illustrator graphic was to export your creation as an image. But this was profoundly unsatisfying because the rendered text never looked as crisp as the html text that appeared on the rest of the web page, leaving you with the feeling that your graphic was just scanned out of the newspaper. Also, with the text rendered as pixels instead of as html, emergency edits to the text (as inevitably occurs in journalism) could be made only by a graphics person — which is a challenging scheduling problem for graphics departments facing the 24-hour web news cycle.
And with the rise in importance of SEO, search engines were unable to read the the text of graphics.
ai2html was written to solve these problems. And with the rise of mobile platforms, it has become even more indispensable by giving authors the ability to quickly make multiple versions of a graphic for different viewport sizes while keeping the text clear and readable — all the way from wide-screen monitors down to mobile phones.
For a flavor of what the script can do, see our maps page following the rise of ISIS. The more than 40 maps and diagrams were created with ai2html. Each map has at least three versions to accommodate different viewport sizes, so you can view the page on your mobile phone, tablet and desktop. The page was awarded the Best in Show at the 2015 Malofiej information graphics competition.
Since the script was released as an open-source project on Github in March, other publications have used it to create responsive graphics as well:
