|
Banner Ads And
Notices -- Theory
Source
|
|
Issue 58 - February 2003
|
There is a practical element to this month's
editorial, a little cut 'n' paste JavaScript to randomly display
banner ads, or any other type of image you might want to change –
it doesn't have to be a banner ad. The main article is also about
banner ads but is more theoretical.
Having spent many years as an advertising agency art
director, I'm very aware that there are things that so-called 'Web
design' course don't prepare you for. In fact, you will be very
lucky to learn this stuff in a graphic design course because it is
probably more to do with psychology than visual arts.
Some of it might seem very obvious – well it is when
someone points it out to you – so why do so many Web designers get
it wrong? It just hasn't been pointed out to them.
So here it is!
On a slightly different subject, if you
are still confused about Web graphic file formats, compression and
colour depth, I've just done an
article for the Macromedia Designer and Developer Centre which
should help you to understand it all better.
|
|
|
|
|
 |
|
Got a Web design related link that you want to
share with other WPDFD
readers? This is surely the most comprehensive list of Web design
links anywhere - over 2000 categorised links, updated each month.
See what other designers are doing in the new
portfolios
section!
|
|
|
Subscribe to be notified of what's new on Web Page
Design for Designers through a brief, monthly email.
|
|
|
|
News of the latest new products for Web designers -
with a particular emphasis on Web graphics - as usual.
|
|
|
|
An affordable but full-featured content management
system that allows non-technical staff to add and edit web page
content without knowing HTML. Frees web professionals from tedious
page updates and empowers writers and editors to make changes
directly.
|
|
|
|
With its advanced XML and XSL supported technology
and component based architecture, MoreMotion can be best classified as
an WYSIWYG XSL editor. Windows only.
|
|
|
|
Check if your internet connection is working as fast
as it should with this speed test.
|
|
|
|
Bios is a stylish new pixel font family that comes
in three weights for PC and Mac.
|
|
|
|
|
|
|
|
 |
Designing Effective Banner Ads
by Joe Gillespie
|
I've often heard it said that banner ads are
ineffective on Web pages. It's probably true, but then any
misconceived ad will be ineffective and most banner ads don't stand a
chance because the people that produced them don't know the difference
between a 'notice' and an advertisement.
A notice is a statement displayed in a prominent
position. It might say 'No Parking' or 'Closed' or 'Lost Dog'. It
imparts a small piece of information in a minimal way.
In offices and colleges, notices usually appear on a 'notice
board'. Firstly, it provides a point of focus - that's where you look
for notices. It also stops people from posting notices all over the
place untidily. In other words, it 'controls' the display of notices.
The actual form of the notice communicates something other
than the message written on it. It could be nicely printed, typed or
written with a felt-tipped pen. The differences these presentations
make say something about the message's importance and permanence - or
frivolity and transience.
The printed one that says 'No Smoking' or 'Emergency Fire
Drill' is quite different from the hand-written one that says 'Chess
Club, Thursdays at Five, Room 201'. They are all valid messages but
their presentation affects their perception to the reader to some
degree.
The purpose of a notice is to instruct or inform. 'Instruct' implies
some kind of authority and 'inform' is more to do with the interests
of the reader.
|
|
|
|
Okay, an advertisement is a notice too, at its most
basic level. But, the purpose of the notice for the chess club is not
just to tell chess club members where and when to meet, but also to
attract new members by 'advertising' the fact that such a club exists.
This is where the 'interests' bit comes in.
When the 'interests' part of the message dominates the basic
'when and where', you are talking 'marketing'! The fact that you are
not actually making any money from the activity doesn't mean you are
not 'selling'. What you are doing is trying to build upon 'interest'
and 'convince' the reader of something. An advertisement for a chess
club would have to do more than just inform, it would have to appeal
to the reader's intellect - or need for like-minded company!
You could place an ad for a chess club just about anywhere.
It's hard to think of an inappropriate place because chess is 'general
interest' and cuts across all boundaries of age, creed and race.
However, for someone with no interest in chess whatsoever, the ad will
be totally wasted. It would take a lot of convincing to get someone
with no interest in chess to come along to a chess club. This 'lot of
convincing' is what advertising is all about.
For every ad, there has to be a 'target
audience'. Defining and specifically addressing that target audience
is the most cost efficient way to spend any advertising budget. You
are shooting at the target with a rifle, not a scattergun. Knowing
'where' to place an ad is half the battle. For instance, placing a
banner ad for a Web design company on this site makes little sense
because the readership is mostly Web designers – they don't need Web
design companies! Although the readers might look at the advertiser's
site to see what the competition is like or to see if there are any
jobs, they are very unlikely to spend any money with them. Although
this seems very obvious, I still get several advertising enquiries
from such companies each month and have to explain all this to them
'ad nauseum'.
|
|
Banner Ads
 |
This article is supposed to be about banner ads. The
critical thing about banner ads, is that there's not a lot of room to
do any 'convincing'. The best you can hope from a banner ad is to draw
the reader away from what they are looking at to a place where you
do have space - on another Web page.
Banner ads are signposts to somewhere that you
probably don't want to go. Even though there is not much space, you
have to do that much convincing to start with. Missing out on this
simple requirement is where the majority of banner ads fail.
Let's stand back a little and look at what a
banner ad really has to do. It's not an easy job so a little analysis
is helpful.
|
|
|
First of all, it has to be visible. That's not easy!
Imagine a road with flashing neon signs on both sides all shouting at
you and competing for attention - Fried Chicken, Luxury Rooms, Low
Prices. The Web is a bit like that too. In the street, or on the Web,
it's not the sign that shouts loudest that wins, it's the one with the
right message delivered competently. If you are vegetarian, the visual
pyrotechnics of the 'Chunky Chicken' sign are just meaningless noise.
On the other hand, in this environment, a small, more tasteful sign
that says 'Fresh Salads' could easily be lost.
The important factor here is something called 'The language of the
marketplace'. You first have to level the playing field so that your
message is appropriate for the environment in which it will appear.
The best way to be seen is to be different. An animal that doesn't
want to be seen adopts the same marking as its surroundings -
camouflage! To make your ad visible, try to make it as visually
different from its immediate surroundings as possible.
|
Identify
|
In making your ad visually different, you have
probably created a distinct identity for it. This is a very valuable
property because it sets you apart from all the rest and you should
endeavour to maintain and build upon that identity through consistent
application. Every time you make the same, or very similar visual
statement, the identity is made stronger. It grows and flourishes.
Suppose you are out on the town and someone hands you a flyer
advertising the Pink Pussycat Club and you think, "That looks
interesting". The paper is pink and has a lighter pink cat logo along
with a slinky typeface. You turn down a street and there in the middle
distance is a pink sign with a pale pink cat on it. You are there,
there's no question!
Had the flyer or the sign deviated from the 'look' you were
expecting, the club would not be so easily found.
So many banner ads bear no relationship whatsoever to their
destination and they are missing out. The ad and the destination page
should belong to one another because that helps reinforce brand
identity - and confidence.
Confidence is the key to successful marketing communication.
|
|
|
|
Having caught the reader's attention, you also have
to get their interest.
If someone is beckoning at you with a finger, the person doing
it and their demeanour will considerably influence your reaction.
Regardless of who they are, your initial reaction will probably be one
of suspicion. It is their job to break down your natural reticence and
entice you forward and, if they know what they are doing, they will
use a skilful combination of body language and verbal language to do
so. They are communicating at a number of levels, on the surface and
subliminally. If they should mistakenly send a wrong signal, the spell
will be broken.
In graphic design terms, the verbal message is the copy and
the subliminal one, the visual presentation - the 'look' of the ad.
Both are very important and have to work in synergy and harmony.
Again, a lot of banner ads fail because the words fail to convince and
the design fails to inspire confidence. Neither the right words with a
tacky presentation nor a stunning looking ad with the wrong message
will do. You have to get both correct! Very few do.
So how can you inspire confidence with graphic design? Well, think of
how a singer delivers a song. Not everyone can sing.
Some have little concept of pitch or rhythm and their attempts
can sound painful to others - if not to themselves.
Some can keep in tune and remember the lyrics but you still wouldn't
want to listen to them if you were sober.
A good singer will not only sing in tune but the way they present the
song makes it seem like they are talking directly to you, not to a
microphone or an 'exit' sign at the back of the venue. You are
communicating soul-to-soul.
Graphic design is about delivering information in
ways that people can relate to emotionally. Not everybody likes opera
or country and western but everybody dislikes either of them sung
badly! Where everybody won't necessarily like a particular style of
graphics, if it is just plain bad, nobody will like it and it will not
inspire confidence - not only in the designer, but also in the company
who hired them!
You will inspire confidence by making positive graphical statements -
ones that say something at an intellectual and/or emotive level and
are not just visual noise. Visual noise is any graphical statement
that does not contribute to the communication - arbitrary decoration,
irrelevant images, pointless movement. It dilutes the message and
detracts from it and should be avoided. Don't be afraid of 'plainness'
- some of the best press ads are just simple lines of black and white
type. It's what they say that counts! The perceived need for so-called
'eye-candy' usually emanates from a lack of something to say.
To sum-up, here are some pointers to help make
your banner ads more effective.
|
|
|
 |
Choose the most appropriate site to put your banner
ad to maximise its potential with the intended audience.
|
|
|
 |
Identify the environment in which the banner will
appear and then make sure it is visible within it.
|
|
|
 |
Have a definite message that is short and sweet -
and get it across quickly.
|
|
|
 |
Don't try to say too much. Use a banner as a
'teaser' to entice the reader into finding out more - at the
destination web page.
|
|
|
 |
A banner should always look important. Use positive
imagery of a high quality.
|
|
|
 |
Keep files sizes as small as physically possible.
|
|
|
 |
Make the banner and destination work together.
|
|
|
 |
Make your visual statements contribute to building
an overall identity through distinctiveness and consistent use.
|
|
|
|
Physical dimensions, file size
and formats.
The most common sizes for banner ads are 468 x 60
px and half of that (234 x 60 px). Other popular sizes are 460 x 55
px, 392 x 72 px, 125 x 125 px, 120 x 90 px, 120 x 60 px, 88 x 31 px,
120 x 240 px.
Publishers prefer small file sizes and often put
a maximum file size limit of 10-15K on banner ads. That doesn't seem
like a lot but this new Bios font banner made with Adobe ImageReady is
only 4.1K!
|
|
|
|
GIF is the most common format, static or animated,
and will cause the least problems. Try to avoid high colour depth
images with subtle gradationsFlash
banners can work well allowing subtle gradations and animation but
not all publishers permit them. Flash renders small type very poorly
- consider using pixel fonts to keep small text sharp. This animated
banner ad for Nano Sans is a mere 5.8K.
|
|
|
|
JPEGs are good for full-tone photos and
illustrations but are unlikely to display type well at any size. Try
splitting such a banner into two (or more) files - a JPEG for the
photo and a GIF for the type - but check that the publisher can
accommodate such an arrangement. More about this in the
TopTips section!
|
|
|
|
|
|
|
|
 |
|
I watched Steve Jobs announce Apple's new Safari Web
browser on the MWSF webcast and had it downloaded and running on my
PowerBook within minutes. Yes, it was miniscule in file size (less
than 3 Meg) and it performed like a racehorse as he said it would. As
with every new browser or browser version that comes out, I check out
my sites to see if anything nasty has happened – like when IE 6.0 came
out and I had to modify over 200 pages because it was centring all the
text!
Happily, I didn't find any serious display
problems with Safari on my main sites, because I don't push the boat
out too far. There were minor differences and Flash movies seem to run
slowly but on my
FunWithFonts site, there were more serious problems. This site
uses bleeding edge CSS-P as a test of how well (or badly)
browsers cope. More worryingly, Safari's implementation of
JavaScript has some critical bugs that can render a site useless if it
depends on JavaScript.
Clearly, Apple still has some work to do in this department to
bring Safari up to the CSS rendering and JavaScript standards of
Mozilla or IE 6. Nevertheless, it looks very promising and the 'bug
report' button on the toolbar certainly gives the impression that they
will respond to feedback.
Apart from the raw speed and (pretty good, if not
perfect) rendering, Safari boasts a few other interesting features.
There is a Google search facility right up there in the toolbar, but
that's hardly groundbreaking because I've had an even
better one
on my PC for some time now which also gives a 'Google ranking' for the
currently displayed page.
The 'SnapBack' facility is handy. It takes you back to the top
level of a site so, if you have drilled down in Google several levels,
for instance, hitting the SnapBack button takes you back to the
original search results page so that you can go off in another
direction.
The BookMark management is better than in any other browser
I've seen and other nice little touches include a menu item (and key
combo) for emptying the cache instead of having to go through layers
of dialog boxes, like most other browsers.
One feature, which I found by accident, and I've never seen it
mentioned anywhere else, is the ability to set a minimum type size. I
often have problems with other browsers where the Web designer has
specified the type in ems but relative to my default type size, it
takes the text below the critical 9 pixels below which fonts become
unreadable – there just aren't enough pixels to form the characters.
Every browser should do this – sub 9 pixel text makes no sense! Mind
you, the ability to increase or reduce the text size on a page with
just a key press in Safari is very useful in itself.
Sadly, Safari only works under OSX (Jaguar),
which I loathe with a passion - but I won't go into that here. So,
I'll not be using Safari, except for testing purposes. Web designer
have to know about the quirks in all significant browsers and over a
million users is significant. I just hope that it galvanises some of
the other bloated and buggy browser manufacturers into cleaning up
their acts because it shows what can be done when you really try.
Downloads have already passed the one million mark and some
other browser manufactures are going to find it very difficult to
compete, but even at that, Safari is not going to do much in the
overall scheme of things due to Microsoft Internet Explorer's
overwhelming dominance. It will have to slog it out with the rest of
the 'also rans'. Pity!
|
|
|
|
Safari 1.0 Beta v51
|
|
|
|
80%
|
|
|
|
90%
|
|
|
|
n/a - but very valuable nevertheless!
|
|
|
|
85%
|
|
|
|
|
|
|
|
Free.
|
|
|
|
Small, fast, elegant, but needs more work.
|
|
|
|
|
|
 |
Random Banner Rotation Script
|
You may have noticed that some of my banners rotate
- the one on the WPDFD home page is a prime example. Each time you
load the page, you get a different ad. This is done with a little
JavaScript routine which I will share with you.
There are two scripts. One in the body of page at the
place you want the banner to appear and one in the head (or in an
externally linked .js file if you prefer).
This main script sets up an array of banners,
much like the array you would use for rollovers.
var max=3;
var thisBanner=1;
var banner=new MakeBannerArray(max);
function MakeBannerArray(n)
{
this.length=n;
for (var i=1; i<=n;i++)
{
this[i]="";
}
return this;
}
Every banner requires all the HTML to display
that banner to be put into an array element. You should, of course,
substitute your own link URL and the path to your image file in each
instance. The easiest way to do this is to insert the actual banner on
the page and copy and paste the HTML into the script inside single
quotes.
banner[1]='<a
href="--- link URL ---"><img
src="--- path to image file ---"
width="468" height="60" border="0" alt="whatever"><\/a>';
banner[2]='<a
href="--- link URL ---"><img
src="--- path to image file ---"
width="468" height="60" border="0" alt="whatever"><\/a>';
banner[3]='<a
href="--- link URL ---"><img
src="--- path to image file ---"
width="468" height="60" border="0" alt="whatever"><\/a>';
Note that when HTML is put into JavaScript like
this, you need to 'escape' certain special characters such as the
slash in '/a'. This is done by putting a
backslash in front of it - '\/a'.
Depending on which syntax checker you use, it may also suggest that
you encode some other characters as entities but I haven't found this
necessary.
To generate the random number, I use this little
routine which generates a random number between 1 and max.
function rand(n)
{
rnum=Math.floor(n*Math.random())+1;
return rnum;
}
Finally, the function that is called from the
page and pulls it all together is just this:-
function setBanner()
{
thisBanner=rand(max);
}
The script that goes on the page looks like
this:-
<script type="text/javascript"
language="JavaScript">
<!--
setBanner();
document.write (banner[thisBanner]);
// -->
</script>
The setBanner()
function generates a random number and passes a random array element
back to the document.write (banner[thisBanner]);
statement which prints it to the page at the point where the script
resides.
You can see the whole thing working on
this page
and I've added a Flash banner and a JPEG/GIF combo banner to let you
see how to add those to the banner array.
|
|
|
|
|
|
|
|
Send your TopTip to
toptip@wpdfd.com
|
|
