ai2html is an open-source script for Adobe Illustrator built by the New York Times that turns Illustrator documents into HTML and CSS files for the web. When I started using it for stories, I found it fairly straightforward to run, but was stumped when what appeared to be working locally fell apart once uploaded through my site’s content management system.

It turns out that the NYT’s suggested JavaScript approach for serving separate graphics on different screen sizes conflicted with some code built into my site’s page templates. As a workaround, below is an alternative method using CSS media queries. There may be more robust solutions, such as working with a product team to edit the conflicting code, but this could be a useful alternative to what’s in the official documentation for those on a deadline.

Quick description of ai2html: The script works its magic by separating the text in an Illustrator file from background images or shapes (such as the bars on a chart, or base of a map). It then produces an HTML file with this text overlaid on the background images. ai2html can be used to make responsive web graphics by building multiple versions in separate artboards (sized for mobile, tablet, and desktop, for example) within an Illustrator file. ai2html will export these as separate divs.

It’s used by many newsrooms including the Times, The Washington Post, and the Wall Street Journal. Here’s a recent personal example from CNBC. Jonathan Soma has a great tutorial on how to use the tool, as does Luis Melgar on Alberto Cairo’s site.

Once a graphic is built in Illustrator and exported with the ai2html script, the Times’s documentation suggests using some JavaScript code to serve different graphics sizes at different browser widths:

The idea is that each artboard/div can be toggled on and off depending on the size of the outer container. All you have to do is add our little resizer script to your webpage.

Using the script is easy – just copy and paste it into the top of the produced ai2html file. But because a code conflict that I couldn’t control was breaking the resizer script, all three sizes of a graphic were showing up in my first attempt at this, resulting in a chart monstrosity along these lines:

Mobile, tablet, and desktop images all shown at once

If that’s happening to you and there’s no time to work out a long-term solution, here’s a way to show and hide the artboards using CSS instead of JavaScript. The IDs #g-ai2html-example-mobile, #g-ai2html-example-tablet, and #g-ai2html-example-desktop match the <div> IDs that ai2html makes from the Illustrator document and artboard names when creating the HTML file:

#g-ai2html-example-mobile {
	display: block; /*Show the mobile version by default*/
}

#g-ai2html-example-tablet, #g-ai2html-example-desktop {
	display: none; /*Hide the tablet and desktop versions*/
}

@media (min-width: 700px) {
	#g-ai2html-example-tablet {
		display: block; /*Show tablet version once screen width hits 700px*/
	}

	#g-ai2html-example-mobile, #g-ai2html-example-desktop {
		display: none; /*Hide the mobile and desktop versions*/
	}
}

@media (min-width: 1000px) {
	#g-ai2html-example-desktop {
		display: block; /*Show desktop version once screen width hits 1000px*/
	}

	#g-ai2html-example-mobile, #g-ai2html-example-tablet {
		display: none; /*Hide the mobile and tablet versions*/
	}            
}

Plugging this block of code in at the end of the ai2html file’s CSS <style> tags produces a graphic that displays different versions based on the widths specified in the media queries. Here’s an example (resize your browser window to test it out):

MOBILE

TABLET

DESKTOP

To go one step further and make this more efficient, ai2html lets you specify custom CSS that you always want to include in the HTML file it produces. By pasting the above media queries into a text box in the Illustrator file with “ai2html-css” at the top, the code will automatically be included in the file’s <style> tags. Just update the IDs to match your Illustrator file and artboard names as needed.

Here’s the Illustrator file and code for the the graphic example above: https://github.com/naterattner/ai2html-with-css-media-queries.