HTML and CSS Reference
In-Depth Information
Here I implemented some simple styling to alter the ad's dimensions. I also hid
the video player and some of the text, and turned off all the animations (except
the awesome flames), because I felt the ad would be too cluttered at a smaller size.
Smaller, less-powerful devices also appreciate less load on their processors.
And that's it!
Figure 8.13
shows the three different sizes of the ad.
FIGURE 8.13
Et voilà,
responsive advertising!
WRAPPING
UP
This chapter has given you valuable insights into optimizing your web creations
so they'll look better and perform better on different types of devices, from tiny
mobile devices to wide-screen monitors. Along the way you looked at media queries,
viewport, adaptive image and video techniques, and more. I think you'll agree that
this chapter was a lot of fun, so go forth and play!
