Someone in the Minneapolis St. Paul WordPress User Group recently asked for input on the best mobile emulation software for responsive web design work. There are several tools Due North Studios uses when working on a responsive project:
The Real Deal: Using An Actual Mobile Device
When it comes to developing or debugging responsive website designs, nothing beats being able to use an actual device. This is the process I use:
- Plug iPhone into my Mac
- Open up Safari (make sure “show development menu” is check under preferences->advanced)
- Open Safari on my iPhone and navigate to the page I’d like to inspect
- In Safari’s menu on the Mac, go to Develop -> (iPhone) -> (Page)
Chrome Canary Developer Tools Emulation
- Open up developer tools
- Open up the console by pressing the escape key
- Click the emulation tab
- Select the mobile device you’d like to emulate and off you go!
- Saucelabs.com – offers a cloud-based Android emulation tool. However, the device only emulates one screen size.
- Browserstack.com – allows for debug/development across multiple mobile devices, all in the cloud. The subscription cost may be a bit expensive if you aren’t working with mobile development everyday.
Whichever tool you decide to use, let Due North Studios know if you need some help. We’ve worked on a number of responsive web development projects and would be happy to lend a hand.