Taking stuff apart:Ā āHow ISIS Expandsā, a simple multi-platform graphic story
Great technology allows for great storytelling, which seems to be the motto for the always excellent NYT Graphics team. In their newest graphic, How ISIS Expands (Hannah Fairfield, Tim Wallace and Derek Watkins), the Times looks at strategies of ISIS' expansion, published on the day the ancient city of Palmyra fell. One of the great technologies underlying each project at the NYT: ai2html. Since March 5, the Illustrator script was made available to the public. What it does is convert AI files directly to HTML, which I've described last summer before actually seeing and using the script (some guy even went as far as creating his version of it, which of course doesn't handle all the options the NYT ai2html has). Again, you need to know how to use it, and for that is another challenge for every modern graphics desk in media organisations. When integrated well into your workflow, it aims to provide a tool that lets your designers design the way they always had using Illustrator and produce an output that is for the Web. It segways well into the other point that makes something like the ISIS piece so great. Inside the "ai2html" script (which reads like JavaScript?) is a part where some "NYT break points" turn up, circa line 668 of the script's version 0.54: It turns out that when you create multiple artboards in your Illustrator file, they will be generated with different HTML classes for the size they are optimized for. We leveraged that for our own graphics, like the third runway piece. You can even force the artboard to work for multiple break points, by adding the size it's meant for after the colon (see screenshot before). This is what it looks like when you squeeze it to a mobile screen size: The next "technology" in this piece: Swiper. Presenting a topic in the form of "slides" (on the piece's mobile version) is something that I find very interesting and would like to try out someday. We don't often get the chance to do it in our newsroom, where print is still king, but at least we know that it's possible to integrate elegantly. In this case, when you're on a mobile screen, first of all, you are given the narrow width artboard that was created on Illustrator via ai2htm. For instance, this is the PNG background of the first "slide": http://graphics8.nytimes.com/newsgraphics/2015/05/15/isis-next/db6b19f7946afe46e0f01b83b7acb5575eab2aeb/isis-next-isis-control-map-hed.jpg Then, the Swiper script encloses your graphic div as a slide, so that touch, click and mousewheel events trigger going to the previous or next slide. That's incredibly simple, and yet I'm a bit impressed by it. The next thing that I like a lot from NYT maps (other media like WaPo do it too on breaking news) is the addition of relief. I know it's been done on print for many years, but I wish we had the ability to have it in our map library. As a smaller newsroom, lightly mechanized one, we often still trace our maps by hand. I'm going on a segway, but last week, I helped my colleague colour this map of congressional districts (for Chinese investments in the US). I learned on deadline that QGIS is a hassle to export from (and you can't export in vectorial formats that are stylized). The solution wasn't perfect and originally in the wrong projection. But print media approximations made things look smooth in the end (but I don't really like the feeling). So, again, when you have the tech ready to be used, your team can focus on doing journalism.
