• Home
  • About
  • Now
  • Code Snippets
  • Blog
    • WordPress
    • Genesis Theme Framework
    • Tutorials
    • Web Development
    • Geeking Out
    • Blogging Resources
  • Contact
  • Home
  • My Story
  • Now
  • Code Snippets
  • Blog
  • Contact

The Web Princess

WordPress & Genesis Theme Development

The Web Princess

Flash Banners.

January 21, 2010 by Dee Teal

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
Animation
Length
(Seconds)

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.

 

About Dee Teal

Dee Teal is a Scrum Master, Project Manager, and Team leader with a history as a developer (mostly front-end and using the Genesis Theme Framework) and WordPress trainer who is crazy active in the WordPress community.

She's run large scale WordPress events, and small ones, and if you ask someone about WordPress in Australia, you won't usually be more than one degree of separation from someone who knows her.
 
You can also find her here...
LinkedIn | Twitter

FREE Website Planner

  • Become your web designer's favourite client

Website Sign Ups

Become your Web Designer's favourite client by preparing for your web project using the Web Princess' Interactive Website Planner

  • This field is for validation purposes and should be left unchanged.

Tweet

  • I just solved pack Snake in WordBrain - as number 2605 ever! #wordbrain #genius #words http://t.co/ygULwZTRYQ http://t.co/ORNxwtaTIl September 14, 2015 2:11 pm
  • Pretty impressed with the stops that @Telstra are pulling out to get my issues sorted... Service with a surprised smile! September 14, 2015 2:48 am
  • It's Tuesday. A perfect evening for this. And by this I mean beer (of course). #oohermrs… https://t.co/eiIttD5xWa September 8, 2015 8:17 am
  • Follow Along

Recent Posts

  • Moving to deeteal.com October 23, 2020
  • Asking a Better Question September 13, 2016
  • Growing & Developing your WordPress Meetup June 24, 2016
  • Making an Escape June 7, 2016
  • Changing Tack : Adjusting your Sails for the Winds of Change May 7, 2016
  • Privacy Policy
  • Disclosure Policy
  • Contact

© 2023 The Web Princess
Proudly custom built with Genesis