Rants and Ramblings: random commentary about culture, media, politics, technology and whatnot.

before and after

Part of my job involves converting graphics from the paper for use on the Web. If a graphic “calls out” for interactivity — for example, it tells a compelling story, or, as designed, the graphic works in print but not on the screen — my team will do something special with it. Today offered an excellent example of this:

The morning paper ran a large map, with related charts, pinpointing the hometowns and affiliations of most of the 2,000 American soldiers that have died in Iraq. In the ¾ page it occupied in print, the graphic was informative and easy to read. On the Web site, that same graphic didn’t work quite as well. It was so large and detailed that, shrunk down to fit within the Web templates, the type was almost too small to read, not all of the graphic was visible at once and there was little contrast between the light-colored map and the white background.

In part because of the prominence of the story and its probable life-span on the site, we reworked the contents of the paper’s graphic into a format better suited to the online medium, with a pan-and-zoom version of the U.S. map, a larger call-out of the locally-relevant information and larger versions of the related charts and map.

To be sure, there’s even more we can do with the map, such as tying it to a database and more tightly integrating it with our Faces of the Fallen directory, but for an afternoon’s work, it serves as an instructive example of how to recognize and address some of the design challenges that pop up when using print graphics on the Web.