How ai2html is being used
| Characteristic | Value |
|---|---|
| Sizes (width) |
294px, 540px, 740px and 1160px
|
responsiveness |
fixed |
The animated flooding maps of Wilmington, New Haven and New York are in fact groups of five ai2html graphics. The first is position: static, while the other four are position: absolute. Then, some slideshow code (with a setInterval()) cycles display between the ai2html graphics.
| Characteristic | Value |
|---|---|
| Sizes (width) |
294px, 540px
|
responsiveness |
fixed |
This example is for the three small Germany maps at the bottom, which are three separate AI files. It shows how you can just make two smaller artboards and use CSS to manipulate the size of the ai2html containers based on the viewport size (with CSS media queries).
When the viewport is wider than 880px (which is the copy width breakpoint), the three maps appear next to each other. The parent container for the three is given display: flex, and the children (the ai2html graphics) all have a width of 300px specified by CSS.
In the intermediate viewport size, below 880px, the parent container is no longer flex, and the ai2html graphics containers fill width at 100%, effectively showing the next artboard that can fill that space, which is the 540px one.
At smaller viewports again, when there’s not enough space for the 540px, the 294px will be seen again.
Other graphics in this page also make use of CSS to resize the ai2html containers (alongside d3-based graphics).
| Characteristic | Value |
|---|---|
| Sizes (width) |
300px, 600px, 768px and 800px
|
responsiveness |
fixed |
| Characteristic | Value |
|---|---|
| Sizes (width) |
600px and 300px
|
responsiveness |
fixed |
The last example shows what happens when the container becomes smaller than the smallest artboard. Here, the chart header isn’t inside the artboard, which is good practice, but leaves dangling text. Make sure to test most sizes... iPhone 5 is probably the smallest to support at 320px width. But the actual container size, due to margins, relative widths (92%), will probably bring down the minimal supported size.
Another thing to note on this example is that responsiveness is fixed. In cases of charts, it’s often preferable to use responsiveness: fixed in your ai2html-settings box in Illustrator if you require text to be the same size as elements on the background image (such as bars).
| Characteristic | Value |
|---|---|
| Sizes (width) | 600px |
responsiveness |
dynamic |
output |
multiple-files |
The actual artboard size is not known, but is probably 600px. The output is probably in multiple-files mode. This is when each artboard is written to separate files. You must then write custom layout HTML to arrange containers differently based on screen width or parent container width.
Additionally, responsiveness is set to dynamic. It means that the ai2html divs will scale to fill the container it is placed in. In this NYT graphic, at 720px screen width or larger, the top <html> tag adds a viewport-medium class, which applies a display: inline-block on the three map containers, making them appear side by side for larger screen sizes.
| Characteristic | Value |
|---|---|
| Sizes (width x height) |
12960x960px and 8100x600px
|
responsiveness |
fixed |
This is a cool one. It’s very very wide artboard, shown part by part using JavaScript / CSS. The base map is made in ai2html.
This is what the base image looks like:
| Characteristic | Value |
|---|---|
| Sizes (width) |
280px and 600px
|
responsiveness |
fixed |
| Characteristic | Value |
|---|---|
| Sizes (width) |
280px, 600px, 980px and 1200px
|
responsiveness |
fixed |
- https://www.washingtonpost.com/graphics/politics/2016-election/election-results-from-coast-to-coast/
| Characteristic | Value |
|---|---|
| Sizes (width) |
980px and 1180px
|
responsiveness |
fixed |
In this case, the creators focused on making a desktop version with the smallest artboard at minimal width of 980px. On smaller screens, the big map of the U.S. flipped on the side was replaced with screenshots. Again, they chose to use responsiveness: fixed.