“This holiday, when you a buy a coffee from participating Starbucks RED exclusive locations we’ll give $0.05 to the global fund to help saves lives in Africa” – Starbucks

Starbucks has joined the product RED group, and I helped them promote that message by producing a dozen banners.

Although I prefer to do large scale applications, I’m not above doing monkey work…I mean banners. Up until this point, I had managed to avoid banners beyond some consulting, ensuring that the designers were implementing the tracking code correctly.

For the most part, I find banner work to be boring and repetitive. Its too easy. Unlike applications or experience sites, there are no lows and highs; no big eureka moments; its relatively flat work. This project was no exception. Fortunately, I had a generous amount of time ( 1 week ) to produce the set and they were promoting a good cause.

I did run into a few technical issues; specifically our main constraint was the size limitation. We were told that every banner could be no larger than 50KB whether its 300×250 or 640×480. Obviously the later has a lot more pixels so that we have to apply much more compression to get it under 50 drastically affecting the overall quality. The ad hosting company should have some sliding scale based on dimensions not just a 50KB across the board. In the end, we simply asked for more space for the larger banners and they graciously granted us 100KB for big banners which turned out to be plenty of room.

In order to reach 50KB, a good tactic is to go through the images in the library and set each one’s compression setting individually. For instance, I crunched the rich red pattern is the background from 30KB down to 1.6KB from 100% to 25%. I then set all the images went the photos and experimented with their settings; some I set to 40% while some were passable at 20% without major distortion.

I had another major problem with the graphics. After slicing and dicing the graphics in Photoshop, I imported them in Flash and discovered that all that colours had shifted; turning brighter and flatter. I googled “colour shift flash” and found a great article, entitled Mysterious Save for web colour shift, addressing this issue. Sure enough, as the article described, the photoshop assets I was using had a sRGB profile that Flash does not support.

After the first two days of doing banners, I started to feel the banner burn and got a little fatigued. I’m fast but I’m not Ed Cabral fast. I did use the full week which was a decent amount of time for this set and there were client changes throughout the week.

I found it helpful to test each banner in a html wrapper to ensure that the clicktag worked accordingly and picked up the external link through the FlashVars. If you are using the html that CS3 generates, it is important to add the FlashVars line to the AC_FLRunContent block like so:


'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'vodaphone_hyves',
'FlashVars', 'clickTAG=http://www.google.ca',
'salign', ''
); //end AC code


It won’t work if you only add it to the param and embed FlashVars tags. This way you can ensure that the Flash is picking up the clickTAG url.

Besides the clicktag code, there was practically no programming involved. I did all the animation with timeline tweening. Only in that last banner sample did I need some code to stop all the photos from sliding using a 15 second timer so that it rests on a static image and does not distract from the main piece on the host page.

Along with sending the flash swfs to the hosting company, we were also asked to provide backup static gifs. Its easy to check off the the publish gif in the publishing settings. But what if you want to the gif to be a snap shot of a certain frame. You can simply drag the playhead to the frame that you wish to capture [in my case the last frame], and hit publish. Unfortunately this won’t work through Flash project file and you have to do a GIF preview individually. Ideally, I’d like to go into the publish GIF settings and tell it what frame to capture.

After doing these banners, I wonder how I could do them in less time with less effort. There’s got to be a better way. Why isn’t there a banner making machine that automagically produces the various sizes based on a set of animation and composition rules? Perhaps If I had an extra week or three; it would have certainly spiced up the project.

Here is a sample of my final deliverable:

300×600 (weight: 42 KB time: 14.6 secs )
160×600 – Espresso Truffle (weight: 24 KB time: 14.4 secs )
425×600 (weight: 61 KB time: 14.5 secs)

Web and tv are blurring every day. Its neat how banners are now called “channels”. They are definitely commercials, expect banners aren’t sandwiched between sitcom meat, they exist simultaneously (parasitically?!) with their host.

Being both a consumer and producer of web content, I feel proud to have contributed banners that carry a positive message and don’t hammer you over the head with it by looping through it or shouting out at you with bad design. These banners were in great taste and I’ll give credit to Mauricio Pommella for his rich design.

As far as web marketing goes, this is a rather feel good campaign and project to have worked on. At one point when I relatively new to Blast, I think I made the audacious claim that we didn’t do banners because I didn’t see anyone working on them for some time. I’m actually glad that we do banners. Its a lucrative industry with lots of poor examples where we can make a major impact with a good design sensibility. I just don’t want to do them all the time. Well…only if I can help save lives.

some random links:

New York Times article on Jane Goodall
Ted Talk: What separates us from the apes? – Jane Goodall (2002)
the banner blog