Side-by-Side Viewing of Mobile Devices

One of the things we've found in our work with testing various mobile devices is that it is often very convenient to be able to see the same page delivered to two different devices in a side-by-side comparison. The visual impact of the changes can be enlightening.

It turns out that this is relatively simple to do, using a special launch page and custom playback script. In the script the UserAgentString is set to a device and a sub-window opens emulating that device. After the two [it could be more, if you have the need] sub-windows are opened eValid pauses playback, leaving both sub-windows open and live.

In this state, you can manipulate either of the two emulated devices in any way you wish, and see what the server renders in response. For backup, you can see the server response for the same page request in the parent screen. Here is a screenshot of Two Smartphones (iPhone and Samsung Galaxy) and of Two Tablets (iPad and Samsung Galaxy Tab). Both screenshots show the same page all three ways. And you can see the UserAgentStrings directly.

Here is the full writeup of how this is done, including a sample script and a typical parameter setting file: Side-by-Side Comparison of Two Devices. Sample screen images are shown in Side-by-Side Sample Screens.