View on GitHub

Turnstyle Advertising Templates

Starter templates for an amazing advertising experience

Download this project as a .zip file

Overview

GTxcel provides a number of out of the box templates so customers can easily create rich advertisements for their Turnstyle editions. Below is a list of available templates and some instructions on how to leverage them to create great experiences for your readers and advertisers.

The Advertisements

Responsive Image Swap

Many advertisers aren’t quite ready to jump into the world of responsive advertising quite yet. This template allows advertisers to produce a responsive-like experience using a few static assets. A screen-size appropriate image is displayed to all users even if the advertisement itself isn't responsive. This template displays one of three images depending on the size and orientation of the device. Images are centered, scaled (down) and fit to the device.

Demo*

* Resize browser to see how the ad will display on different screen sizes

Responsive Image Swap with Video

This template creates the same responsive-like experience using a few static assets and allows advertisers to include a video. Advertisers should be instructed to leave a placement for a 16:9 video at the landscape and portrait sizes while on the phone will display a full background image with a centered play button on top.

Demo*

* Resize browser to see how the ad will display on different screen sizes

Single Scaling Image

Simplest of the simple - this template lets you take an advertiser take a single static image (likely produced for print) and scale it to the size of the screen. This is the minimum buyin for advertisers.

Demo*

* Resize browser to see how the ad will display on different screen sizes

Single Scaling Image with Video

Copy of the simple scaling image template that includes a video overlay.

Demo*

* Resize browser to see how the ad will display on different screen sizes

How to use these templates

  1. Download and unzip the ad templates.
  2. Each folder in the zip file contains one template with a README file with instructions, the template html file(s), and all the required assets such as images, css and javascript files.
  3. Modify the contents of the ad you'd like to use following the instructions. Feel free to make additional modifications as you see fit. These templates can be used as a starting point to make more customized ads.
  4. Preview your ads in Chrome or Safari.
  5. Once you are happy with your ad, zip up the directory and uploaded it via the Publisher Dashboard for use in Turnstyle editions.
  6. Be sure to preview the ad in our staging environment and on actual devices. There can be differences in how the ads behave in apps vs how they behave in a browser.
  7. If everything looks good, deliver your Turnstyle edition live!