How hotspot interactives are made at The Globe and Mail

Part of my job as multimedia editor involves trying to take nice big newspaper packages and make them look good on a computer, tablet and mobile screen.

Not always the easiest thing when you consider production issues that daily papers sometimes face, i.e.; big sweeping changes to layout and design or even wholesale subject changes.

The Globe runs something called Folio every day – a two-page spread in the A section that's meant to showcase one of the day's major stories, a graphically impressive story or a visually appealing feature. It's a premium spot in the paper, coveted by reporters, editors and artists as a great platform on which to display their work.

Trouble is, big two-page spreads don't look all that great on a small screen. So, part of what I do is try and figure out how to fix that.

The Folio page is discussed at the 10am morning meeting, and on a good day the topic is pitched and approved. When that happens, life is good. Graphics and photo get a head start on gathering or making visual assets and I get an idea whether online will need special treatment.

For the "Life inside the space station" Folio, we knew ahead of time that Chris Hadfield was taking over command of the station and had the opportunity to devote some good graphics time. The problem for me – a two-page graphic looks really poor online, especially if there's text on the graphic; readers can hardly see the writing let alone get anything out of the experience.

Here's what the Folio looked like in the paper.

For the online version, I spoke with the senior graphic designer Tonia Cowan, who created the ISS graphic, and graphics designer Murat Yukselir and we came up with a more box-like design that fits on a desktop and tablet screen much nicer than the horizontal two-page spread.

Meantime, I started building the hotspot graphic. Senior digital designer Chris Manza built the hotspot template before Christmas and it operates on a pretty basic principle: You use a 940px-wide static image and plot X and Y vectors on the image for the hotspot tooltips. The tooltip boxes are 400px wide and can display text, images and embedded video – any HTML, in fact. I've used the template a bunch of times in the past, including ones based on Folio packages that display large maps and cover special event such as the State of the Union.

The text, images and video HTML is all written into a Google Docs spreadsheet that's linked to an interactive article type created in our online publication tool (called Escenic Content Engine, which is sold by a company called Vizrt). Anything changed or added to the spreadsheet automatically shows up in the preview page, which means tweaks, additions and edits can be monitored and evaluated immediately.

Armed with the 940px-wide web graphic, I plotted the hotspots on the image. To do this, I load the image into Adobe Photoshop and use an info panel that tracks the X and Y position of the cursor as I move it over the image. In the spreadsheet, I enter a title for each hotspot, add the X and Y locations in separate columns and then fill in the tooltip HTML – in this case just text.

Because the graphic loses all of its allure when it's viewed on a smartphone, I used a mobile override field in the interactive article so that anyone reading on a phone would just see the text from the tooltips, divided by bold subheads. Email the interactive URL to yourself and open it on your phone and you'll see what I mean.

Once all of the text was added to the spreadsheet, it's just a matter of finding a thumbnail image and adding related articles (the "More related to this story" you see at the bottom).

That's about it – surprisingly simple, though like most things can be accomplished immeasurably easier when there's enough prep time to devote to the task.

Thanks for reading and feedback welcome.