Designing Web Banner Ads?

eclipse525 said:

Hello!
728x90px ad, no larger than 80kb, .jpg or .gif format
300x100px ad, no larger than 80kb, .jpg or .gif format

I would love some feedback as to best practices. Thank you in advance.

~Erick

Click to expand...

As to those specific specs:

They don't call them requirements for nothing. You need to create for this client banners that match those specs - The GIF format only supports a palette with 256 colors while JPG's palette supports 16 million colors and transparency which is how you determine which to use based on the banner graphics. The size constraints are common and are likely intended to fit within wells or columns based on the site template or stylesheet design. Be sure to use software that OPTIMIZES when you save for web, so that the file size meets the client specs. I would be using Adobe Photoshop which has fantastic optimization and compression capabilities not to mention design tools, but to each their own. If you get stuck, come back here for help or hire a front end person who specializes in this and is familiar with graphic design, working with layers, web optimization and JPG/GIF formats.

Now with that said, generally speaking as everyone you ask will offer their opinion, Flash should no longer be used on any site as many of the mobile devices don't support it and it requires a plugin that must be maintained. It also is not necessary to do things like dynamically display random banners, enable fancy rotating ads, track hits or analytics, etc. which can all be done client side (i.e. jQuery) or server side (PHP/Ajax or even SSI via Apache) and still be widely supported. There are others out there who will disagree with this, but Flash is slowly becoming a deprecated format as it loses support in the wireless market.

Banner size does depend on the layout but common sizes and formats are:

468x60 - full
728x90 - leaderboard
336x280 - square

PNG is very popular with graphic designers as alpha transparency is easy to achive (and finally, well supported by MSIE 7+) as is compression. Otherwise JPG followed by GIF or BMP would come next depending on the image attributes (transparency, number of colors, etc.)

This is a helpful site for both image and Flash common banner formats:
http://designerstoolbox.com/designresources/banners/

I want to repeat this is just one point of view and the advice is based on modern browser engines, displays and W3C recommendations. Special note that Flash is not deprecated, it is just in disfavor by many professional designers for the reasons I stated -- but of course, the client has a say too!

Great advice from SrWebDeveloper, as always.

Thought I'd just chip in a wee bit on animated GIFs, and how you can keep those kilobytes down. One great trick is to assess the GIF when you've finished creating it and remove any unnecessary frames. I tend to always build my banners in Flash, that means that when the client requests (and they always do) a Flash version I have that ready to go, and then I export the file as an animated GIF.

You can get a good overview of the Frames used in the animation in either Fireworks or Photoshop. If you find that frames are repeating, remove them. You can set a delay on each frame to make the animation longer and cover this. Always review your animation before your start considering sacrificing image quality to meet that kilobyte quota.

e.g. If you've got a fade in and then the subject matter stays in frame for a few seconds you don't need a whole lot of frames with the same image, that's going to cost you kilobytes. You remove all the identical frames and set a pause on the remaining frame which will achieve the same result.

eclipse525 said:

Unless I'm missing something. For something more complex, I will consider creating it within Flash.

Click to expand...

Flash mobile is no longer maintained by Adobe ( late 2011 ) and should not be used for any future development.

Just in case you missed it.

eclipse525 said:

BTW, I'm always open to more tips, so anyone please feel free to expand on this subject.


~Erick

Click to expand...

Is animation a requirement of your brief? If not, I'd recommend a simple jpg.

A well designed static advert can be far more effective than an animated gif, with your message diluted between frames and a limited amount of available colours. To make a gif worthwhile/interesting you need to get a lot into it which will no doubt push it above your file size limitations.

There's also the attention span of the user to consider. A glance at an advert is often all you can hope for and to risk having your marketing message on a not-current frame is something you need to carefully consider.

Though if you only want to add the slightest movement to catch someone's eye, the toss up is mainly movement vs better colours.

All just my opinion though, of course