For browsing, IE 10 provides a great touch experience with the Metro style browser. If you don’t have touch enabled hardware available, here’s a quick way to simulate touch behavior to test your site.
Visual Studio Simulator
Visual Studio Express 2012 is designed for writing Metro Style apps. It includes a very nice “slate” simulator. The simulator is designed for testing various screen sizes, resolutions, orientations, layouts, and touch. Therefore, if you don’t have a touch monitor, you can simulate it. Here’s what IE Metro Style browser looks like in the simulator. The controls on the left allow you to simulate resolution, rotation, and touch gestures.
How Do I Get the Simulator?
First, you need Visual Studio 2012 Express. You can get the latest version as well as Windows 8 from MSDN. You can download from the Downloads for Metro style app development page.
Next, we need to create a Metro style app. The Metro style app doesn’t need to do anything. We need a project to launch the simulator. This can be done by creating a new project and selecting one of the Metro style templates.
Now we just need to debug our new app in the simulator. I like using the debug toolbar to target and launch the simulator.
You should now see your simple Metro style app running in the simulator. I used the “blank” template in my example resulting in a black screen.
Starting the IE 10 Metro Browser in the Visual Studio Simulator
The simulator is a full virtual desktop environment. Everything that is available on the local machine is also available in the simulator including Internet Explorer 10.
Since the simulator is a representation of a slate, switch to the desktop by clicking the “Windows” start button at the bottom center of the simulator. This will take you to the start menu. Click the IE tile to launch the IE 10 Metro style browser.
The touch controls are grouped together at the top of the toolbar. Here’s an example from the IE Test Drive site that allows you to zoom and rotate pictures with multi-touch gestures.
The “hand” control allows you to test single touch gestures such as tap and pan. The pinch zoom and rotate controls allow you to test multi-touch gestures. Hold down the left mouse button and roll the mouse wheel to change the distance between the multi-touch touch points. See this article in MSDN or more information.
What Should I Test?
Some behavior does change in the Metro style browser based on touch. This isn’t an exhaustive list of things to test but will give you an idea of what to test.
On-Screen Touch Keyboard – The on-screen touch keyboard is displayed if a user taps into a text field. This is different behavior from the mouse and keyboard.
Gestures – You should test the multi-touch gesture pinch zoom to see the behavior of your site. Don’t forget to test single touch panning and “flick” to scroll through a list.
Bonus Testing
Beyond the touch simulation, you can test orientation (Portrait) and resolution with the other controls on the simulator. These are good tools for inspecting layout for slate devices.
Happy testing!