HTML and CSS Reference
In-Depth Information
agencies, and ad servers—again, this is something to be aware of when delivering ads to pages that have this viewport
set specifically, as your creative could be affected. The creative elements could scale up or down depending on the
scale set, which could create copy or images that are illegible or worse or make an unwanted change to the ad's width
if the publisher makes the content narrower than the ad intends to be.
Media Query and Pixel Density
When adjusting the viewport, you'll more than likely want to make use of CSS media queries for your mobile ad
creative. Chances are you won't know every device that will be accessing your ad content on a media sheet, so you'll
have to build an ad that is responsive and that adapts to the device viewing it. Responsive ad design takes a lot of
work and a lot of planning for clear execution, but if done correctly, a lot of time can be saved down the road. Since
many devices come at different screen sizes and pixel densities, it's increasingly hard for ad designers to handle all the
variances in the creative builds. Because this is such an issue for designers developing for mobile devices of various
sizes and densities, the folks at Teehan+Lax developed a nifty graphic and chart (
http://teehanlax.com/blog/
density-converter
)
to help you design content for screens of various pixel density (see Figure
8-3
).
Figure 8-3.
Scaling content for screens of various pixel density
At the time of writing, Apple devices had a pixel density of 1.0 and 2.0; Android had various others, including
1.4, 1.75, and 2.3. For example, iPhone 4 and above supports a higher pixel density—what Apple calls Retina Display.
On these devices, the width is still 320 in CSS pixels, but the device's pixels double every pixel to create higher image
fidelity. For example, an image at 300 × 250 would need a 600 × 500 image to look sharp on these higher pixel density
displays (see
http://quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
for more on this topic). By
reading over the post, you'll understand that the moral of the story is that CSS pixels have little or nothing to do with
actual physical device pixels. Thus, they should be used whenever possible, as they are interpreted consistently across
browsers regardless of device's underlying resolution. Listing 8-6 takes a look at working with higher pixel density
images using CSS. (Don't feel uncomfortable writing something like this.)
