Canadian Business's online version of "The Empire Strikes Back", its story on Rogers Media's $200 million investment in the Toronto Blue Jays, sports a long-form layout months in the making.

The mix of in-depth, timely Jays content combined with a fresh layout featuring parallax web design resulted in encouraging numbers. According to JP Fozo, general manager of Current Affairs & Business at Rogers-owned Canadian Business, Maclean's and Moneysense, the story pulled in five times the traffic of a typical top Canadian Business article. "This is an extremely high performing piece for our site," he said.


Near the end of last year, the mag's team began talking about creating an immersive online experience built on great design. "We really wanted to take the web, specifically desktop and tablets, and make them cool again," Fozo said. The first step was finding the right story to launch with, something that would warrant lush imagery and multimedia extras.

Another story was originally slotted to be first at bat, but with timeline concerns and the excitement building around this year's team roster, the Jays piece emerged as the right choice. And, as Fozo notes, Canadian Business and the Jays share an owner in Rogers, which also owns Sportsnet; the sports channel/magazine has been all over the Jays and proved to be a valuable collaborator, lending press conference footage for the story's multimedia features and making itself available for consultation.

Also fleshing out the piece are audio clips, infographics, slideshows done up like trading cards, and "widescreen" photographs. A double-line AW Conqueror font, similar to the typeface associated with the Jays, was used for the headline, which digital art director David Dela Cruz said creates a nostalgic feeling. (Scroll to the bottom of the story to see a full list of the creators involved.)

Fozo cites "Snow Fall", a 2012 story in The New York Times, and the website for the Milwaukee police department as examples of parallax, the type of web scrolling design that allowed the story's photos to move at a slower rate than its headline and pull quotes.

"We wanted to try it but also keep it simple," Fozo said. At one point the layout was going to feature a baseball moving throughout the story, tying in to the knuckleball motif writer Tim Shufelt used in the article, but testing the design across platforms, browsers, systems and devices proved difficult. "It was way more complicated than anyone anticipated," Fozo said.

Even now, there are design elements that can't be seen by all. The parallax pull quotes, for example, don't show up on certain browsers or lower-res monitors because the team opted to remove them rather than not have them look perfect. "We just told those browsers not to use parallax," Fozo explained.

The Canadian Business site underwent a responsive redesign last year with a mobile-first approach, but Fozo said this story aims to look best on bigger monitors.

Readers can expect similar long-form layouts in the future, with tweaks as the team experiments with multimedia elements and adjusts layouts for different stories. "We didn't want to do this for the sake of it," Fozo said. "We wanted to really be innovative and learn from this and start something that we're going to continue to build on."