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
• 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
• Verify zip file size does not exceed IAB maximum allowable file size

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 --preview --platform	Build review page; ready to push to review ftp flag: open review page in browser flag: add zip files to review site; ready for distribution
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

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` or `deploy` 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
Centro uses Sizmek tags

Roadmap

• update to gulp 4

TODO

• zipfiles.js
  • minify image assets
• review -- declare specific folders to use when building a review site
  • allow wildcard filter to select folder names
• lint on watch: html, css, js
• cleanup: find unused assets (css, js, images)
• update controls to add features. See: mojs-player