How ai2html is being used
| Characteristic | Value |
|---|---|
| Sizes (width) |
300px, 600px, 768px and 800px
|
responsiveness |
fixed |
| 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.
wide
mobile
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 |
600px
| Characteristic | Value |
|---|---|
| Sizes (width) |
280px, 600px, 980px and 1200px
|
responsiveness |
fixed |
1200px
280px
- https://www.washingtonpost.com/graphics/politics/2016-election/election-results-from-coast-to-coast/
| Characteristic | Value |
|---|---|
| Sizes (width) | ``980pxand1180px` |
responsiveness |
fixed |
wide
mobile (non-ai2html)
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.