GAP Tutorials – What is Included

What’s Included in GAP Files?

What’s included in the GAP Files?

HTML5 Banners – Ad Server (Google, DV360)

In our Global Assets, we provide everyone with the same 3-5 sizes of HTML5 banners, which are the most common sizes that show up on media plans; however, it is possible that your media plan/media agency requires HTML5 banners that aren’t in these sizes. The good news is that The Bannermen offers reduced rates on production for all GAP Program partners!
So if you require an HTML5 banner that isn’t listed here, go ahead and get in contact with your partnership programme rep, or we’ve got a support page on our website. You can request to talk to somebody at The Bannermen, and we can build these out for you.

Something else to note is that your HTML5 banners are likely built for the Google Ad Servers or DV360 (Ad servers are what media agencies use to put banners out on the web and Google and make up roughly 80% of the ads served on the internet). If the ad server your media agency requests files developed for a different ad server, for example they could say Sizmek, Flashtalking, or Adform, please reach out to your Bannermen rep or contact us on our website and we can convert them for you.

google display and video 360 logo

HTML5 Banners – Ad Server (Google, DV360)

In our Global Assets, we provide everyone with the same 3-5 sizes of HTML5 banners, which are the most common sizes that show up on media plans; however, It is possible that your media plan/media agency requires HTML5 banners that aren’t in these sizes. The good news is that The Bannermen offers reduced rates on production for all GAP Program partners. So if you require an HTML5 banner that isn’t listed here, go ahead and get in contact with your partnership programme Rep, or we’ve got a support page on our website, and you can request to talk to somebody at the Bannermen, and we can build these out for you.

Something else to note is that your HTML5 banners are likely built for the Google Ad Servers or DV360 (Ad servers are what media agencies use to put banners out on the web and Google and make up roughly 80% of the ads served on the internet). If the ad server your media agency is requesting you provide HTML5 files for is a different ad server then we have provided, for example, they could say Sizmek, Fashtalking, Ad form, please reach out to your Bannermen rep or contact us on our website and we can convert those for you.

google display and video 360 logo

HTML5 Banners – Zipped Files

spotting ZIP archive file name

HTML5 Banners – Zipped Files

There are two sets of every HTML5 Banner size: Zipped Files & Unzipped Files

  • Zipped Files
    • These can be deleted if you are updating assets for your local market, we will show you how to zip the updated files again in our tutorial for packaging files.
    • When you select the zip file, they should tell you what file size the banner is or “how heavy” the banner is. Most ad servers/media plans will have file size limits that are between 150KB and 300KB as per IAB standards. To be safe, we build to try to make banners at less than 150KB unless instructed otherwise by the central marketing team.
  • Non-Zipped Files
    • These are the files you will be updating when you are adjusting your GAP HTML5 banners for local markets.
spotting ZIP archive file name

HTML5 Banners – Backup Images

GAP Files also include a folder containing a single backup image (JPG) for every banner size of 40KB or less.

The ad server uses backup images as a substitute for the animated banner in rare cases where the browser displaying the ad does not have the necessary technical requirements to display an HTML5 banner. Although it’s a rare occurrence, it is essential that backup images be updated with the same language, products and legal adjustments you apply to the animated banners. If you need help updating your backup images, please see our tutorial.

example document in mac folder

HTML5 Banners – Backup Images

GAP Files also include a folder containing a single backup image (JPG) for every banner size of 40KB or less.

The ad server uses backup images as a substitute for the animated banner in rare cases where the browser displaying the ad does not have the necessary technical requirements to display an HTML5 banner. Although it’s a rare occurrence, it is essential that backup images be updated with the same language, products and legal adjustments you apply to the animated banners. If you need help updating your backup images, please see our tutorial.

example document in mac folder

HTML5 Banners – Code

  • Finally, when you look inside the folders for each banner for you will see that they all contain the same files in every folder:
    • an index HTML file
      • This is the HTML component which sets out the banners content
      • Double click the index.html file and it will open the banner in your browser
      • You want to review the banner every time you have replaced an asset, to be sure that the banner is still working and the updates are going as expected
      • If you double click the index.html file and it does not open, please see our FAQ page as there are a few things you might need to trouble shoot before you can review the banner locally
    • a custom JavaScript (JS) file which animates the units with code
    • a CSS file that sets out the styling for the banners
      • luckily you will not need to touch the JavaScript HTML5 or CSS files in order to adjust the banners. The only files that you’re going to need work with is the HTML5 file and the assets in the images folder.

 

For those of you who have never worked with HTML files before, you should be able to double click on the index.html file and it will open the banner in your browser.

example html code

HTML5 Banners – Code

  • Finally, when you look inside the folders for each banner for you will see that they all contain the same files in every folder
    • index HTML file
      • This is html component which sets out the banners content
      • Doubleclick the index.html file and it will open the banner in your browser.
      • You want to be sure to review the banner every time you have replaced an asset, to be sure that the banner is still working and the updates are going as expected.
      • If you double click the index.html file and it does not open, please see our FAQ page as there are a few things you might need to trouble shoot before you can review the banner locally.
    • custom JS file that’s a JavaScript file which animates the units with code and there’s a CSS file that sets out the styling the banners
      • luckily you will not need to touch the JavaScript HTML5 or CSS files in order to adjust the banners. the only files that you’re going to need work with is the HTML5 file and the assets in the images folder.

For those of you who have never worked with HTML files before, you should be able to double click on the index.html file and it will open the banner in your browser.

html code for banner ads

HTML5 Banners – Images

In the image folder, you have a combination of PNGs an JPGs.

  • All PNG images are exported on a transparent background, so that the images are the same size as a banner itself.
    • For example, copy 01_1 it only takes up a small amount of the screen but we’ve extracted the asset at the full size of the banner
    • Extracting our images/text in this way means that all assets can be easily updated while still achieving pixel perfect placement across different browsers without the assistance of a developer
    • We’ll go delve deeper into this when we talk about designs
an example html code format

HTML5 Banners – Images

In the image folder, you have a combination of PNGs an JPGs.

  • All PNG images are exported on a transparent background, so that the images are the same size as a banner itself.
    • For example, copy 01_1 it only takes up a small amount of the screen but we’ve extracted the asset at the full size of the banner
    • Extracting our images/text in this way means that all assets can be easily updated while still achieving pixel perfect placement across different browsers without the assistance of a developer
    • We’ll go delve deeper into this when we talk about designs
an example html code format

HTML5 Designs (PSDs)

At The Bannermen, we are absolute experts in online advertising and we know how to help your brand produce high performing online digital campaigns. So, the first step of our GAP program we work closely with the central brand team so that we understand your brand and the goals of each campaign. From there, we collaborate closely with a central creative team to develop a concept that will really stand out online.

screenshot of photoshop used for banner ads

HTML5 Designs (PSDs)

At The Bannermen, we are absolute experts in online advertising and we know how to help your brand produce high performing online digital campaigns. So, the first step of our GAP program we work closely with the central brand team so that we understand your brand and the goals of each campaign. From there, we collaborate closely with a central creative team to develop a concept that will really stand out online.

GAP files also include Photoshop designs for each HTML 5 banner. These are separate from the static design templates that we will review later.

You will need access to Photoshop. If you don’t have access to Photoshop, please contact your TBM rep, and they can provide access to Figma files in lieu.

Below is a quick walkthrough of the files.

  • The designs we have provided you are actually double the size of the banner. This is what’s called retina assets.
    • So, for example, if the banner is 300×250 pixels, the retina designs for that banner will be 600×500 pixels. This allows the banner to load in higher-resolution assets they look really sharp and clean on mobile and high-resolution screens.
  • These are the designs that we used to produce the assets for your banners and to make it extra easy for you to work with, we actually exported assets at the full size of the banner instead of exporting the asset at the size it is.
    • No developer resource is required to change assets. Once you extract the asset at the full banner size and drop it into the banner, it will sit exactly where it is in your design, so no fancy coding is required.
  • This also means if you need to add a different language, change the logo, or change the product, your designer can place them into the design and extracts them at the full size. This then replaces the similar-sized asset in the banner, and you should be good to go.
screenshot of photoshop used for banner ads

Static Designs

Although we can’t predict the future and there is no way for us to 100% predict the exact media plan and assets required for each market, we do know that digital advertising follows a common set of rules. For any campaign, on average, you’re going to need a landscape, portrait and square placement that’s either static or animated. And generally, most animated, digital placements are required as standard HTML5.

The GAP program is so successful because we use this general formula to create a set of HTML5 banners that cover the most common digital placements on the web along with a set of static designs that can easily be updated for any layout.

different image dimensions for ads

Static Designs

Lastly, let’s look at the static templates. In some cases, your media agency will say that they can’t accept HTML files. For these placements, they want static placements. A static is normally a JPEG that has no animation. These are really easy for designers to extract.

  • We’ve provided you with three layouts landscape, portrait and square.
    • Your designer can take these designs and very easily make them bigger or smaller to fit the exact dimensions that your media agency is asking for without having to worry about completely redesigning the whole campaign or making designs from scratch.
  • If your designer is having a hard time working with these files, get in touch, and we can walk your designer through the process of getting those statics produced.
  • If you don’t have resources available, we offer partnership rates, and we can create those statics for you.

We’ve got 24-hour support for all of our partners, so if you run into any trouble or if you need any extra help, you can contact your partnership rep. Alternatively, you can go to our website and fill out a request form, and a TBM team member will contact you as soon as possible!

different image dimensions for ads

Why Choose The Bannermen

we’re open 24 hours
no consultation fees
our experience delivers
we offer fixed prices
we focus on banners
we train your team

See some of our work

Johnnie Walker

Johnnie Walker our work Standard Media Adverts Exceptional and Unparalleled Johnnie Walker is one of those brands to whom we could pen a love letter. Their briefs range from elegant builds with subtle animation to chipper and quick frame transitions with bright colours, to builds that feature rich colours paired with smooth and captivating animation. [...]

Diet Coke

Diet Coke our work Standard Media Adverts Oh yes, we can What’s better than an animated banner ad? Probably nothing—except maybe a glittery animated banner ad! And that’s exactly the creative brief that Diet Coke came to us with. We were only too happy to help glitter-fy the screens of Diet Coke’s audience with these [...]

Heineken Social

Heineken Social UEFA Champions League our work Social Facebook Instagram Global campaign in 6 hours or less Heineken came to us in 2018 with some lofty social media goals as they wanted to make their brand synonymous with UEFA Champions League games. To do so, they proposed creating Instagram posts, Instagram Stories, YouTube videos, and [...]

Nike

Nike our work Rich Media Adverts Find your Unlimited Potential Nike approached us with a killer banner ad campaign concept—desktop-only video ads that featured various Nike athletes, almost no text aside from a tagline, and multiple product shots in action. Which is exactly what we created! Just try and tell us these aren’t the slickest [...]

Heineken Rich

Heineken our work Rich Media Adverts Raise a Heineken to Video & HTML5 Integration Heineken is one of our favourite brands to work with, both because they have such great creatives and because they have such high standards. For this rich media campaign, we were commissioned to seamlessly integrate HTML5 with video. A quick word [...]

Gatorade

Gatorade our work Standard Media Adverts Client Direct Gatorade is one of our most important direct-to-client relationships. While more and more companies are looking to in-house some or all of the production process, our professionalism and expertise really starts to shine. Deploying (on average) two or three campaigns a year, it was not financially viable [...]

EON

E.ON our work Rich Media Adverts Dynamic Media Programmatic Display Guardians of the Brand Galaxy E.ON is an international, privately owned energy supplier based in Essen, Germany, and has around 43,000 employees. As with any global powerhouse, E.ON delivers only the highest quality in everything they do, and digital display media is no exception. The [...]

McDonald’s Wraps

McDonald's Wraps our work Standard Media Adverts Campaign Consistency We know it feels like it's been a long time since McDonald's launched it's wraps, but when they did, we were right there with them! To get this campaign out the door, we produced a series of video and HTML5 units. This campaign was actually launched [...]

McDonald’s GTA

McDonald's GTA our work Rich Media Adverts Dynamic Media Parallax Plunge When McDonald's comes knocking at your door, you answer. So when we were brought in to help introduce the flavours of America to a British audience, we were thrilled! The beauty of these banners is found in their simplicity. As anyone who works with [...]

Destination BC

Destination BC our work Standard Media Ads Rich Media Ads Programmatic Ads Go Wilder Explore BC is an initiative to get BC residents to experience different aspects of their province during the fall, winter and spring months. It also includes a global ski campaign which help to advertise BC ski resorts, which account for almost [...]

Lotto Max

Lotto Max Millions our work Rich Media Adverts Dynamic Display Programmatic Display Retargeting Undercover This campaign for Lotto Max Millions was perhaps one of the most challenging projects we have undertaken. Take a minute to consider that every single banner you see on this page is in fact the exact same banner with minor adjustments [...]

Amazon Prime

Amazon Prime our work Standard Media Adverts Fall in Love with Amazon Prime This great set of banners was designed to accompany a campaign that saw shoppers falling in love not only with an Amazon product, but with the version of themselves who made the purchase. In the television spot associated with these banners, shoppers [...]

Evo

Evo our work Rich Media Adverts It's a BC Thing Evo is a carsharing service in the Greater Vancouver area, created by the British Columbia Automobile Association. When Evo approached us to re-create their visually stunning TV spot in HTML5 it was not a simple task because at the time, the digital sphere was undergoing [...]

Google Assistant

Google Assistant our work Standard Media Adverts The Tightest of Deadlines Working with an international powerhouse brand like Google is always exciting and this campaign for Google Assistant was nothing if not that. The biggest challenge facing our team on this project was the tight deadlines. The client had less than a week to produce [...]

Bulb

Bulb our work Standard Media Adverts Greener. Brighter. Better. Working with Bulb was simply electric! Pun intended! But seriously, getting this campaign in and out the door was a lot of fun. Firstly, Bulb has such an undeniably cool style and we were very excited to bring the hand drawing to life. As with most [...]

Get in touch

We’re ready to take your animations to the highest heights! From amped up illustrations to subtle, elegant pans and fades, we’re here to help make your animation dreams a reality.

Contact us