HTML and CSS Reference
In-Depth Information
ADDING
BLING
TO A
BANNER AD
To ro u n d To ff t h e c h a p t e r, l e t 's b u i l d a n a d e x a m p l e u s i n g s To m e To f t h e co To l p ro p e r -
ties you learned about earlier. You'll make it look good, albeit different across older
browsers, and make it sing with a minimum of images (and a video). Later in the
book you'll explore how to make the ad responsive and add some cool animated
effects.
The ad will be for a fictional metal band called Dead Hamster. The band is
making a comeback, and its management wants to move forward with an online
advertising campaign that is going get the band noticed! And what better way to
get people to notice than by using thrills, spills, moving pictures, and raw exciting
content? OK, so they don't have Bieber or Jedward, but they would only serve to
draw the wrong kind of attention.
To m a ke a b i g s p l a s h , t h e a d w i l l w To r k To n m To b i l e d e v i ce s , s To t h e p To s t e r n e e d s
to work at different sizes and on different devices. And the band also has a huge
following in developing countries due to their freedom anthems. Therefore, the
ad needs to work across less-capable browsers.
Let's rock!
NOTE:
I got the idea for creating a responsive advertising example
from Mark Boulton's rather interesting “Responsive advertising” article
BASIC SETUP
The basic idea is to create a set ad size: the Internet Advertising Bureau (IAB) has
semistandardized sizes for web ads, as you'll see at
http://en.wikipedia.org/wiki/
We b _ b a n n e r.
L e t 's s t a r t off ff t h i s e x a m p l e b y c re at i n g a 7 3 0 x 3 0 0 p i xe l “ p off p - u n d e r a d . ”
But let's take it even further and make an eye-catching ad to show that many
of the tasks you used to do with Flash are now possible using only CSS3. In this
chapter you'll just build up the basic ad. (Animation will come in Chapter 5, and
responsiveness in Chapter 8.) You'll also learn how to provide a reasonable alter-
native in older browsers and what improvements you can and should make if you
were to do something similar in a production environment.
