Mobile Web Applications - HTML5 with Visual Studio 2012 - page 122

Chapter 6
Mobile Web Applications
So far, we have only looked at desktop browsers, however, one of the really great aspects of HTML5 is how
well it is supported on a wide variety of devices including mobile phone, tablets, and TVs. In fact, the
number of HTML5 devices is expected to exceed 1 Billion by 2013 (see the article at
http://www.strategyanalytics.com/default.aspx?mod=pressreleaseviewer&a0=5145 ). As of this writing,
the Opera Mobile and Firefox Mobile platforms lead the pack with 369 and 325 points, respectively, as reported
by Html5Test.com . When Blackberry 10 releases, it is expected to receive a whopping 447 points out of a possible
500.
On a mobile device you will use native applications as well as web applications. Native apps are developed
for a specific mobile platform and installed on the device, or downloaded through the phone service. Native
apps can often provide the best user experience because they can make maximum use of the device's specific
hardware and OS features. However, Web apps, due in part to the popularity of HTML5, are increasingly in
demand as well. And they can be developed almost as easily as those used by desktop browsers.
In this chapter I will introduce some of the emulators that are available to help you test your site on various
mobile devices. The biggest challenge that you'll face is supporting a variety of form factors. I will show you some
techniques that will allow your web page to dynamically adjust to different screen resolutions. This will enable
you to take advantage of a larger screen when it's available and still support even very small devices from the
same code.
Using Emulators
To see how your web site works on a mobile device you can use a number of phone emulator applications. While
these may not function exactly as the actual hardware they provide a reasonable approximation. I'll show you
how to install and use several of the more common utilities.
Installing the Windows Phone Developer Tools
I'll start with the Windows Phone Emulator, which is part of the Windows Phone SDK 7.1. You can download and
install the SDK from this site: http://www.microsoft.com/en-us/download/details.aspx?id=27570 . The SDK
is only supported on Visual Studio 2010 and includes VS 2010 Express for Windows Phone. However, you will
only be using the emulator application which is not specific to any version of Visual Studio.
After installing this, start the emulator, which you'll find in the Windows Phone SDK 7.1 start menu. After
the application has loaded, click the Internet Explorer application and then enter the URL of your web site from
Chapter 4 . Make sure to include the http:// prefix in front of localhost. You'll need to click the keyboard buttons
on the phone emulator to enter the address. The site will look like Figure 6-1 .