Lightbox

Summary

The lightbox was a prototype responsive ad format that streamlined the workflow of building and launching native HTML5 advertising. Future Publishing successfully transitioned flagship technology brand, TechRadar, to a responsive layout, but the ad strategy was still dependent on traditional Flash-based media. The lightbox was an answer that applied the same methods and principles of large responsive websites to HTML5 display advertising. Clients included LG, Yamaha, and UK-based mobile 4G provider, EE.

Challenge

TechRadar’s advertising implementation worked by swapping out ad creative at mobile, tablet, and desktop breakpoints. Prior to the Lightbox, this meant an HTML5 ad required duplicating the design three times - one for each breakpoint. Each size had to go through client design approvals, and each had to be loaded separately by our advertising operations team. That resulted in a workflow that required input from three different groups on three separate creative items.

Result

I gutted Bootstrap and used only selected pieces of the grid. This allowed me to take a mobile-first approach, reduce the file size, and still maintain the familiar Boostrap syntax for other designers. It meant the three separate designs could be combined into one responsive HTML5 ad, and clients only had to review one item. Advertising operations only needed a single tag for all mobile, tablet, and desktop sizes. And by leveraging Webpack, the same front end build tool used by TechRadar, it enabled the Lightbox to be automatically compressed and deployed to TechRadar’s content delivery network with a single Git command.

process

To improve client approval efficiency, I created a preview template that showed all design sizes within one view.