dbox / html5-banners

HTML5 animated banner boilerplate. Built for Doubleclick & Sizmek ad management platforms.

HTML5 Banner Boilerplate

---

Project boilerplate for creating HTML5 animated banners with GSAP.

Download Banner Boilerplate

• Watch a specific banner folder for changes and update browser during development
• Compile CSS variables and automatically adds vendor prefixes via POSTCSS
• Lint HTML, CSS, and JS files to maintain coding standards
• Verify each banner has a fallback image and is the appropriate size
• Generate review site
• Update all banners to platform-specific distribution (e.g. DoubleClick, Sizmek)
• Minify files and assets then create directory of zip files for distribution

###In This Documentation

1. Getting Started
2. File Structure
3. Resources
4. References

Getting Started

Dependencies

Make sure these are installed first.

• Node.js
• Gulp sudo npm install -g gulp

Quick Start

1. Open banners folder.
2. Inside, rename _banner-template with the banner size (e.g. 300x250)
3. In bash/terminal/command line, cd into your project directory.
4. Run npm install to install required files.
5. When it's done installing, run one of the tasks to get going:

Tasks
gulp	Will show all available tasks
gulp watch --folder --controls	Watch files for changes and update browser flag: folder to watch for file changes flag: controls to play/pause & scrub timeline
gulp review	Build review page; ready to push to review ftp
gulp deploy --platform	Compress files and zip folders for distribution flag: ad platform distribution (doubleclick,sizmek)

Update package.json

• name: Project Code (format: YY-aaa-9999). Information used throughout the build/review/deploy process
  • YY: 2-digit Year
  • aaa: 3-digit Client Code
  • 9999: 4-digit Job Code
• title: Project Title. Added to the review site
• description: Brief description of project. Added to the review site

File Structure

.
├── README.md
├── package.json                # list of npm packages and some configurations
├── gulp.js                     # build configuration
├── node_modules/               # will be created with `npm install`
└─┬ banners/                   # directory to contain all banner sizes
  ├─┬ _banner-support-files/
  │ ├─┬ ad-platform/            # collection of platform-specific documentation
  │ │ ├── doubleclick.md        # documentation; script blocks will be injected via `deploy` task
  │ │ ├── sizmek.md             # documentation; script blocks will be injected via `deploy` task
  │ │ └── EBLoader.js           # required Sizmek script; must load first before ad is displayed
  │ └─┬ controls/
  │   ├── _banners.js           # installs required development assets
  │   ├── banner-controls.js    # installs/instantiates control bar
  │   └── banner-controls.css   # styles for control bar
  └─┬ _banner-template/         # initial banner setup; duplicate to customize
    ├── index.html              # The ad file, with the ad configuration and init code
    ├── fallback.jpg            # required; Formats accepted: JPG, GIF, PNG
    └─┬ assets/
      ├─┬ css/
      │ ├── style.css           # compiled styles; will be created with `watch`, `review`, or `deploy` tasks
      │ ├── source.css          # main styles; compiled by postcss into `style.css`
      │ └── fonts/              # local font files (optional)
      ├─┬ img/                  # graphic files: jpg, gif, png, or svg
      │ └── keyframes/          # keyframe graphics from PSD for layout/placement; removed via `review` task
      └─┬ js/
        └── script.js           # customized banner animation script

Resources

Greensock/GSAP
Greensock 101 - Greensock Tutorials for Beginners
Greensock Cheat Sheet PDF

References

IAB.com
iab.com/guidelines
iab.com - HTML5 for Digital Advertising 2.0 PDF
iab.com - Display Format Guidelines PDF

DoubleClick
DoubleClick Starter Files
DoubleClick Campaign Manager (DCM) HTML5 Validator
DoubleClick CDN/Shared Libraries
Rich Media Gallery

Sizmek
Sizmek Banner Formats
Building Ads / Creating HTML5 Banners
Sizmek CDN/Shared Libraries

Roadmap

• lint on watch: html, css, js
• minify on build: html, css, js
• optimize on build: image assets (jpg, gif, svg)
• move tasks into a gulp subfolder and separate files
• update to gulp 4