I’ve been getting some work lately from designers who are wholly familiar with the world of print design but who, being less familiar with the constraints of web designing and development are leaping into the web pool with mixed results. It seemed as though it might be useful to outline a couple of the differences and thereby helping me, and them, get better results from the money they’re spending getting a developer involved in making their designs work online. There are a bunch of things to consider across all the web applications, so this may work itself into a number of posts. Let’s start with
Animated banner ads for web.
Getting a return on your investment in web advertising depends on good design, the competition for attention on a web page is fierce as more and more web users become increasingly blind to web advertising, or worse still, block ads completely.
I’m usually asked to animate banners provided by clients and quality of the images provided varies widely. Some are great, succinct and clear. Others, less so and frankly I’m not sufficiently marketing knowledgeable to advise on what works or what doesn’t. What I can comment on is the quality of files supplied – and the variation on that differs wildly too.
What’s important for designers to remember is that web is different than print and the tools used may need to be different. For example, wherein one may use InDesign (ID) for laying out magazine spreads with high resolution for print, doing so for web would be counter productive – the file size and dimensions need too change for a start. Laying out an ad in ID will export images that are too big and when their dimensions are reduced so degrades the quality of the final image. ID is not made for web layouts, so if you’re transitioning into web ad design/layout I strongly suggest you get friendly with Photoshop or Fireworks.
Set the File Dimensions.
There is a lot of talk about resolution for images – most people working in design/web/photography will usually have in mind that print resolution is 300 dpi and web is 72 (or 96) dpi. This is true – but for web designing the most important issue is the actual dimension of the image. Regardless of the dpi of a file the browser will return the image to the end user in the dimension set in the code.
Where image quality is lost is when an image is created at one size, such as 800×600 and then resized to fit in a webpage. The data discarded to reduce the size of the image can cause degradation in the quality of the photo but is apparent where there is text overlaid. So it is recommended that you design for the finished size, and for most sites who offer web advertising slots there are a number of standard sizes for image ads.
The Interactive Advertising Bureau (IAB) is a great resource of information and standards for interactive advertising
Rectangles and Pop-Ups
| Recommended Maximum Initial Download Fileweight |
Recommended
|
|
| 300 x 250 IMU – (Medium Rectangle) | 40k | :15 |
| 250 x 250 IMU – (Square Pop-Up) | 40k | :15 |
| 240 x 400 IMU – (Vertical Rectangle) | 40k | :15 |
| 336 x 280 IMU – (Large Rectangle) | 40k | :15 |
| 180 x 150 IMU – (Rectangle) | 40k | :15 |
| 300×100 IMU – (3:1 Rectangle) | 40k | :15 |
| 720×300 IMU – (Pop-Under) | 40k | :15 |
Banners and Buttons
| 468 x 60 IMU – (Full Banner) | 40k | :15 |
| 234 x 60 IMU – (Half Banner) | 30k | :15 |
| 88 x 31 IMU – (Micro Bar) | 10k | :15 |
| 120 x 90 IMU – (Button 1) | 20k | :15 |
| 120 x 60 IMU – (Button 2) | 20k | :15 |
| 120 x 240 IMU – (Vertical Banner) | 30k | :15 |
| 125 x 125 IMU – (Square Button) | 30k | :15 |
| 728 x 90 IMU – (Leaderboard) | 40k | :15 |
Skyscrapers
| 160 x 600 IMU – (Wide Skyscraper) | 40k | :15 |
| 120 x 600 IMU – (Skyscraper) | 40k | :15 |
| 300 x 600 IMU – (Half Page Ad) | 40k | :15 |
ADDITIONAL NOTE:
- :15 animation includes multiple loops
See also here for more info
So having set up your photoshop file with the appropriate dimensions go head and lay out your ad. In the case of a simple slideshow of images, make use of Photoshop’s layer features and lay out each ‘slide’ in a separate layer (or layer sets) then when you hand off your file to the developer you merely need to give them the .psd and a document with the storyboard and they’ll be set to turn out your animation for you.
