How To Keep Ads From Breaking Your Mobile Pages

XML Error

I try to build mobile sites that work on everything from an old wml-only browsers to iPhones and the latest Android “Superphone”.  It’s more work but I believe it’s worthwhile. Supporting more devices brings in more traffic and hopefully makes users of old devices smile when they find a site that actually works on their phones.

I use adaptation to vary page and image sizes and MIME types to suit the capabilities of various devices.

BlackBerrys, iPhones and most modern  smartphones seem to work best with plain text/html.

But older phones expect XHTML-MP markup (WML for really old devices) together with the matching MIME types , “application/vnd.wap.xhtml+xml” or “text/vnd.wap.wml”.  These XML based markup languages and XML MIME types cause most browsers to parse the page strictly.  If the markup is not well formed and valid, the browser may display an error message rather than the page. You need to be sure your markup is valid.

My pages are valid and work well in a wide range of browsers, at least until I introduce mobile ads into the mix. I’ve used most of the major mobile ad networks and they all at least occasionally serve ads that are not valid XML and cause pages to break.  Some networks get it right most of the time, others never seem to. The most common errors are <img> tags that are missing the closing slash and naked ampersands (&)  in URLs.  The & character is reserved in XML and must represented using the entity &amp;

If you use ads on pages that are served with an XML MIME type you need to clean up the ad’s markup.  Fortunately there are libraries that make this easy. For PHP Tidy is popular.  Unfortunately it’s an optional extension that has to be compiled into the PHP exectable, which my shared hosting provider neglected to do.  Instead I use htmLawed which is a PHP script that should work with any host.  Here’s some code that should clean up the ads from any provider.

//Include the htmLawed library

// Start output buffering

// execute the ad code and capture it’s output in the buffer
include (“AdNetworkCode.php”);

// clear the buffer and capture the ad code in a variable
$ad = ob_get_clean();

// Configure HtmLawed to produce valid xhtml.
$config = array(‘valid_xhtml’=>1);

// Cleanup the ad code
$ad = htmLawed($ad, $config);

// Output the cleaned ad to the page
echo $ad;

The code should be pretty self-explanatory.
“AdNetworkCode.php” is your ad network’s unmodified code. You can either “include” it as I did here or paste in the entire code block at this point.
“ob_start();” turns on PHP’s output buffering which captures the ad code’s output in an internal buffer rather than echoing it to the page.
“$ad = ob_get_clean();” stores the output of the ad script in a variable so we can process in with HtmLawed. Using output buffering eliminates the need to modify the ad code which is prohibited by most ad network’s terms of service.

Related Post
: Validation is Your Friend