HTML and CSS Reference
Depending on the media buy, ads need to be developed in different sizes to satisfy all the placements within the
publisher's available inventory. This is why it's very important up front to understand where the ad will be delivered
before any development is done. It's even more important if the ad has specific functionality and rich features such as
expanding real estate or forced video playback. Since certain sites won't allow these features, it's in the best interest of
the advertiser to understand the requirements beforehand. Misunderstanding the publisher's requirements may lead
to a reduced ad experience or a late campaign launch.
Now, I know what you're saying. “Why would I want to reduce my creative? I want to make the biggest splash I
can and wow my target audience!” Well, that's all well and good if you can, but at the end of the day, if the publisher
won't run your ad because of a certain feature set, you won't be making any splash at all. Publishers are a hard group
to budge; it's their content and their user base, after all. Would you invite someone into your living room and give him
free rein to rearrange the place, add things, even remove them? Probably not—unless you got some sort of benefit
in return. I like the saying, “No matter how much you love Pizza, you'll never give the delivery guy the keys to your
house”. So for your own sake, please examine your media plan carefully; note what is and isn't accepted and where it's
accepted before any development begins. You might consider having a one-on-one call with your publisher to iron
out any unresolved details prior to campaign launch.
As just mentioned, different publishers require differently sized ad units to satisfy their inventory. A typical ad size for
desktop display is 160 pixels in width by 600 pixels in height; this is what is called a 160 × 600 ad unit or skyscraper.
Other typical sizes are 300 × 250 and 728 × 90. For mobile it's pretty standard to see 300 × 50 and 320 × 50. But note
that each publisher's requirements are different; they can vary drastically from one site to the next. The spec sheet
associated with the media plan should provide technical details for creative development. Be sure to request this
sheet from publishers and ad networks before building out the creative; doing so will save you time in the long run.
I've seen more often than you might think, where a creative is built and an attempt is made to traffic it to the pub's site,
only to find that they won't accept its sizes and feature set.
Understanding the media plan is really important, but so is understanding why publishers can't or won't take certain
formats or features within an ad unit. Their reasons could be related to technical limitations within their site's
occurs, the best thing to do is set up a kickoff call with the publisher to iron out any and all details before you begin.
One developing design pattern is responsive web design (RWD); it's also known as adaptive web design. A
thing to consider about RWD is that the ad layout may need to cater to the site's layout. Thus, a 728 × 90 ad unit may
need to be developed for a 300 × 250 size as well as a 160 × 600 size—and all within the same ad tag. The publisher's
requirements are paramount here; they should be discussed before development and design begins. RWD is
becoming a huge area of interest in the web world due to the ability of so many phones, tablets, and televisions to
access websites. Publishers don't want to increase their operational workload or worry about developing a different
version of their site for each and every device that can access it. So they rely heavily on cascading style sheets (CSS)
Using CSS media queries (more on this topic in Chapter 3), a publisher can tailor content in such a way that it's
formatted correctly for the device or screen accessing it. For example, if I were viewing www.bostonglobe.com full-
screen on my 27-inch Apple iMac desktop computer, my full-screen width would be 2,560 pixels, whereas if I were
viewing it on my iPad in portrait orientation, the screen width would be 768 pixels. This value, when used to check
against the CSS media query for screen width, allows a publisher to adapt its site layout dynamically and re-align
content. It's still the same site and URL, but the layout changes, which can result in the images shown in Figure 1-2 .