HTML and CSS Reference
In-Depth Information
Now there are also many services you can use to test how your content will render and function on a variety of
devices. One such service is called DeviceAnywhere (
http://keynotedeviceanywhere.com
)
, which effectively allows
for a virtual view into your content on any specific device. You want to know how your ad looks on a first-generation
Apple iPad running iOS 3.1? It's got you covered. How about an HTC running Android 2.3? Yep, that one too!
DeviceAnywhere is a great tool to leverage for the arsenal of devices it has access to, but it still lacks in the hands-on
debugging experience in my opinion. If you're a publisher wanting to test your web content on mobile devices but
have limited at your disposal, check out MobiTest by Akamai (
http://mobitest.akamai.com/m/index.cgi
)
. This
tool allows users to test page content on various devices from different locations, and you can even video capture
the results to share with other colleagues. Again, most of these tools are virtual windows into the environment you're
attempting to test for and for skeptics like myself; you may just need to test on the real thing.
Optimization
Optimization is an ongoing process when crafting web content or advertisements. Every single addition to the
DOM or any additional asset being loaded into your ad will eventually need to be optimized, if not for the sake of
performance for the sake of the publisher's requirements. Also, bandwidth is a limited resource and user experience is
prime, so be sure to compress images using proper settings with programs such as Adobe's Photoshop or Fireworks. If
you're a Mac user, check out the great image optimization applications called ImageOptim (
http://imageoptim.com
)
For the script side of things, make sure you clean up after yourself by doing your own garbage collection; if you
have event listeners, make sure you remove them when you're done handling the event. Also, be sure to remove
animation loops or iteration processes when they're not needed. Timers like
setInterval
and
setTimeout
can
become expensive and taxing quickly, so be sure to clear them when not in use.
Be sure to always minify text-based files like HTML, CSS, and JavaScript for production ads and keep a copy of
a more verbose version to go back and make edits so you don't have to work off the minified version. In conjunction
with minification, be sure to use GZIP compression whenever you can. By gzipping your text-based files, you create
a
.gz
version of your file, which is significantly smaller than the minified version alone. Compressing via GZIP
allows for the smallest file transfer size, which will minimize bandwidth constraints and provide an overall faster
web experience. Just be sure your hosting server or CDN has the appropriate configurations for serving GZIP files.
If the users requesting browser cannot decompress or unzip the file before it renders it, the user will just be served
the minified version of the asset although most browser now days support compressed content. To test whether your
server is supplying gzipped files, visit
http://gidnetwork.com/tools/gzip-test.php
.
Also, it may be best to use an
automated build system that takes your source file, minifies it, GZIP compresses it, and places it in a desired location
on your hosting server. Tools such as Ant [
http://ant.apache.org/
]
, Maven [
http://maven.apache.org/
], and
others can help you do this automatically.
Avoid reflows and repaints to the DOM by inspecting the “timeline” tab in your favorite web inspector. By using
this tool, you'll be able to see what the browser is actually tasked with doing when a user is requesting your content.
By handling all of your DOM setup before it needs to reflow and/or repaint, this will eat up fewer processes and
provide a better overall user experience. Figure
10-4
illustrates how the timeline section in your web inspector may
