The Road Ahead - HTML5 Mastery: Semantics, Standards, and Styling - page 339

Figure 8-2. The City Press mobile-optimized news tip submission form page
TESTING MOBILE WEB PAGES
Testing a web page on an actual mobile device is the best way to know that a mobile
page is, in fact, optimized for a mobile device, but it's also possible to quite effect-
ively test web pages on emulated devices running on a desktop computer. Each major
platform has its own simulated device that runs on a desktop computer. This is great
for checking the layout and basic functionality but is not so great for testing perform-
ance, because the simulated device is using the processor of the computer, which is
many times more powerful than the processor in the mobile device. At any rate, the
following are some resources you may find useful for testing mobile web pages on a
desktop computer:
• Android : The Android emulator can be downloaded as part of the Android
software development kit (SDK) at ht-
tp://developer.android.com , and an assortment of hardware spe-
cifics can be emulated and simulated. One caveat of note with Android
is that when visiting a page on a local web server, the usual ht-
tp://localhost/ address will look for a web server running on the
emulator itself. Instead, the special URL http://10.0.2.2/ needs to
be used to access a web server running on the host computer.
• iOS : Apple includes a simulator with its Xcode software package, available
at http://developer.apple.com/xcode/ . The simulator can sim-
ulate an iPad and an iPhone with and without a Retina display.
• Windows Phone 7 : The Windows Phone SDK includes an emulator for test-
ing content on the Windows Phone 7 platform. This is downloadable from
http://create.msdn.com .
• Opera : Opera doesn't develop hardware but has a mobile version of its
desktop web browser, which has a simulator that may be downloaded from
http://opera.com/developer/tools/mobile .
In addition to this list, Adobe Device Central is an option for creating generic virtual
mobile devices of various configurations and screen sizes. A web page URL can be
opened in a virtual device under File Open URL….
It's also possible to test a responsive design in a standard web browser. If the Develop
menu is turned on in the advanced preferences of Safari, you will find that there is
an option under Develop User Agent to have the browser masquerade as a mobile
browser (or even a browser from another manufacturer!). Open a web page and resize
the window, and it'll act like it is being viewed on Safari's mobile version!