Skip to content

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

Notifications You must be signed in to change notification settings

misega/HTML5-Banners

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

65 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

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