Lightbox

Summary

The lightbox was a prototype responsive ad format that streamlined the workflow of building and launching native HTML5 advertising. The lightbox 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

The traditional advertising implementation swapped out ad creative at mobile, tablet, and desktop breakpoints. This meant an HTML5 ad required duplicating a design for each breakpoint. Each size had to go through client design approvals, and each had to be loaded separately by our advertising operations team. The result was a workflow that required input from three different groups on three separate creative items.

Result

Adopting only Bootstrap's grid reduced 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 as a build tool, it enabled the Lightbox to be automatically compressed and deployed to a 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.