GoWebMo! Mobile Web Development on Windows Phone

HTML5 is all the rage these days and with good reason.  As the HTML5 specification moves closer to ratification as a standard (and yes, that’s still a ways away), the capabilities of HTML5 continue to improve, as does support for it on browsers.  Now the debate is starting to rage as to whether app developers should build native OS apps or web-only apps (my take on this debate is here).

Regardless of which side you take, chances are you’ll likely make use of at least a web control in your apps at some point for a myriad of reasons.  With that in mind, I want to provide you with some tips and tricks for building great web experiences for Windows Phone (in other words, on IE9 Mobile).

The Windows Phone Browser: IE9

The version of Internet Explorer on Windows Phone is 9 and for all intents and purposes, it’s the same engine that drives the IE9 experience on the PC.  This is good news because IE9 introduces a number of great features to the Internet Explorer browsing experience, including greatly improved JavaScript performance, GPU acceleration to assist in graphics and animation rendering and support HTML5 capabilities among other things.  For more on the capabilities of IE9, you can check out this website.

It’s worth noting that some features found on the PC version of IE9 are not included on IE9 for Windows Phone including Jump List capabilities, accelerators, web slices, etc. as they do not make sense in the context of the mobile browsing experience.  You can, however, pin a web page to your Windows Phone start screen, so that is something to keep in mind.

Web App Development Tools

As I’ve mentioned on several posts on this blog, if you’re building native Windows Phone 7 apps (even if they use web controls), the best thing to do first is download the free Windows Phone Developer Tools so you can get started building your apps.  The download package contains Visual Studio 2010 for Windows Phone (for building your app logic), Expression Blend for Windows Phone (for creating your interactive design elements), XNA Studio (for building games for Windows Phone), the emulator (for testing your apps in a virtual environment) and a number of training resources.

The great thing about the emulator is that is has IE9 for Windows Phone on it so you can test your web apps there to ensure they render properly.  That said, there may be other scenarios where you need greater debugging capabilities for your web app on IE9 for Windows Phone.  You may remember me saying that the engine for IE9 on Windows Phone is largely the same as IE9 for the PC.  This means that you can actually debug your web app targeting IE9 using the developer tools included with the PC version of the browser (just press F12 in the browser to get into the developer tools – a good set of  tutorials on how to use these tools can be found here, here, here and here).

If you decide to use the PC version of IE9, you may be interested in using the Agent Strings specific to IE9 Mobile.  The general Agent String format is as follows:

Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0; <DeviceManufacturer>;<DeviceModel>)

where <DeviceManufacturer> is the OEM manufacturer of the device and <DeviceModel> is the model of the device in question.  For the emulator, the agent string is as follows:

Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; Microsoft; XDeviceEmulator)

To get deeper into Agent Strings for IE9 Mobile, you should check out this post from the IE9 Team.

You can also use popular web frameworks for building immersive experiences into your apps as well. For example, PhoneGap is a great option for Windows Phone 7.5 developers that want to build hybrid (native/web) apps. JQuery Mobile, a very popular JavaScript library focused on mobile browsing experiences is supported as well, as are a wide number of other libraries for mobile web development.

Finally, if your looking for tools that will help you create professional mobile web sites, you may want to look into Expression Web, which is Microsoft’s professional web design tool.  There is a ton of great features in Expression Web that make building web experiences a whole lot easier.  Everything from full CSS management support, tools to ensure your sites are standards-based, a feature called SuperPreview that allows you review your site side-by-side with all the major browsers on the market to help you see differences in rendering immediately, and many other capabilities.

Happy MoWebDev!