Using your browser to test what sites look like on a mobile device (iPhone, iPad, Android, etc)
Posted Tuesday, July 26th, 2011 at 6:08 pm by Rob (20 posts)
We’ve been doing a lot of mobile sites for our clients recently, such as the new Bronx Zoo mobile site. As our clients review their standard desktop websites, wondering if they should create a mobile version, they’ve asked us how they can see what their sites look like on mobile devices. Here’s what you can do to check.
User Agent Switching: Some browsers, such as Safari (on the PC), allow you to switch user agents to an iPhone or iPad. This tells the website that you’re browsing from that device, and it sends you the version of the website that it would normally send to that device. This is an imperfect emulation, however, since the dimensions of your computer monitor probably differ somewhat from an iPhone. (If not, it’s probably time to switch to a new monitor).
Emulator Software: We often use BrowserCam, which will allow you to do a screenshot of many mobile browsers. The software isn’t perfect, however. It doesn’t allow you to use authentication for example, and other inconsistencies from the mobile version may appear from time to time. It is, however, one of the best options available right now.
Specific device testing: There’s a good iPhone tester available, as well as Blackberry emulators to mimic individual phones. Be aware that the Blackberry emulators are very large downloads.
In the end, you really do need to test on mobile itself. Testing in an emulator means you’re using a keyboard and a mouse. So you may know what things look like, but you won’t know what will happen if you tap versus mouse-click, swipe, or whether or not your text is too small for medium sized fingers.
The map is not the territory
To really test, you need the devices themselves to see how they are going to respond. Emulators are great for layout and design testing, but not great for testing how devices will respond to device detection (server side), media queries (client side), and of course any interaction with the hardware (besides gesturing and typing, think click to call or click to email functionality for now on mobile web sites – though the list will grow as new approaches are established for leveraging mobile hardware from websites).
Determine which browsers to focus on
As with any kind of testing, you should come up with a target browser/device list based on your site analytics. Most mobile sites will focused more on Safari/iOS and Android phones, as that is the devices used for browsing on most US based sites. You shouldn’t lose sight of Blackberry and Windows mobile, however, and perhaps even Nokia if you have a more international reach.
August 6th, 2011 at 5:21 pm
Thanks for this. I needed a way to show clients what things look like on a bigger screen. Will plus +1 you