I am newly a mobile development contributor to Fierce Wireless. An excerpt from my first article, Targeting Smartphone Apps for Mass-Market Users, published today, is below. Check out the full article at FierceDeveloper…

Who is the typical smartphone user? I envision a stressed-out businessperson or dangling-headphone hipster. My stereotypical smartphone user is an affluent, tech-savvy individual who harnesses the power of her device for near-constant interactions with mobile data services. She uses her smartphone to send email, browse the Web, stream videos and music, connect with friends on social networks, comparison-shop, and find nearby restaurants and businesses. Oh yes, and she occasionally uses her mobile phone for voice calls.

My stereotype crumbles as more and more mobile users upgrade from feature phones to smartphones. This year, mass-market consumers are stampeding into the smartphone ecosystem. 2010 is the year when “anyone with a touchscreen” is using their shiny, new smartphone to consume mobile data services. Clever mobile developers recognize the exploding smartphone user base as an unparalleled opportunity to simplify the usability of Mobile Web and native applications and provide personalized experiences to suit all kinds of smartphone users.

A reader recently wrote in from the UK, remarking on the lack of support for streaming Windows Media audio formats in mobile devices, especially smartphones. He attributed the poor support levels to lazy software engineering practices on the part of mobile device manufacturers. The reader was trying to create a Mobile Web page that streamed Windows Media audio (as an *.asx file) to a mobile phone. He provided me with sample markup and asked me why it didn’t work on many phones.

Let’s analyze whether it is possible to stream Windows Media audio to mobile browsers as a case study in cross-platform Mobile Web development.

MIME Types for Windows Media Players and Services

Microsoft publishes the following MIME types for Windows Media services. Microsoft does not declare that any of these MIME types are mobile-specific media formats.

Support for Windows Media Player MIME Types in Mobile Browsers

Now, let’s use mobile device databases and Accept HTTP request headers to determine whether a mobile browser supports the MIME types for Windows Media streaming formats.

Use the WURFL or DeviceAtlas mobile device databases to determine whether a mobile device supports any Windows Media MIME types for streaming media. These two industry-leading device databases track support for many mobile-friendly streaming media and audio formats. If a device database cannot determine support for streaming media formats, fall back to inspecting the value of a mobile browser’s Accept HTTP request header to find a list of supported content types. Any Windows Media MIME types found in the Accept header are supported by the mobile phone.

The WURFL device database documentation provides several characteristics and characteristic groups related to media playback and streaming. In the playback group, WURFL tracks whether a mobile device supports common video formats (Windows Media Video, H.263, MPEG4, H.264, Real Media, Flash Video and MOV) and audio formats (AMR, AAC and QCELP). Unfortunately, WURFL tracks only whether a mobile device supports a single Windows Media streaming format, Windows Media Video (WMV). The WURFL device database does not provide information about mobile support for Windows Media streaming audio formats.

The DeviceAtlas property explorer (free registration required) shows properties in the streaming group that track support for several streaming media formats in mobile devices. DeviceAtlas provides information about streaming audio (AAC, AMR) and video (H.263, H.264, MPEG4) formats in the 3GPP and 3GP streaming envelopes. DeviceAtlas’s audio player group tracks playback support for AAC, AMR, MIDI, MP3 and QCELP audio file formats on the device’s pre-installed audio player. Unfortunately, DeviceAtlas properties do not provide infomration about mobile support for any Windows Media streaming formats.

Unfortunately, both the WURFL and DeviceAtlas mobile device databases do not help developers determine whether Windows Media streaming audio formats are supported on mobile devices. The lack of device database properties for Windows Media formats can and should be interpreted as a commentary on the appropriateness of media streaming to mobile devices using Windows Media formats. If Windows Media streaming was possible on a wide variety of mobile devices, mobile developers would lobby to create properties in public device databases to document support levels.

On smartphones, downloadable third-party applications may provide support for streaming media formats that are not recognized by the built-in audio player. In this case, Windows Media audio streaming might work flawlessly but device databases would not recognize that the media types are supported on the mobile device. WURFL and DeviceAtlas track the capabilities of mobile device hardware and built-in browser applications but not device functionality extended by third-party applications.

Since device databases can’t help us find out whether Windows Media streaming is supported on mobile devices, let’s inspect Accept request header values from browsers on a few popular mobile device models. If we find MIME types for Windows Media streaming formats in the header value, then we know that the mobile device supports Windows Media streaming media.

Motorola Droid (Verizon):
Accept: application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5


Palm Pre (Sprint):
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5


Apple iPhone (AT&T):
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5


BlackBerry Curve 8310 (T-Mobile):
Accept: application/vnd.rim.html,text/html,application/xhtml+xml,application/vnd.wap.xhtml+xml,text/vnd.sun.j2me.app-descriptor,image/vnd.rim.png,image/jpeg,application/xvnd.rim.pme.b,application/vnd.rim.ucs,image/gif;anim=1,application/vnd.wap.wmlc;q=0.9,application/vnd.wap.wmlscriptc;q=0.7,text/vnd.wap.wml;q=0.7,*/*;q=0.5


LG VX9100 (Verizon):
Accept: application/vnd.phonecom.mmc-xml, application/vnd.wap.wmlc;type=4365,application/vnd.wap.wmlscriptc,application/vnd.wap.xhtml+xml,application/xhtml+xml;profile="http://www.wapforum.org/xhtml", image/bmp,image/gif, image/jpeg, image/png, image/vnd.wap.wbmp, image/x-up-wpng,multipart/mixed, multipart/related, text/html, text/plain,text/vnd.wap.wml;type=4365, audio/midi, audio/qcelp, audio/vnd.qcelp,audio/mid, audio/x-midi, audio/x-mid


The Accept request headers aren’t much help! The mobile devices with WebKit browsers (Motorola Droid, Palm Pre and Apple iPhone) specify only their preferred mobile markup and image formats, choosing to include media support indirectly in the regular expression for fallback content types (i.e. */*;q=0.5). For the BlackBerry Curve 8310, the header lists support for additional content types but does not list any streaming video or audio formats (outside of the fallback regular expression). The LG VX9100, an older mobile phone from Verizon, accepts several audio formats (i.e. audio/midi, audio/qcelp) but no streaming media formats.

Are Windows Media Streaming Formats Viable in Mobile Browsers?

Are Windows Media streaming formats viable on mobile devices? Clearly, Windows Mobile devices include the pre-installed Windows Media Player Mobile, so some smartphones can natively support streaming audio and video in Windows Media formats. Microsoft does not claim that Windows Media streams are compatible with any mobile platform besides its own mobile OS, Windows Mobile. We can conclude that Windows Media streaming audio and video formats are not broadly supported on mobile devices. Only Windows Mobile devices and the iPhone are known to support Windows Media streaming formats.

When implementing streaming audio and video targeted to mobile devices, a better solution is to choose a more lightweight streaming format that is widely supported by mobile devices and browsers. 3GP, 3GPP, H.263, H.264 and MPEG4 are well-supported by mobile devices and are better choices.

Improving a Mobile Web Page that Implements Streaming Windows Media

Our reader provided the following sample XHTML Mobile Profile document that embeds a Windows Media player. His sample code is below (modified slightly to preserve anonymity). Assuming that this code is intended for a Windows Mobile device, let’s improve the Mobile Web page to adhere to Web and Mobile Web standards and use only valid markup.

Here is the original XHTML-MP code sample:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Streaming Audio</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<table width="300"border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left"><img src="logo.jpg" width="200" height="50"></td>
</tr>
<tr>
<td><object id="mediaplayer" name="mediaplayer" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" height="50" width="200">
<param name="filename" value="http://foo.com/audio/start.php">
<param name="autosize" value="true">
<param name="autostart" value="true">
<param name="showcontrols" value="true">
<param name="showtracker" value="false">
<param name="autosize" value="true">
<param name="showstatusbar" value="true">
<param name="showdisplay" value="false">
<param name="showpositioncontrols" value="false">
<embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download" id="mediaplayer" name="mediaplayer" displaysize="3" autosize="-1" showcontrols="-1" showtracker="0" showdisplay="0" showstatusbar="1" showpositioncontrols="0" width="200" height="50" src="http://foo.com/audio/stream.asx" autostart="true">
</embed></object></td>
</tr>
</table>
</body>
</html>


The W3C Markup Validation Service uncovers many flaws in the sample code, including:

• The doctype is XHTML-MP but the markup content is clearly HTML. Many HTML elements and attributes are used that are not supported in XHTML-MP. (i.e. topmargin, marginheight, marginwidth, border, cellpadding, etc.)
• Image elements must include an alt attribute.
• XHTML-MP requires well-formed XML syntax. The img and param elements are unclosed in the markup sample.
• The object element contains attributes that are unsupported in XHTML-MP.

There is also a common-sense flaw in the code sample. The object element that actually embeds the Windows Media Player client includes classid and codebase attributes that reference the desktop version of Windows Media Player. These values should be checked for compatibility with Windows Mobile devices.

Since this markup is intended only for Windows Mobile devices, which are known to support the HTML doctype, let’s clean up the sample by:

• Changing the doctype to XHTML Transitional.
• Correcting the XML to restore well-formedness.
• Removing unsupported elements and attributes.
• Keeping the markup intact that embeds the Windows Media player. (I’m not a streaming media expert. Please leave comments if you can improve the object and embed elements for Windows Mobile clients.)

The updated XHTML code sample is below. It is still invalid markup, according to the W3C Markup Validation Service, but at least all validation errors are confined to the syntax of the object and embed elements that control the Windows Media player.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Streaming Audio</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="margin: 0px;">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left"><img src="logo.jpg" width="200" height="50" alt="logo" /></td>
</tr>
<tr>
<td><object id="mediaplayer" name="mediaplayer" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" height="50" width="200">
<param name="filename" value="http://foo.com/audio/start.php" />
<param name="autosize" value="true" />
<param name="autostart" value="true" />
<param name="showcontrols" value="true" />
<param name="showtracker" value="false" />
<param name="autosize" value="true" />
<param name="showstatusbar" value="true" />
<param name="showdisplay" value="false" />
<param name="showpositioncontrols" value="false" />
<embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download" id="mediaplayer" name="mediaplayer" displaysize="3" autosize="-1" showcontrols="-1" showtracker="0" showdisplay="0" showstatusbar="1" showpositioncontrols="0" width="200" height="50" src="http://foo.com/audio/stream.asx" autostart="true">
</embed></object></td>
</tr>
</table>
</body>
</html>


Capturing HTTP request headers from Web browsers on mobile devices gives you the information required to simulate the device in Firefox or a mobile device or browser emulator.

Here is a handy tool that allows you to easily view, cut and paste the HTTP headers sent by a Web browser on a mobile device. Follow these steps to capture HTTP headers from a mobile browser:

1. Browse to http://learnto.mobi using the mobile browser.
2. Select the View Request Headers link.
3. Notice the HTTP request headers on the displayed Mobile Web page.
4. Remember the four-digit number shown at the top and bottom of the page. (i.e. Viewing Request Headers #1234)
5. Browse to the same View Request Headers page in a desktop browser (i.e. Firefox, Chrome, Safari or IE).
6. Enter the saved number into the textbox at the bottom of the page. Press the Go button to view the HTTP request headers from the mobile device. (i.e. enter “1234″ into the textbox.)
7. Copy and save the HTTP headers for use in Firefox and mobile emulators.

Let’s look at some screenshots of this process. The following screenshot shows the location of the View Request Headers link that is clicked in Step 2 to display the HTTP headers.

The following screenshot shows the location of the four-digit number mentioned in Step 4 that is (temporarily) associated with the HTTP request headers. In this screenshot, the headers are from Firefox 3.5.

The screenshot below shows the location of the textbox from Step 6 into which the four-digit number from Step 4 is entered to call up a (recently) previously-viewed set of HTTP request headers. The HTTP request headers displayed in the screenshot are from a Motorola MB200 Cliq Android smartphone.

Once you are viewing a request headers from a mobile device in a desktop browser, simply copy and paste the headers to save them.

NOTE: The four-digit numbers assigned to HTTP request headers are temporary. They are re-assigned over time to new sets of headers. It’s important to complete the process of viewing headers on a mobile device and capturing headers using a desktop browser over a short time period, say 5 to 15 minutes.