We Love The Web - Blogorhea

Seriously, how hard can it be? A few wipes, fades, a line of text and a logo. Bish, bosh, bash: job done.

Aye, maybe: but you do underestimate the ability of people to complicate the simplest thing.

If you need to make a banner advert for a client then here's what you need to know.

What's an Ad management platform

Any website that publishes a lot of adverts will have an Ad management platform. These control how many times a banner is shown, when it's shown, tracks clickthroughs, handles where in the site the Ad is served and so on. We have to make a banner that can talk and listen to the Ad manager. This affects the deliverables in a number of ways and we'll ask a number of questions before we take on a job.

What's the clickTag?

When you click a flash advert, you get taken to the target page on your website. Under the hood, the flash movie shouts out 'I've been clicked', then the ad management platform steps in, looks up where it needs to take you, records the click and only then passes you on.

The clickTag is the 'hook' that the ad management platform uses to track whether or not the banner has been clicked and we need to include that in our banner movie. They differ slightly between ad platforms and the publisher will normally be able to give you/us that code fragment.

What's the maximum file size?

Flash banners are generally tiny, tiny files: 30-40Kb. This is because a magazine can easily serve a million pages a day, each with several ads on it. Serving big files turns into an expensive headache for publishers really quickly. They have strict rules, therefore, on how big your file can be.

Well, how do I get whizziness and video into my flash with that file size limit?

Since 30Kb is barely the size of a jpeg, it can be very challenging to do anything other than a few wipes and fades leading to a text-slogan. A lot of the time and effort we spend is often making the flash movie into a small enough file.

As a basic guide: We can do quite a lot with vector artwork in 30Kb.

The big things to avoid are:

• Too many fonts(more than 2)
• Too many photos (more than 2)

We've all seen adverts that contain video and other rich media though, so how are they done?

The basic file you send to the publishers is still only 30Kb, but it usually just contains code and a placeholder image. Once loaded, the banner then goes and fetches video, images etc. hosted on a web server elsewhere, pulling that into the banner for display.

In the early days of video banners that caused a real problem: all these big files were being loaded in at the same time and people weren't able to see the page they were trying to access as it took theee days to load. So, nowadays we have to do 'polite loading'. Polite loading waits until the rest of the page has finished loading, then asks for all its heavyweight files one after the other.

The only way that the banner knows that the rest of the page has finished loading is if the ad management platform tells it so. We have to include code (that the publisher will supply) in the banner that allows the banner and the ad management platform to 'talk'. Whether or not we can do polite loading should be checked with the publishers before you start on the creative.

How do we do those flash banners that pop-out over half the page?
First off, ask the publisher if they allow that on their site (the key term is 'expandables').

If they do support expandables then we go to the technical bit. These are made up of 2 separate flash movies that are both hosted by an ad management platform, ready to be served in that particular format. It knows to serve both and handles the switching between them.

As an aside: because they are separate movies, you can't pass information between the small and the large size, so you can't pass over what frame they were on or whether sound was off etc.

Skyscrapers, Leaderboards and Micro Bars: what size should I make my ad?
For the actual build, the publisher will have specs.

During meetings, you'll often find people in the industry referring loosely to the various formats by name and you may not know which is which. Here's a lookup list matching name to sizes helpful: http://www.iab.net/iab_products_and_industry_services/1421/1443/1452

What about iPhones: they don't use flash?

Not just iPhones, but anyone who doesn't have flash installed won't be able to see your ad. To get around this, it's normal to supply either a Jpeg file or animated Gif file as a 'flash alternative'. This also needs to come in under that 30kb file size liimit.

If it's a Jpeg then it can't be animated. Using a gif file, we can usually get two, sometimes three, page states out of it as long as they are simple. The main decider is the number of different colours we need to use as Gifs compress by posterising the image to reduce the number of colours. Photo's and gradients need a lot of colours to look nice, so think flat screens of colour and text when designing the alternative.

Allow for a small amount of artworking time to create a flash alternative.

How do you want the artwork then?

• A storyboard is essential - outlining the screenstates and transitions (we can work with you on creative effects and transitions).
• Crucial: let us see them before they go to the client due to the restrictions on file size etc.
• Illustrator files please: this is vector artwork.
• RGB, 72dpi, outlined fonts or fonts (if appropriately licensed).
• Flash alternative artwork
• Comic Sans font files will spontaneously combust on collision with our firewall.

What are Doubleclick and Eyeblaster?

These are Ad networks. They have management platforms used to serve a lot of Ads on more than one site. Creating accounts for these is usually aimed at bigger ad campaigns that sort of fall out of the scope of this how-to: that's more of a media buyer's job. We've worked on campaigns like this before. If you are planning an online media campaign big enough to need these systems then you'll also need digital media buyers.

And finally: those banners that show me what I was looking at on a shopping site last week: how do they work?

Debenhams (or whoever) have a media account with a big ad network who we will, for arguments sake, call 'Doubleblaster' or maybe 'Eyeclick'. As you browse the Debenhams site, it puts a cookie from on your machine with a unique number. Every time you look at a product, it calls up the Doubleblaster server and pushes 'person 395241564 looked at a Smeg fridge on the Debenhams site'. Thereafter, everytime you go to a site that serves Ads from Doubleblaster, they look up your cookie and what products you looked at, then serve info. about those products back to you as Ads.

The idea is that people often browse for something a few days before the buying decision and repeatedly jogging their memory leads to extra sales. It works, but it can be a bit disconcerting. 

As always, if you want more help or have specific questions, then phone 01422 847958 and ask for either Frank or Jules: we're happy to help.