How to brainstorm for an HTML5 ad unit

Brainstorming for an HTML5 ad unit would be much easier if every desktop and mobile user had the newest device, used the same browser, connected to broadband speed internet, and there was no IAB to govern the file size of that ad unit. Device fragmentation makes the HTML5 conceptualization process a little more difficult with the variety of things that need to be accounted for.

Notice that I wrote, “a little more difficult”. Actually, the brainstorming phase for ad units that use HTML5 haven’t changed much from the earlier days of Flash.

When a creative group (usually a copywriter and designer) brainstorms for Flash ad units they ideate within the boundaries of what Flash is capable of doing. These limitations help keep the ideas grounded in what is technically feasible within the media buy.

In a perfect world, a HTML5 developer or a Creative Technologist, would be in the room with the group during the brainstorming session. The developer can keep the group working within the realm of what’s possible in HTML5 and will be able to give unique input from a different perspective. This will also ensure that your team doesn’t spend time on an idea that won’t be possible.

To stay grounded in the real world, keep these considerations in mind throughout the ideation process:

1. Is it technically possible?

Developer Technical Skills
Stay within the realm of possibility for your developers’ skill level. HTML5 development requires knowledge of CSS, JavaScript, and HTML. It will also require a solid understanding of motion design to ensure that animations and interactions match the creative expectations.

Device Processor Speed
Some devices will be too slow to draw heavy animations. Make sure that the animation required is something that can work on even the slowest device. If the target audience is tech/gamers, it is okay to infer that they have a fast processor capable of doing faster animations.

Browser
What browsers will the ad run on? If the target audience is office workers there is a strong possibility that an older version of IE might be used. If that is the case, the ads technology will be limited to what older versions of IE can do.

Look at the lowest common denominator for both browser and device to see what technology is available. This knowledge will help determine what special effect will look the best in an ad.

2. Is the Ad Possible within Ad Serving Restrictions?

The IAB specs for Flash units are very close to the HTML5 specs so think about the ad the way you normally would for Flash but pay special attention to the file size. HTML5 ad file size should be expected to be larger than what has been defined for traditional creative. Build within IAB specifications so the ad does not get rejected by the publisher but also understand that data can be loaded politely without needing to change the media plan.

These things affect file size:

Images – Image resolution will need to be doubled for Retina and HD displays.

Fonts – Font libraries will count against files size.

Additional Libraries – Animation libraries add file size and are usually around 10k.

Will the ad be effective in all spaces that it runs?

Best Experience for User Device
What is the user doing on the device when they get served the ad unit? Each activity will require the user to have a different level of attentiveness. For instance, a user on a game website is more likely to engage with an ad unit versus a user who is watching videos.

Because of the device screen size, a user checking the news on a mobile device might only see a 300×250 ad unit for a few seconds while a desktop user might see the whole animation.

300×250 ad unit on both desktop and mobile. Although there is enough room for the whole ad to show on the mobile device, chances are that only a portion will be visible while the user reads the story.

Call to actions will need to be tailored to the device. Touch screens traditionally require a “touch or tap” CTA while the desktop CTA will be “click or rollover”.

HTML5 Ad Types
Creating ads in HTML5 will allow your ad to be served across both desktop and mobile but the only ad unit that will run on both is the 300×250 size. 160×600 and 728×90 ads don’t work well in the mobile space but are served on publisher sites that are not mobile optimized.

in-content – the traditional ad placement in designated ad slots in or around the site content.

interstitial – the ad will be displayed after the users clicks to a page on the website or embedded within an image gallery.

overlay – the ad will overlay the website for a few seconds when the user first visits the website.

static top or bottom – usually a 320×50 pixel ad unit that lives above or below the site content.

3. Pull developers in ASAP for a feasibility check.

The suggestions above are merely that. Even if you do have some development expertise, don’t nix an idea because you don’t think it will work. Describe what you are trying to do without getting too technical and ask a developer how to make it happen. He or she might be able to come up with a solution for something you might think is impossible. If you don’t have a developer on staff, don’t be shy – ask your ad server to loan you someone. Your ad server wants you to succeed and will be happy to give you input at any point in the conceptualization process. Creating a prototype in the earlier stages will save you time in the long-run.

Bottom line:Conceptualize your ads the same way that you’ve been doing it for Flash but keep the checklist above in mind to account for HTML5 technology.

Bring an in-house developer or creative technologist into your brainstorms to keep your team grounded and to offer ideas. If you don’t have someone in house to brainstorm with, request a developer for your from your ad-server.