Skip to main content

The Globe and Mail

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.

Story continues below advertisement

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.

Story continues below advertisement

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.

Report an error Licensing Options
About the Author

Michael Snider started working at the Globe and Mail in December, 2005. From fall 2006 until September 2011, he edited globetechnology.com, the Globe and Mail's online tech section. Previously, Michael Snider worked at Maclean's, The Toronto Star and the Korea Times. More

Comments

The Globe invites you to share your views. Please stay on topic and be respectful to everyone. For more information on our commenting policies and how our community-based moderation works, please read our Community Guidelines and our Terms and Conditions.

We’ve made some technical updates to our commenting software. If you are experiencing any issues posting comments, simply log out and log back in.

Discussion loading… ✨

Combined Shape Created with Sketch.

Combined Shape Created with Sketch.

Thank you!

You are now subscribed to the newsletter at

You can unsubscribe from this newsletter or Globe promotions at any time by clicking the link at the bottom of the newsletter, or by emailing us at privacy@globeandmail.com.